I successfully check user's authentication state with onAuthStateChange observer and redirect user to the Dashboard page (react-native project). However, on the dashboard I already want to show some user specific data, e.g. enrolled programs/statistics. For that I need currentUser object to be initialised and populated, which takes some time (I need uid from there to get some data from Database). Thus, i'm looking for some way to wait until this process finishes successfully. What I'm trying to do it to use async/await syntax in ponentDidMount, but the result returned is null. (Same syntax successfully works in other screens, but fails in the first one)

async ponentDidMount() {
  try {
    let uid = await firebase.auth().currentUser.uid;
    console.log(uid);
  } catch(error) {
    console.log(error);
  }
}

What could be the best way to wait for currentUser object being loaded using async/await syntax? I believe that the reason could be that firebase returns null as the first result and then correct uid as the second one.

For now for the workaround, I'm using simple setInterval function, but I do not want to increase amount of loading time that much.

  let waitForCurrentUser = setInterval(() => {
    if ( firebase.auth().currentUser.uid !== null ) {
        clearInterval(waitForCurrentUser);
        let uid = firebase.auth().currentUser.uid;
        this.setState({uid});
        return firebase.auth().currentUser.uid;
    } else {
      console.log('Wait for it');
    }
  }, 700);

I successfully check user's authentication state with onAuthStateChange observer and redirect user to the Dashboard page (react-native project). However, on the dashboard I already want to show some user specific data, e.g. enrolled programs/statistics. For that I need currentUser object to be initialised and populated, which takes some time (I need uid from there to get some data from Database). Thus, i'm looking for some way to wait until this process finishes successfully. What I'm trying to do it to use async/await syntax in ponentDidMount, but the result returned is null. (Same syntax successfully works in other screens, but fails in the first one)

async ponentDidMount() {
  try {
    let uid = await firebase.auth().currentUser.uid;
    console.log(uid);
  } catch(error) {
    console.log(error);
  }
}

What could be the best way to wait for currentUser object being loaded using async/await syntax? I believe that the reason could be that firebase returns null as the first result and then correct uid as the second one.

For now for the workaround, I'm using simple setInterval function, but I do not want to increase amount of loading time that much.

  let waitForCurrentUser = setInterval(() => {
    if ( firebase.auth().currentUser.uid !== null ) {
        clearInterval(waitForCurrentUser);
        let uid = firebase.auth().currentUser.uid;
        this.setState({uid});
        return firebase.auth().currentUser.uid;
    } else {
      console.log('Wait for it');
    }
  }, 700);

• javascript
• firebase
• react-native
• firebase-realtime-database
• ecmascript-2017

Share Improve this question Follow edited May 8, 2017 at 17:15 Felix Kling 817k181181 gold badges1.1k1.1k silver badges1.2k1.2k bronze badges asked May 6, 2017 at 15:00 DenisDenis 30511 gold badge22 silver badges77 bronze badges

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 2

In Firebase v10, by utilizing the authStateReady method, which returns a promise, we can determine when the auth object is populated with the currentUser:

1. With promise.then() :

import { getAuth } from 'firebase/auth';

// In your ponent:
  useEffect(() => {
    const auth = getAuth();
    auth.authStateReady().then(() => {
      // Do whatever you want here ...

      // E.g. checking whether the user is logged in or not:
      setIsAuthReady(true);
      if (auth.currentUser) {
        setIsLoggedIn(true);
      }
      // End of E.g.

    });
  }, []);

2. With await promise :

Utilizing the await keyword is also an option, given that the response is a promise:

import { getAuth } from 'firebase/auth';

// In your ponent:
  useEffect(() => {
    const auth = getAuth();

    const checkAuthState = async () => {
      await auth.authStateReady();
      // Do whatever you want here ...

      // E.g. checking whether the user is logged in or not:
      setIsAuthReady(true);
      if (auth.currentUser) {
        setIsLoggedIn(true);
      }
      // End of E.g.
    };

    checkAuthState();
  }, []);

The equivalence of setInterval is :

//calling the asynchronous function
  waitForCurrentUser(function(uid){
   if(uid)
   console.log('the user id is',uid)
  })

   async waitForCurrentUser(userIdIs){

    try {
       let uid = await firebase.auth().currentUser.uid;
       if(uid)
       {
         clearInterval(waitForCurrentUser);        
         this.setState({uid});
         userIdIs(uid); 
       }
       else {
       console.log('Wait for it');
      }

    }

    catch(e){
     console.log(e)
    }

  //  return userIdIs(uid);//returns promise
  };

Cheers :)

export async function getAuthUserID(): Promise<string | undefined> {
  return await new Promise( (resolve, reject) => {
    firebase.auth().onIdTokenChanged(async (user) => {
      if (!user) {
        resolve(undefined);
      } else {
        resolve(user.uid);
      }
})
  }).then((uid: string | undefined)=>uid).catch(function(e) {
    throw (e);
  });
}

// sleep function
function sleep(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}

async function getCurrentUser() {
  while (!auth.currentUser)
    await sleep(100);
  return auth.currentUser;
}

getCurrentUser().then(console.log)

Explanation: wait until the currentUser attr is no longer "null" before returning it using the while loop and sleep function.

async getUid() {
        let user = await firebaseApp.auth().currentUser;
        let email = await user.uid;
}

Hope it's usefull for you