Persist authentication with React Native / Redux and Firebase

Question

I have a fairly simple React native / Redux app and have recently added Redux persist with AsyncStorage to help carry over the state upon reload.

However, I am having issues getting Firebase to re-authenticate the user. I was wondering if anyone has experience as I am fairly new to Redux as well as Firebase. To be more clear, I would like the user to login once, and then not have login again every time they open the app.

my login user action:

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));
      });
  };
};

My 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;

Could someone point me in the right direction? I have tried making a reauthUser action, but got stuck as I could not find a way to reauthenticate the user, as the Auth object doesn't hold the password (obviously for security reasons)

Answer 1

Are you using the web SDK? If you are, then first you need to using this instead https://github.com/invertase/react-native-firebase

These libraries are for the react-native project with native support.

If you are already using it, you could check the API here https://rnfirebase.io/docs/v3.2.x/auth/reference/auth

Setup all the onUserChanged,onAuthStateChangedetc. Then your app should no problem with re-authenticate stuff.