Currently facing an issue with registering users in my Vue app. When a user registers, I need to trigger the updateProfile function to add more user data. However, the problem arises when the onAuthStateChanged function in my main.js is executed before the updateProfile function, leading to undefined values for displayName and photoURL in Vuex. How can I ensure that the onAuthStateChanged waits for the updateProfile to finish?
In my Register.vue component, I have the following function:
register() {
firebase
.auth()
.createUserWithEmailAndPassword(this.email, this.password)
.then(user => {
firebase
.auth()
.currentUser.updateProfile({
displayName: this.displayName,
photoURL: this.photoURL
})
.then(() => {
db.collection("users")
.doc(user.user.uid)
.set({
email: this.email,
displayName: this.displayName,
realName: this.realName,
photoURL: this.photoURL
})
.then(() => {
console.log(user);
this.$router.replace("/");
})
.catch(err => {
this.errorMessage = err.message;
});
})
.catch(err => {
this.errorMessage = err.message;
});
})
.catch(function(error) {
// Handle Errors here.
var errorCode = error.code;
var errorMessage = error.message;
if (errorCode == "auth/weak-password") {
alert("The password is too weak.");
} else {
alert(errorMessage);
}
console.log(error);
});
}
}
And in my main.js:
let app = "";
firebase.auth().onAuthStateChanged((user) => {
store.dispatch("fetchUser", user);
if (!app) {
new Vue({
router,
store,
render: (h) => h(App),
}).$mount("#app");
}
});