fix(auth): avoid race conditions

From https://github.com/firebase/firebase-js-sdk/blob/master/packages/auth/src/platform_browser/index.ts#L91

Author: posva

packages/nuxt/src/runtime/auth/plugin.client.ts

@@ -1,5 +1,10 @@
 import type { FirebaseError, FirebaseApp } from 'firebase/app'
-import { getAuth, onIdTokenChanged } from 'firebase/auth'
+import {
+  getAuth,
+  onIdTokenChanged,
+  beforeAuthStateChanged,
+  User,
+} from 'firebase/auth'
 import { VueFireAuth } from 'vuefire'
 import { defineNuxtPlugin, showError } from '#app'
 
@@ -13,15 +18,27 @@ export default defineNuxtPlugin((nuxtApp) => {
   VueFireAuth(nuxtApp.payload.vuefireUser)(firebaseApp, nuxtApp.vueApp)
   const auth = getAuth(firebaseApp)
   // send a post request to the server when auth state changes to mint a cookie
-  onIdTokenChanged(auth, async (user) => {
-    const jwtToken = await user?.getIdToken()
-    $fetch('/api/_vuefire/auth', {
-      method: 'POST',
-      // if the token is undefined, the server will delete the cookie
-      body: { token: jwtToken },
-    }).catch((reason: FirebaseError) => {
-      // there is no need to return a rejected error as `onIdTokenChanged` won't use it
-      showError(reason)
-    })
+  beforeAuthStateChanged(auth, mintCookie, () => {
+    // rollback the auth state
+    mintCookie(auth.currentUser)
   })
+
+  // we need both callback to avoid some race conditions
+  onIdTokenChanged(auth, mintCookie)
 })
+
+/**
+ * Sends a post request to the server to mint a cookie based auth session. The name of the cookie is defined in the
+ * api.session.ts file.
+ *
+ * @param user - the user to mint a cookie for
+ */
+async function mintCookie(user: User | null) {
+  const jwtToken = await user?.getIdToken()
+  // throws if the server returns an error so that beforeAuthStateChanged can catch it to cancel
+  await $fetch('/api/_vuefire/auth', {
+    method: 'POST',
+    // if the token is undefined, the server will delete the cookie
+    body: { token: jwtToken },
+  })
+}