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)

Firebase session should persist after reload. onAuthStateChanged listener is the right way to detect that state. Is your Firebase session not persisting after restarting the app? There was a bug recently that Firebase fixed related to react-native state persistence. Make sure you update to the latest version before you test. — bojeil
– bojeil, Commented Dec 27, 2016 at 8:39
The firebase session is indeed persisting after reload. My problem was how to get React Native to reauthenticate with the Firebase credentials. I have solved it by persisting the authentication state, and checking if a user exists upon re-opening and then logging them in if that is the case. — phil
– phil, Commented Dec 27, 2016 at 20:01
Apologies from a newb as I may have phrased my question incorrectly. Firebase was not the issue, but rather it was how I was persisting state in my app. — phil
– phil, Commented Dec 27, 2016 at 20:03

benomatis · Accepted Answer · 2023-01-26 19:52:03Z

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, onAuthStateChanged etc. Then your app should no problem with re-authenticate stuff.

edited Jan 26, 2023 at 19:52

benomatis

5,6537 gold badges39 silver badges61 bronze badges

answered Feb 20, 2018 at 15:16

Tyreal Gray

3731 silver badge7 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Persist authentication with React Native / Redux and Firebase

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related