Search code examples
javascriptfirebasevue.jsgoogle-cloud-platformfirebase-authentication

displayName always returns null after creating account

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:

enter image description here

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!

Solution

  • 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);
    });