title: Firebase Auth takes too long to reflect on the page
body: <p>I'm using firebase auth for a project to login the user using google.</p>
  <p>I have two buttons, Login and Logout with conditional rendering so that only one button shows depending on if there's a logged in user or not. Logout button functions okay, when clicked it signs out and switchs back to login button fast enough.</p>
  <p>But when i press the login and sign in with my google account. The signin button still appears and dont switch to signout for about 5 seconds which is too long regarding UX.</p>
  <p>How can I get rid of this problem, It was working fine but i remade the app and now it behaves like this.</p>
  <p><code>index.vue:</code></p>
  <pre class="lang-js prettyprint-override"><code>&lt;template&gt;
    &lt;div&gt;
      &lt;button @click=&quot;login&quot; v-if=&quot;!isUserLoggedIn&quot;&gt;
        Login
      &lt;/button&gt;
  
      &lt;button @click=&quot;logout&quot; v-else&gt;
        Logout
      &lt;/button&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  export default {
    computed: {
      isUserLoggedIn() {
        return this.$store.getters[&quot;isLoggedIn&quot;];
      },
    },
  
    methods: {
      async login() {
        var provider = new this.$fireModule.auth.GoogleAuthProvider();
        let authData = await this.$fire.auth.signInWithRedirect(provider);
      },
  
      async logout() {
        await this.$fire.auth.signOut();
      },
    },
  };
  &lt;/script&gt;
  </code></pre>
  <p>This is my store configuration</p>
  <p><code>store/state.js:</code></p>
  <pre class="lang-js prettyprint-override"><code>export default () =&gt; ({
    authUser: null
  })
  </code></pre>
  <p><code>store/actions.js:</code></p>
  <pre class="lang-js prettyprint-override"><code>export default {
    async nuxtServerInit({ dispatch }, { res }) {
      if (res &amp;&amp; res.locals &amp;&amp; res.locals.user) {
        const { allClaims: claims, ...authUser } = res.locals.user;
  
        await dispatch(&quot;onAuthStateChanged&quot;, {
          authUser,
          claims,
        });
      }
    },
  
    async onAuthStateChanged({ commit }, { authUser }) {
      if (!authUser) {
        commit(&quot;RESET_STORE&quot;);
        return;
      }
  
      if (authUser &amp;&amp; authUser.getIdToken) {
        try {
          const idToken = await authUser.getIdToken(true);
          commit(&quot;SET_AUTH_USER&quot;, { authUser, idToken });
        } catch (e) {
          console.error(e);
        }
      } else {
        commit(&quot;SET_AUTH_USER&quot;, { authUser, undefined });
      }
    },
  };
  </code></pre>
  <p><code>store/mutations.js:</code></p>
  <pre class="lang-js prettyprint-override"><code>import initialState from &quot;./state&quot;;
  
  export default {
    RESET_STORE: (state) =&gt; {
      Object.assign(state, initialState());
    },
  
    SET_AUTH_USER(state, { authUser, idToken }) {
      state.authUser = {
        displayName: authUser.displayName,
        photoURL: authUser.photoURL,
        email: authUser.email,
        id: authUser.uid,
        token: idToken,
      };
    },
  };
  </code></pre>
  <p><code>store/getters.js:</code></p>
  <pre class="lang-js prettyprint-override"><code>export default {
    isLoggedIn: (state) =&gt; {
      if (state.authUser === null) {
        return false;
      } else {
        return true;
      }
    },
  
    user: (state) =&gt; {
      if (state.authUser === null) {
        return null;
      } else {
        return state.authUser;
      }
    },
  };
  </code></pre>