I have a Vue project that utilizes Firebase as the backend. User registration is done using email and password. Below is the method used in Firebase:
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 an onAuthStateChanged method set up 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 gets triggered upon user registration. The issue I'm facing is that when a user is registered, the displayName property of the user appears to be null for some reason. It only gets a value after refreshing the page. Strangely, I can access the email immediately but not the displayName. Here is a screenshot from my console:
https://i.sstatic.net/RdUQW.png
The first part shows the "console.log("user", user)" followed by other print statements. In the user object, you can see that displayName has a value, yet calling user.displayName returns null.
Could someone please explain why this behavior is occurring? Thank you in advance!