使用 React Native / Redux 和 Firebase 保持身份验证答案

【问题标题】：Persist authentication with React Native / Redux and Firebase使用 React Native / Redux 和 Firebase 保持身份验证
【发布时间】：2017-05-10 04:35:56
【问题描述】：

我有一个相当简单的 React native / Redux 应用程序，最近添加了带有 AsyncStorage 的 Redux persist 以帮助在重新加载时传递状态。

但是，我在让 Firebase 重新对用户进行身份验证时遇到了问题。我想知道是否有人有经验，因为我对 Redux 和 Firebase 都很陌生。更清楚地说，我希望用户登录一次，然后每次打开应用程序时都不要再次登录。

我的登录用户操作：

export const loginUser = ({ email, password }) => {
  return (dispatch) => {

    dispatch({ type: LOGIN_USER });

    firebase.auth().signInWithEmailAndPassword(email, password)
      .then(user => loginUserSuccess(dispatch, user))
      .catch(() => {
        firebase.auth().createUserWithEmailAndPassword(email, password)
          .then(user => loginUserSuccess(dispatch, user))
          .catch(() => loginUserFail(dispatch));
      });
  };
};

我的 App.js：

    class App extends Component {

    constructor() {
      super();
      this.state = {
        rehydrated: false,
        store
      };
    }

  componentDidMount() {

    const persistor = persistStore(
      store,
      {
        storage: AsyncStorage,
        whitelist: ['auth']
      },
      () => { this.setState({ rehydrated: true }); }
    );

    AppState.addEventListener('change', () => this.handleAppLoaded(AppState.currentState));

    const firebase_config = {
    apiKey: Config.FIREBASE_API_KEY,
    authDomain: `${Config.FIREBASE_PROJECT_NAME}.firebaseapp.com`,
    databaseURL: `https://${Config.FIREBASE_PROJECT_NAME}.firebaseio.com`,
    storageBucket: `${Config.FIREBASE_PROJECT_NAME}.appspot.com`,
    messagingSenderId: Config.FIREBASE_MESSAGE_ID
    };

    firebase.initializeApp(firebase_config);
  }

  componentWillUnmount() {
    AppState.removeEventListener('change', () => this.handleAppLoaded(AppState.currentState));
  }

  handleAppLoaded(state) {
    if (state === 'active') {
      store.dispatch(renewToken(store.getState()));
    }
    return null;
  }

  render() {
    if (!this.state.rehydrated)
          return null;
    this.handleAppLoaded(AppState.currentState);

    return (
      <Provider store={store}>
        <RouterWithRedux />
      </Provider>
    );
  }
}

export default App;

有人能指出我正确的方向吗？我曾尝试进行 reauthUser 操作，但由于 Auth 对象不保存密码（显然是出于安全原因），我找不到重新验证用户的方法而被卡住了

【问题讨论】：

Firebase 会话应在重新加载后持续存在。 onAuthStateChanged 侦听器是检测该状态的正确方法。重新启动应用后，您的 Firebase 会话是否持续存在？ Firebase 最近修复了一个与 react-native 状态持久性相关的错误。确保在测试前更新到最新版本。
firebase 会话在重新加载后确实持续存在。我的问题是如何让 React Native 使用 Firebase 凭据重新进行身份验证。我已经通过保持身份验证状态解决了这个问题，并在重新打开时检查用户是否存在，如果是这种情况，则将其登录。
来自新手的道歉，因为我的问题措辞可能不正确。 Firebase 不是问题，而是我在应用中保持状态的方式。

标签： firebase react-native redux firebase-authentication

【解决方案1】：

您使用的是网络 SDK 吗？如果你是，那么首先你需要使用这个来代替https://github.com/invertase/react-native-firebase

这些库用于具有原生支持的 react-native 项目。

如果你已经在使用它，你可以在这里查看 API https://rnfirebase.io/docs/v3.2.x/auth/reference/auth

设置所有onUserChanged,onAuthStateChanged等。那么你的应用应该没有问题重新验证东西。

【讨论】：