displayName from firebase returns null untill I refresh the app one time

Question

I'm running a react native project, and I with Firebase as my database. I made a sign up page that grabs an Email, username and password from the user. I used the SignUpWithEmailAndPassword function, after that I use the update profile and add the username input as the displayName value over here:

firebase
        .auth()
        .createUserWithEmailAndPassword(email, password)
        .then((res) => {
          console.log(res);
          firebase.firestore().collection("users").add({
            email: email,
            username: username,
            password: password,
          });
          firebase.auth().currentUser.updateProfile({
            displayName: username,
            photoURL: "",
          });
          console.log(firebase.auth().currentUser.displayName);

Now the display name gets saved, but it doesn't update it's value until I refresh one time. So the console.log returns a null instead of the display name after the user submits his info. What's the problem here?

createUserWithEmailAndPassword returns a promise and you’re console logging while the promise is pending, try using async/await — Jad Alhamwi
Jad Alhamwi, how do I do that? the function is in an arrow function, do I change the arrow function to an async function? — Zzz Zzz
As follows : async () => { ‘body’}, and add the await in the body for the promise — Jad Alhamwi

JustinMartinDev JustinMartinDev · Accepted Answer · 2021-04-20T10:01:34

As Jad Alhamwi said it's problem of async/await

The updateProfil method return Promise,so you have to wait the resolution of this before display the displayName.

https://firebase.google.com/docs/reference/js/firebase.User#updateprofile

firebase
        .auth()
        .createUserWithEmailAndPassword(email, password)
        .then(async (res) => {
          console.log(res);
         
         firebase.firestore().collection("users").add({
            email: email,
            username: username,
            password: password,
          });
          
          await firebase.auth().currentUser.updateProfile({
            displayName: username,
            photoURL: "",
          });
          
          console.log(firebase.auth().currentUser.displayName);
        })

displayName from firebase returns null untill I refresh the app one time

1 Answers