firebase.auth().currentUser is null at page load

Question

I successfully check the user's authentication state with onAuthStateChange observer and redirect the user to the profile page. However, I already want to show some user-specific data on the profile, (e.g. description). For that, I need the currentUser object to be initialized and populated, which takes some time (I need uid from there to get some data from firestore). Thus, I'm looking for some way to wait until this process finishes successfully. I'm trying to use async/await syntax on the profile page, but the result returned is null.

For now, I'm using local storage when I want to get the data to the next page.

What could be the best way to wait for the currentUser object to be loaded using async/await syntax? I believe that the reason could be that firebase returns null as the first result and then correct uid - after some auth functionality is loaded.

Please share the code that you think is not working as intended — Dharmaraj
– Dharmaraj, Commented Jul 5, 2021 at 17:52

Peter Mortensen · Accepted Answer · 2024-05-02 23:05:33Z

1

I created a dedicated hook in React to handle this:

import { useEffect, useState } from "react";
import { User } from "firebase/auth";
import { auth } from "../lib/firebase";

const useAuth = () => {
    const [user, setUser] = useState<User | null>(null);
    const [isLoading, setIsLoading] = useState(true);

    useEffect(() => {
        return auth.onAuthStateChanged(user => {
            setUser(user);
            setIsLoading(false);
        });
    }, []);

    return {
        user, isLoading
    };
}

export default useAuth;

edited May 2, 2024 at 23:05

Peter Mortensen

31.4k22 gold badges110 silver badges134 bronze badges

answered Nov 20, 2022 at 8:29

Damiano

112 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Community Over a year ago

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.

Frank van Puffelen · Accepted Answer · 2021-07-05 18:51:40Z

What you're describing is working as expected. If you want code to run only after the user's sign-in state has been restored, it needs to be inside an auth state change listener as shown in the first code snippet in the documentation on getting the currently signed in 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;
    // 👈 Your code that needs an active user goes here
  } else {
    // User is signed out
    // ...
  }
});

There is no way to use await here, as onAuthStateChanged doesn't return a promise, but instead fires each time the user's authentication state changes.

Collectives™ on Stack Overflow

firebase.auth().currentUser is null at page load

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related