How to check if user's logged in, in react native using firebase?

10,468

This method helps you with that. Set this in your componentWillMount

firebase.auth().onAuthStateChanged((user) => {
      if (user) {
        console.log('user logged')
      }
   });

More info here: https://firebase.google.com/docs/auth/

Share:
10,468
K.Wu
Author by

K.Wu

Software Engineer at Google

Updated on June 09, 2022

Comments

  • K.Wu
    K.Wu almost 2 years

    Here's what I have so far, I use redux to maintain the login state globally. In my login screen, I'm using action creator to log user in like so...

        // In LoginScreen file
        onLogin = () => {
          this.props.accountLogin({ email, password });
        }
    

    And in actions file, accountLogin is defined as:

        // In auth_action file
        export const accountLogin = ({ email, password }) => {
          firebase.auth().signInWithEmailAndPassword(email, password)
            .then(user => {
              dispatch({ type: LOGIN_SUCCESS, payload: user })});
          });
        };
    

    Then, in reducer file, case LOGIN_SUCCESS is handled like so...

        // In auth_reducer file
        const INITIAL_STATE = {
          // ... Other stuff
          user: null
        };
        export default function (state = INITIAL_STATE, action) {
          // ... Other cases
          // Login Successful case
          case LOGIN_SUCCESS:
            return { ...state, user: action.payload };
            // After this return statement, I now have user's profile info
        };
    

    So my question is, how do I persist user's profile info so that next time user opens the app, they don't have to re-login? I've done some research, and this is what I have:

        // Use autoRehydrate and persistStore in 'redux-persist'
        // In store file
        import { createStore, compose, applyMiddleware } from 'redux';
        import thunk from 'redux-thunk';
        import { autoRehydrate, persistStore } from 'redux-persist';
        import { AsyncStorage } from 'react-native';
        import reducers from '../reducers';
    
        const store = createStore(
          reducers,
          {},
          compose(
            applyMiddleware(thunk),
            autoRehydrate()
          )
        );
    
        persistStore(store, { storage: AsyncStorage, whitelist: ['auth'] });
    
        export default store;
    

    And of course, I did handle REHYDRATE case in my auth_reducer file. But still, it's true that after user reopens the app, I have the user info from last time that user used the app, how can I use this piece of information to continue modify my data in firebase database?

    For example, if user reopens the app, and wishes to change his name, how does firebase know this is an authorized user? How to write this changeName function?