Firebase React returns undefined on firebase.currentUser.displayName after refreshing page

Question

I'm creating a new account in Signup.tsx and redirecting to the dashboard after success, this way

try {
            await auth.createUserWithEmailAndPassword(
              emailRef.current!.value,
              passwordRef.current!.value,
            );
            const user = firebase.auth().currentUser;
            await user?.updateProfile({
              displayName: nameRef.current?.value
            })
             navigate('/dashboard')
          } catch (error) {
            console.error(error);
          }
        }

And google auth is managed this way, googleAuth.tsx

import { auth, provider } from "../../../firebaseSetup";
import { NavigateFunction, useNavigate } from "react-router-dom"


const GoogleAuth = async(navigate: NavigateFunction) => {
    auth.signInWithPopup(provider).then(() => {
      if (auth.currentUser?.metadata?.creationTime !== auth.currentUser?.metadata?.lastSignInTime)
          {
            navigate('/dashboard');
          }
          else{
            navigate('/welcome')
          }
    }).catch((error) => {
      console.log(error.message)
    })
}
export default GoogleAuth

And in my dashboard's navbar, I'm displaying the current user's display name and profile pic if logged in via google this way sidebar.tsx

import { auth } from "../../firebaseSetup";

export default sidebar(){
   const pic = auth.currentUser?.photoURL
   return(
      <Text>{auth.currentUser?.displayName}</Text>
      <Avatar size={'sm'} src={pic}/>
    )
}

All this works perfectly fine when users sign-in/up for the first time i.e that is when they are redirected from the landing page, but if the user refreshes or moves to another route, both text and avatar go blank. I tried printing using

console.log(auth.currentUser?.displayName)

It returns the correct name the first time, but on refreshing it prints undefined. I looked up and figured I need to be using useState and useEffect to manage current users, which I tried and failed. Can anyone tell me how do I retain the users name even on refreshing

Answer 1

That is the expected behavior. While Firebase automatically restores the user credentials when the page/app reloads, this requires it to call to the server (a.o. to check whether the account has been disabled) and that is an asynchronous call.

To get notified when the authentication state has been restored, you should use an auth state listener as shown in first example in the documentation on getting the current user:

firebase.auth().onAuthStateChanged((user) => {
  if (user) {
    // User is signed in, see docs for a list of available properties
    // https://firebase.google.com/docs/reference/js/firebase.User
    var uid = user.uid;
    // ...
  } else {
    // User is signed out
    // ...
  }
});

Once this callback gets called for the first time, the auth state has been restored or has failed to restore, so that is the perfect moment to navigate to the corresponding screen of your app.