displayName always returns null after creating account

Question

I have a Vue application that is using Firebase as a backend. New users are registered with email and password option. this is the firebase method:

firebase.auth()
          .createUserWithEmailAndPassword(this.user.email, this.user.password)
          .then((res) => {
            res.user
              .updateProfile({
                displayName: this.user.username,
              })
              .then(() => {
              });
          })
          .catch((error) => {
            this.error = error.message;
            console.log("err", error);
          });

in my main.js file I have onAuthStateChanged method that looks like this:

firebase.auth().onAuthStateChanged((user) => {
  if (user) {
    console.log("user", user);
    console.log("nme", user.displayName);
    console.log("email", user.email);
    store.dispatch("fetchUser", user);
  } else {
    store.dispatch("logout");
  }

This method is of course triggered when user is registered. The problem is that I cannot access the displayName property of user, for some reason its always null when user is registered. When I refresh the page, it has value but right after registering its null, and its passing the null value to Vuex, as username. The weird thing is that the email for example can be accessed right away. This is a screenshot from my console:

The first part is the "console.log("user", user) and then there are the other prints. As you can see in the user object, displayName has a value, but when I call user.displayName, its null.

Can someone explain me why this is happening? Thanks in advance!

And if you put a breakpoint in the debugger here, can you get user.displayName when you hit the breakpoint? — Kapcash

Renaud Tarnec Renaud Tarnec · Accepted Answer · 2020-10-03T14:21:06

This is because the updateProfile() method is asynchronous and does not trigger the listener set through onAuthStateChanged().

So when the onAuthStateChanged() listener is triggered right after the user is created (and signed in, because after the creation of the user account, the user is also signed in) the value of displayName is not yet updated.

You should probably update the State in your Vuex Store when the promise returned by the updateProfile() method is resolved.

Something along the following lines:

  firebase
    .auth()
    .createUserWithEmailAndPassword(this.user.email, this.user.password)
    .then((res) => {
      return res.user.updateProfile({
        displayName: this.user.username,
      });
    })
    .then(() => {
      //Update the Vuex Store here with firebase.auth().currentUser
      console.log(firebase.auth().currentUser.displayName);
    })
    .catch((error) => {
      this.error = error.message;
      console.log('err', error);
    });

displayName always returns null after creating account

1 Answers