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

ponentDidMount(){
    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

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

ponentDidMount(){
    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

• javascript
• reactjs
• firebase-authentication

• FYI performance.now() is a better fit for metrics – Phil Commented Sep 28, 2021 at 7:09
• Thanks, i am still sure it is taking way more than it should – Amr Hesham Commented Sep 28, 2021 at 7:29
• Because it IS slow and for this reason you should avoid using it. Build your own authentication, like I did and you'll discover how significantly faster it is. – Johann Commented Jan 14, 2022 at 7:35

1 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 mon 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.