如何在不请求的情况下在firebase-auth中首次加载时获取currentUser

Question

I'm using firebase authentication, and my navbar is depend on if user is logged in or not. When i load the website, if user not logged out before, he should still stay as logged in.But, Firebase onAuthStateChanged listener returns user after 100-300ms, so my navbar can't decide if user is logged in or not.So, navbar shows login and signup button for 300ms, then firebase returns user, and navbar shows dashboard and logout button.

I'm using vue, I've tried saving UID and username on localstorage, but i'm concerning about security. what if someone manually changed localstorage data? Also, user may logged out, but stay logged in my manually setting localStorage.setItem('user', ....)

Navbar.vue

<div v-if="user.uid" class="flex row space-b">
   // userpic, photo, logout button
</div>
<div v-else>
   // login and signup button 
</div>

vuex

state: {
user: {
  uid: null,
  photoURL: null,
  username: null,
},
},

I tried not to mount Vue instance until onAuthStateChanged listener returns something, but this can't be a good solution, hence i'm rendering website nearly 300ms late.

Answer 1

Anyway, i saved it in cookie. when website loads, if cookie is exists i render navbar as if user logged in, and then double check after firebase listener returns

Answer 2

This is caused because beforeEach is getting executed before firebase has fully finished initialization.

You can use onAuthStateChanged observer to make sure the vue app is initialized only after the firebase is fully initialized.

One way to fix it is to wrap the vue initialization code in main.js(new Vue(... )) with onAuthStateChanged like this:

let app;

const auth = getAuth();
onAuthStateChanged(auth, (user) => {
  console.log("user", user);
  if (!app) {
    new Vue({
      router,
      vuetify: new Vuetify(options.Vuetify),
      render: (h) => h(App),
    }).$mount("#app");
  }
});

for version 7 firebase you can check this repo file https://github.com/ErikCH/FirebaseTokenFrontend/blob/master/src/main.js