title: Vue + Pinia + Firebase Authentication: Fetch currentUser before Route Guard
body: <p>Recently I started to use Pinia as a global store for my Vue 3 Project. I use Firebase for the user authentication and am trying to load the current user before Vue is initialized. Ideally everything auth related should be in a single file with a Pinia Store. Unfortunately (unlike Vuex) the Pinia instance needs to be passed to the Vue instance <strong>before</strong> I can use any action and I believe that is the problem. On first load the <code>user</code> object in the store is empty for a short moment.</p>
  <p>This is the store action that is binding the user (using the new Firebase Web v9 Beta) in <code>auth.js</code></p>
  <pre class="lang-js prettyprint-override"><code>import { defineStore } from &quot;pinia&quot;;
  import { firebaseApp } from &quot;@/services/firebase&quot;;
  import {
    getAuth,
    onAuthStateChanged,
    getIdTokenResult,
  } from &quot;firebase/auth&quot;;
  
  const auth = getAuth(firebaseApp);
  
  export const useAuth = defineStore({
    id: &quot;auth&quot;,
    state() {
      return {
        user: {},
        token: {},
      };
    },
    actions: {
      bindUser() {
        return new Promise((resolve, reject) =&gt; {
          onAuthStateChanged(
            auth,
            async (user) =&gt; {
              this.user = user;
              if (user) this.token = await getIdTokenResult(user);
              resolve();
            },
            reject()
          );
        });
      },
  // ...
  }})
  </code></pre>
  <p>and this is my <code>main.js</code> file</p>
  <pre class="lang-js prettyprint-override"><code>import { createApp } from &quot;vue&quot;;
  import App from &quot;./App.vue&quot;;
  import router from &quot;./router&quot;;
  import { createPinia } from &quot;pinia&quot;;
  import { useAuth } from &quot;@/store/auth&quot;;
  
  (async () =&gt; {
    const app = createApp(App).use(router).use(createPinia());
    const auth = useAuth();
    auth.bindUser();
    app.mount(&quot;#app&quot;);
  })();
  </code></pre>
  <p>How can I set the user before anything else happens?</p>