feat(auth): allow customizing auth initialization

Close #1351

Author: posva

packages/nuxt/src/module.ts

@@ -70,6 +70,9 @@ export default defineNuxtModule<VueFireNuxtModuleOptions>({
       },
       auth: {
         enabled: isAuthEnabled,
+        errorMap: process.env.NODE_ENV !== 'production' ? 'debug' : 'prod',
+        persistence: ['indexedDBLocal', 'browserLocal'],
+        popupRedirectResolver: 'browser',
         ...(typeof _options.auth === 'object' ? _options.auth : {}),
       },
     } satisfies VueFireNuxtModuleOptionsResolved
@@ -199,23 +202,8 @@ export default defineNuxtModule<VueFireNuxtModuleOptions>({
         addPlugin(resolve(runtimeDir, 'auth/plugin-mint-cookie.client'))
       }
 
-      // hydrates the user if any
-      addPlugin(resolve(runtimeDir, 'auth/plugin.client'))
       // loads the user on the current app
       addPlugin(resolve(runtimeDir, 'auth/plugin.server'))
-
-      addVueFireImports([
-        // auth
-        { from: 'vuefire', name: 'useFirebaseAuth' },
-        { from: 'vuefire', name: 'useCurrentUser' },
-      ])
-      // these are improved for nuxt to avoid the need to pass the app name
-      addImports([
-        {
-          from: resolve(runtimeDir, 'auth/composables'),
-          name: 'getCurrentUser',
-        },
-      ])
     }
 
     // Emulators must be enabled after the app is initialized but before some APIs like auth.signinWithCustomToken() are called
@@ -243,6 +231,31 @@ export default defineNuxtModule<VueFireNuxtModuleOptions>({
       }
     }
 
+    // we must initialize auth before emulators
+    if (options.auth.enabled) {
+      // hydrates the user if any
+      addPluginTemplate({
+        src: normalize(resolve(runtimeDir, 'auth/plugin.client.ejs')),
+        options: {
+          ...options.auth,
+        },
+      })
+      addPlugin(resolve(runtimeDir, 'auth/plugin-base.server'))
+
+      addVueFireImports([
+        // auth
+        { from: 'vuefire', name: 'useFirebaseAuth' },
+        { from: 'vuefire', name: 'useCurrentUser' },
+      ])
+      // these are improved for nuxt to avoid the need to pass the app name
+      addImports([
+        {
+          from: resolve(runtimeDir, 'auth/composables'),
+          name: 'getCurrentUser',
+        },
+      ])
+    }
+
     // adds the firebase app to each application
     addPlugin(resolve(runtimeDir, 'app/plugin.client'))
     addPlugin(resolve(runtimeDir, 'app/plugin.server'))

packages/nuxt/src/module/options.ts

@@ -2,6 +2,26 @@ import type { FirebaseOptions } from 'firebase/app'
 import type { AppOptions } from 'firebase-admin'
 import type { NuxtVueFireAppCheckOptions } from '../runtime/app-check'
 
+export interface VueFireNuxtAuthDependencies {
+  /**
+   * Map of errors. Defaults to debug during dev and to prod during production. Should not be changed unless you know
+   * what you are doing.
+   */
+  errorMap?: 'debug' | 'prod' | false
+
+  /**
+   * The popup redirect resolver. Defaults to `browser`. Can be set to `false` to disable it.
+   */
+  popupRedirectResolver?: 'browser' | false
+
+  /**
+   * The persistence to use. Defaults to `['indexedDBLocal', 'browserLocal']`.
+   */
+  persistence?: Array<
+    'indexedDBLocal' | 'browserLocal' | 'browserSession' | 'inMemory'
+  >
+}
+
 export interface VueFireNuxtModuleOptions {
   /**
    * Should we add the `VueFireFirestoreOptionsAPI` and `VueFireRealtimeDatabaseOptionsAPI` modules?. Pass `true` to add
@@ -37,7 +57,7 @@ export interface VueFireNuxtModuleOptions {
    */
   auth?:
     | boolean
-    | {
+    | ({
         /**
          * Adds the Authentication module to VueFire.
          * @defaultValue `false`
@@ -52,7 +72,7 @@ export interface VueFireNuxtModuleOptions {
          * in Firebase docs: [Manage Session Cookies](https://firebase.google.com/docs/auth/admin/manage-cookies).
          */
         sessionCookie?: boolean
-      }
+      } & VueFireNuxtAuthDependencies)
 
   /**
    * Controls whether to use emulators or not. Pass `false` to disable emulators. When set to `true`, emulators are

packages/nuxt/src/runtime/auth/plugin-base.server.ts

@@ -0,0 +1,27 @@
+import type { FirebaseApp } from 'firebase/app'
+import { debugErrorMap, prodErrorMap, type User } from 'firebase/auth'
+import { _VueFireAuthInit } from 'vuefire'
+import { defineNuxtPlugin } from '#imports'
+
+/**
+ * Setups VueFireAuth for the client. This version creates some listeners that shouldn't be set on server.
+ */
+export default defineNuxtPlugin((nuxtApp) => {
+  const firebaseApp = nuxtApp.$firebaseApp as FirebaseApp
+
+  const [_user, auth] = _VueFireAuthInit(
+    firebaseApp,
+    nuxtApp.vueApp,
+    nuxtApp.payload.vuefireUser as User | undefined,
+    {
+      errorMap:
+        process.env.NODE_ENV === 'production' ? prodErrorMap : debugErrorMap,
+    }
+  )
+
+  return {
+    provide: {
+      firebaseAuth: auth,
+    },
+  }
+})

packages/nuxt/src/runtime/auth/plugin-mint-cookie.client.ts

@@ -1,9 +1,8 @@
-import type { FirebaseApp } from 'firebase/app'
 import {
-  getAuth,
   onIdTokenChanged,
   beforeAuthStateChanged,
   type User,
+  type Auth,
 } from 'firebase/auth'
 import { defineNuxtPlugin } from '#imports'
 
@@ -12,9 +11,8 @@ import { defineNuxtPlugin } from '#imports'
  * generate the proper auth state. **Must be added after the firebase auth plugin.**
  */
 export default defineNuxtPlugin((nuxtApp) => {
-  const firebaseApp = nuxtApp.$firebaseApp as FirebaseApp
+  const auth = nuxtApp.$firebaseAuth as Auth
 
-  const auth = getAuth(firebaseApp)
   // send a post request to the server when auth state changes to mint a cookie
   beforeAuthStateChanged(
     auth,

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

@@ -0,0 +1,52 @@
+import { VueFireAuthWithDependencies, _VueFireAuthKey } from 'vuefire'
+import { defineNuxtPlugin } from '#imports'
+import { inject } from 'vue'
+import {
+  <% if(options.persistence) { %>
+    <% options.persistence.forEach((persistenceName) => { %>
+      <%= persistenceName %>Persistence,
+    <% }) %>
+  <% } %>
+
+  <% if(options.popupRedirectResolver) { %>
+    <%= options.popupRedirectResolver %>PopupRedirectResolver,
+  <% } %>
+
+  <% if(options.errorMap) { %>
+    <%= options.errorMap %>ErrorMap,
+  <% } %>
+} from 'firebase/auth'
+
+/**
+ * Setups VueFireAuth for the client. This version creates some listeners that shouldn't be set on server.
+ */
+export default defineNuxtPlugin((nuxtApp) => {
+  const firebaseApp = nuxtApp.$firebaseApp
+
+  VueFireAuthWithDependencies({
+    initialUser: nuxtApp.payload.vuefireUser,
+    dependencies: {
+      <% if(options.errorMap) { %>
+        errorMap: <%= options.errorMap %>ErrorMap,
+      <% } %>
+
+      <% if(options.persistence) { %>
+        persistence: [
+        <% options.persistence.forEach((persistenceName) => { %>
+          <%= persistenceName %>Persistence,
+        <% }) %>
+        ],
+      <% } %>
+
+      <% if(options.popupRedirectResolver) { %>
+        popupRedirectResolver: <%= options.popupRedirectResolver %>PopupRedirectResolver,
+      <% } %>
+    },
+  })(firebaseApp, nuxtApp.vueApp)
+
+  return {
+    provide: {
+      firebaseAuth: nuxtApp.vueApp.runWithContext(() => inject(_VueFireAuthKey))
+    },
+  }
+})

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

@@ -1,4 +1,4 @@
-import { getAuth, signInWithCustomToken } from 'firebase/auth'
+import { signInWithCustomToken, getAuth, type Auth } from 'firebase/auth'
 import {
   type DecodedIdToken,
   getAuth as getAdminAuth,
@@ -18,7 +18,7 @@ export default defineNuxtPlugin(async (nuxtApp) => {
   const firebaseApp = nuxtApp.$firebaseApp as FirebaseApp
   const firebaseAdminApp = nuxtApp.$firebaseAdminApp as AdminApp
   const adminAuth = getAdminAuth(firebaseAdminApp)
-  const auth = getAuth(firebaseApp)
+  const auth = nuxtApp.$firebaseAuth as Auth
 
   const decodedToken = nuxtApp[
     // we cannot use a symbol to index
@@ -39,8 +39,8 @@ export default defineNuxtPlugin(async (nuxtApp) => {
         })
       // console.timeLog('token', `got token for ${user.uid}`)
       if (customToken) {
-        const auth = getAuth(firebaseApp)
         logger.debug('Signing in with custom token')
+        // TODO: allow user to handle error?
         await signInWithCustomToken(auth, customToken)
         // console.timeLog('token', `signed in with token for ${user.uid}`)
         // console.timeEnd('token')