Facing a little issue in regards to user registration. Everything works fine except this one detail where I have to reload the page after user registration or else their data will not render. I am displaying the username on the Navbar once they log in/register so this is not ideal.

Here is my App.vue:

<template>
  <router-view />
</template>

<script setup>
import { onMounted } from "vue";
import { useAuthStore } from "stores/auth";

const storeAuth = useAuthStore();

onMounted(() => {
  storeAuth.init();
});
</script>

Here is my init() function in the auth Store:

init() {
      onAuthStateChanged(auth, (user) => {
        if (user) {
          this.user.id = user.uid;
          this.user.email = user.email;
          this.user.displayName = user.displayName;
        } else {
          this.user = {};
        }
      });

and in the Registration Form component, this is the function that triggers when clicking SUBMIT:

\\ Triggering Firebase registration and opening a confirmation modal if successful.

const onSubmit = () => {
  storeAuth.registerUser(credentials);
  registered.value = true;
};

\\When the user clicks OK in the confirmation modal he/she is redirected to their profile page

function redirectUser() {
  const id = auth.currentUser.uid;
  router.push({ name: "user", params: { id } });
}

and finally, this is the registerUser method in the auth Store:

registerUser(credentials) {
      createUserWithEmailAndPassword(
        auth,
        credentials.email,
        credentials.password
      )
        .then((userCredential) => {
          console.log(userCredential);
          const user = userCredential.user;
          updateProfile(auth.currentUser, {
            displayName: credentials.displayName,
          });
          setDoc(doc(db, "users", auth.currentUser.uid), {
            displayName: credentials.displayName,
            email: credentials.email,
            countryCode: credentials.countryCode,
            phoneNumber: ` ${credentials.countryCode.value}${credentials.phoneNumber}`,
            userType: "Persona",
            uid: auth.currentUser.uid,
          });
        })
        .catch((error) => {
          console.log("error.message: ", error.message);
        });
    }

Any pointers would be greatly appreciated. Basically I want to avoid having to refresh the page for the displayName to appear in the NavBar.

CodePudding user response：

The default value of user.diplayName name is null. Although you are using updateProfile() to set a value, but you are not handling the promises correctly. First, try refactoring the code as shown below:

// async function
async registerUser(credentials) {
  const { user } = await createUserWithEmailAndPassword(auth, credentials.email, credentials.password)

  await updateProfile(user, {
    displayName: credentials.displayName
  });

  await setDoc(doc(db, "users", auth.currentUser.uid), {
    displayName: credentials.displayName,
    email: credentials.email,
    countryCode: credentials.countryCode,
    phoneNumber: ` ${credentials.countryCode.value}${credentials.phoneNumber}`,
    userType: "Persona",
    uid: auth.currentUser.uid,
  });
}

The profile may not update right away. You can use reload() to reload current user's data.

// add this after updateProfile()
await reload(user); 

You are updating the state from inside of onAuthStateChanged() that'll trigger right after user is signed in. It'll be best to update the displayName in state manually in case of registration after updateProfile().