why firebase authentication is slow?

Question

I am building a login page in my React app using firebase (sign in with google redirect the user method) and it is working but it takes almost two seconds for firebase to get the current user, which is not the best for UX. here is the code

componentDidMount(){
    console.log(Date.now());
    const auth = getAuth();
    this.authListener = onAuthStateChanged(auth, (user) => {
      if (user) {
        // User is signed in
        console.log(Date.now());
        this.props.dispatch(addUserAction(user.email))
      } 
      else {
        // User is signed out
        this.props.dispatch(addUserAction(null))
      }
    });  
  }
 

what i get in my console is that the difference of time is 1768 milliseconds which is almost 2 seconds, am i doing something wrong ? the console is showing the difference of time as 2 seconds

Answer 1

When you restart the app/reload the page, Firebase automatically restores the user's authentication state based on the information it stored in local storage when the user first signed in. For this it does make a call to the server though, to check whether the credentials are still valid - and for example to ensure the account hasn't been disabled. It's likely that this call is what is taking time in your use-case.

A common trick is to make your own determination on whether the server-check is likely to succeed based on only client-side information. For this, store an extra value in local storage when the user signs in successfully, say isAuthenticated. Now when you reload the page/app, you an read this value from local storage, and then the user was previously authenticated, assume that they will be authenticated again.

The assumption may be wrong of course, so you'll have to handle that scenario too in your code.

Also see this talk Architecting Mobile Web Apps, where Michael Bleigh talks about the technique.