auth.currentUser shows undefined on HomePage

Question

I have a file where I have written all the firebase related functions, including this one here

function CurrentUser(){
console.log("auth", auth)
return auth.currentUser }

When I log auth.currentUser inside the function above, I can see details of currently logged in user but when I call this function on React homepage, I see it being undefined. Also I could see the homepage logs as expected if I make any changes like adding let i=1 in the above function. Wasn't able to figure out what's going on here. Any help would be appreciated.

Code for the call. This is to be on the homepage.

const Home() = () =>{
let userName = Firebase.CurrentUser();
console.log("userName", userName);
}

Output for when I log in to the app:

Output when I add something like a new variable to any of the above functions:

Answer 1

It looks like auth has a value, but auth.currentUser doesn't. That is actually very common when you're just loading the app/page, as refreshing the user credentials requires a call to the server and takes time.

If you want your app to respond to those change, implement onAuthStateChanged as shown in the first snippet in the documentation on getting the current user.