firebase auth delayed on refresh

Question

Hard refreshes on my SPA React/Firebase application does not maintain auth state on immediate execution of a function. I have a workaround, but it\'s sketchy.

My react

Answer 1

Okay. So, I was able to solve this by utilizing the localStorage variable that firebase provides to store the user information.

function (nextState, replace) {
    if (!firebase.auth().currentUser) {
        let hasLocalStorageUser = false;
        for (let key in localStorage) {
            if (key.startsWith("firebase:authUser:")) {
                hasLocalStorageUser = true;
            }
        }
        if (!hasLocalStorageUser) {
            console.log('Attempting to access a secure route. Please authenticate first.');
            replace({
                pathname: '/login',
                state: { nextPathname: nextState.location.pathname }
            });
        }
    }
};

Answer 2

While this is a post related to ReactJS, I recently came across the same problem when writing my own authentication/authorisation service for AngularJS. On page refresh the onAuthStateChanged passes a user that is null because firebase is still initializing (asynchronously).

The only solution that worked for me was storing the users uid in localStorage after the user has logged in and deleting the value after the user has logged out.

Since i'm using a authService and userService seperately I registered a listener in the authService that is fired once the user is logged in/out.

Code sample authService (not the full authService):

var loginListeners = [];
var logoutListeners = [];

function addLoginListener(func) {
    loginListeners.push(func);
}

function addLogoutListener(func) {
    logoutListeners.push(func);
}

function login(email, password) {
    return firebase.auth().signInWithEmailAndPassword(email, password).then(function(user) {
        for(var i = 0; i < loginListeners.length; i++) {
            loginListeners[i](user); // call registered listeners for login
        }
    });
}

function logout() {
    return firebase.auth().signOut().then(function() {
        for(var i = 0; i < logoutListeners.length; i++) {
            logoutListeners[i](); // call registered listeners for logout
        }
    });
}

Code sample userService (not the full userService):

.provider('userService', ['authServiceProvider',
function UserService(authServiceProvider) {

var usersRefUrl = '/users';
var userInfo = null;
var userDetails = null;

// refreshHack auto-executed when this provider creates the service
var storageId = 'firebase:uid'; // storing uid local because onAuthStateChanged gives null (when async initializing firebase)
(function addRefreshHackListeners() {
    authServiceProvider.addLoginListener(function(user) {
        userInfo = user;
        localStorage.setItem(storageId, user.uid); // store the users uid after login so on refresh we have uid to retreive userDetails
    });
    authServiceProvider.addLogoutListener(function() {
        userInfo = null;
        localStorage.removeItem(storageId);
    });
    firebase.auth().onAuthStateChanged(function(user) {
        if(user) { // when not using refreshHack user is null until async initializing is done (and no uid is available).
            localStorage.setItem(storageId, user.uid);
            userInfo = user;
            resolveUserDetails();
        } else {
            localStorage.removeItem(storageId);
            userInfo = null;
            userDetails = null;
        }
    });
})();

function isLoggedIn() {
    return userInfo ? userInfo.uid : localStorage.getItem(storageId); // check localStorage for refreshHack
}

function resolveUserDetails() {
    var p = null;
    var uid = isLoggedIn();
    if(uid)
        p = firebase.database().ref(usersRefUrl + '/' + uid).once('value').then(function(snapshot) {
            userDetails = snapshot.val();
            return userDetails;
        }).catch(function(error) {
            userDetails = null;
        });

    return p; // resolve by returning a promise or null
}
}]);

And in a run-block you can globally register a user and resolve the user-info/details every route change (makes it more secure):

.run(['$rootScope', 'userService', 'authService',
function($rootScope, userService, authService) {

// make user available to $root in every view
$rootScope.user = userService.getUser();

$rootScope.$on('$routeChangeStart',
        function(event, next, current) {

    // make sure we can add resolvers for the next route
    if(next.$$route) {
        if(next.$$route.resolve == null)
            next.$$route.resolve = {};

        // resolve the current userDetails for every view
        var user = userService.resolveUserDetails();
        next.$$route.resolve.userDetails = function() {
            return user;
        }
    }
});
}]);

Maybe this can help someone who is struggling the same issue. Besides that feel free to optimize and discuss the code samples.

Answer 3

This worked for me try to wrap your main app in an if else statement depending on the state of firebase.auth .

 constructor() {
    super();
    this.state={
    user:{},
    stateChanged:false
    };
  } 
componentDidMount(){
fire.auth().onAuthStateChanged((user)=>{
      this.setState({stateChanged:true})
    });
}
render() { 
    if(this.state.stateChanged==false){
      return(
        <div>
          Loading
        </div>
      )
    }
else{
    
        return(<div>your code goes here...</div> )

}
}

Answer 4

Works by managing localStorage. Here is example how I do it.

  constructor(props) {
    super(props);

    let authUser = null;

    // setting auth from localstorage
    for (let key in localStorage) {
      if (key === storageId) {
        authUser = {};
        break;
      }
    }

    this.state = {authUser};
  }

  componentDidMount() {
    firebase
      .auth
      .onAuthStateChanged(authUser => {

        if (authUser) {
          localStorage.setItem(storageId, authUser.uid);
        } else {
          localStorage.removeItem(storageId);
        }

        // change state depending on listener
        authUser
          ? this.setState({authUser})
          : this.setState({authUser: null});
      });
  }