Once user is signed and i refresh the page, there is a slight delay in showing user info. Log in button appears for a sec and then it displays user profile. Below is my code in my user.js pinia store.

export const useUserStore = defineStore("user", {
    state: () => ({
        userData: {},
        loadingUser: false,
        loading: false,
    }),
    actions: {
        currentUser() {
            return new Promise((resolve, reject) => {
                const unsubcribe = onAuthStateChanged(
                    auth,
                    (user) => {
                        if (user) {
                            this.userData = {
                                email: user.email,
                                uid: user.uid,
                            };
                        }
                        resolve(user);
                    },
                    (e) => reject(e)
                );
                unsubcribe();
            });
        },
        async registerUser(email, password) {
            this.loadingUser = true;
            try {
                const { user } = await createUserWithEmailAndPassword(
                    auth,
                    email,
                    password
                );
                this.userData = { email: user.email, uid: user.uid };
                router.push("/");
            } catch (error) {
                console.log(error);
                this.userData = {};
            } finally {
                this.loadingUser = false;
            }
        },
        async loginUser(email, password) {
            this.loadingUser = true;
            try {
                const { user } = await signInWithEmailAndPassword(
                    auth,
                    email,
                    password
                );
                this.userData = { email: user.email, uid: user.uid };
                router.push("/");
            } catch (error) {
                console.log(error);
                this.userData = {};
            } finally {
                this.loadingUser = false;
            }
        },
            async signOutUser() {
            this.loading = true;
            try {
                await signOut(auth);
            } catch (error) {
                console.log(error);
            } finally {
                this.userData = {};
                this.loading = false;
                router.replace("/authentication");   
            }
        },
        async googleSignIn() {
            this.loadingUser = true;
            try {
              const provider = new GoogleAuthProvider();
              const result = await signInWithPopup(auth, provider)
              const credential = GoogleAuthProvider.credentialFromResult(result);
              const token = credential.accessToken;
              console.log(credential)
              this.userData = {};
              router.push("/");
            } catch (error) {
              console.log(error)
              this.userData = {};
            }
             finally {
             this.loadingUser = false;
            }
          },    
          async ResetPassword(email) {
            this.loading = true;
            try {
                await sendPasswordResetEmail(auth, email);
                // alert("Password reset link sent!");
                router.push("/authentication");
            } catch (error) {
                console.log(error);
            } finally {
                this.userData = {};
                this.loading = false;
               
            }
        }
    },   
});

my app.vue displays the current user with the below.

const userStore = useUserStore();

onMounted (() => {
    userStore.currentUser()
})

and then i use v-if to display the login button before authentication and user profile once user is authenticated. However, once user is authenticated and i refresh the page, i can see the login button for 1 second before it changes to the user profile. code for my navbar is below. I am using firebase for authentication, pinia for state management.

<div v-if="!userStore.userData.email">Login</div>
<div v-if="userStore.userData.email">User Profile</div>

CodePudding user response：

Once user is authenticated and i refresh the page, I can see the login button for 1 second before it changes to the user profile.

As explained in the documentation, when using onAuthStateChanged() to set an observer on the Auth object, this object may be in "an intermediate state—such as initialization". This is why we use to check that the user object is not null with if (user) {...}.

It's up to you to manage this intermediate state in your front-end by , for example, showing a spinner if user is null and showing the user's data when the user object is not null anymore.