fix(ssr): appcheck force app

Author: posva

Diff for: packages/nuxt/playground/nuxt.config.ts

@@ -14,8 +14,11 @@ export default defineNuxtConfig({
 
   alias: {
     // import the dev version directly
-    vuefire: fileURLToPath(new URL('../../../src/index.ts', import.meta.url)),
+    'vuefire/server': fileURLToPath(
+      new URL('../../../src/server/index.ts', import.meta.url)
+    ),
     'vuefire/*': fileURLToPath(new URL('../../../src/*', import.meta.url)),
+    vuefire: fileURLToPath(new URL('../../../src/index.ts', import.meta.url)),
   },
 
   modules: [
@@ -45,12 +48,7 @@ export default defineNuxtConfig({
         admin: {
           config: {},
           serviceAccount: resolve(
-            fileURLToPath(
-              new URL(
-                './vue-fire-store-firebase-adminsdk.json',
-                import.meta.url
-              )
-            )
+            fileURLToPath(new URL('./service-account.json', import.meta.url))
           ),
         },
       },

Diff for: packages/nuxt/src/module.ts

@@ -105,20 +105,20 @@ const VueFire: NuxtModule<VueFireNuxtModuleOptions> =
           }
           nuxt.options.appConfig.firebaseAdmin = options.admin
         }
-
-        addPlugin(resolve(runtimeDir, '2.admin-plugin.server'))
       }
 
       nuxt.hook('modules:done', () => {
-        // addPlugin(resolve(runtimeDir, 'plugin'))
-
+        // plugin are added in reverse order
         addPluginTemplate({
           src: normalize(resolve(templatesDir, 'plugin.ejs')),
 
           options: {
             ...options,
+            ssr: nuxt.options.ssr,
           },
         })
+        addPlugin(resolve(runtimeDir, 'plugins/admin.server'))
+        addPlugin(resolve(runtimeDir, 'plugins/app'))
       })
     },
   })

Diff for: packages/nuxt/src/runtime/plugin.ts

@@ -1,6 +1,7 @@
 import admin from 'firebase-admin'
 import { VueFireAppCheckServer } from 'vuefire/server'
 import { config } from 'firebase-functions'
+import type { FirebaseApp } from '@firebase/app-types'
 import { defineNuxtPlugin, useAppConfig } from '#app'
 
 export default defineNuxtPlugin((nuxtApp) => {
@@ -13,28 +14,34 @@ export default defineNuxtPlugin((nuxtApp) => {
     return
   }
 
+  const firebaseApp = nuxtApp.$firebaseApp as FirebaseApp
+
   // only initialize the admin sdk once
   if (!admin.apps.length) {
     const adminApp = admin.initializeApp({
       ...firebaseAdmin.config,
       credential:
+        // when deployed we get direct access to the config
         process.env.NODE_ENV === 'production'
-          ? // when deployed we get direct access to the config
-            config().firebase
+          ? config().firebase
           : admin.credential.cert(firebaseAdmin.serviceAccount),
     })
 
     if (vuefireOptions.appCheck) {
-      if (!firebaseConfig.appId) {
+      // NOTE: necessary in VueFireAppCheckServer
+      if (!firebaseApp.options.appId) {
         throw new Error(
           '[VueFire]: Missing "appId" in firebase config. This is necessary to use the app-check module on the server.'
         )
       }
-      VueFireAppCheckServer(adminApp, firebaseConfig.appId)
+
+      VueFireAppCheckServer(adminApp, firebaseApp)
     }
   }
 
   return {
-    adminApp: admin.app(),
+    provide: {
+      adminApp: admin.app(),
+    },
   }
 })

Diff for: packages/nuxt/src/runtime/2.admin-plugin.server.ts renamed to packages/nuxt/src/runtime/plugins/admin.server.ts

@@ -0,0 +1,18 @@
+import { initializeApp } from 'firebase/app'
+import { defineNuxtPlugin, useAppConfig } from '#app'
+
+/**
+ * Initializes the app and provides it to others.
+ */
+
+export default defineNuxtPlugin(() => {
+  const appConfig = useAppConfig()
+
+  const firebaseApp = initializeApp(appConfig.firebaseConfig)
+
+  return {
+    provide: {
+      firebaseApp,
+    },
+  }
+})

Diff for: packages/nuxt/src/runtime/plugins/app.ts

@@ -33,40 +33,44 @@ import {
 
 export default defineNuxtPlugin((nuxtApp) => {
   const appConfig = useAppConfig()
-  const firebaseConfig = toRaw(appConfig).firebaseConfig
 
-  const firebaseApp = initializeApp(firebaseConfig)
+  const firebaseApp = nuxtApp.$firebaseApp
 
   // TODO: emulator option
   // connectFirestoreEmulator(getFirestore(firebaseApp), 'localhost', 8080)
   // connectDatabaseEmulator(getDatabase(firebaseApp), 'localhost', 8081)
 
+  const modules = []
+
+  <% if(options.auth) { %>
+  // Auth
+  <% } %>
+
+  <% if(options.appCheck) { %>
+  if (process.client) {
+    modules.push(VueFireAppCheck({
+      ...appConfig.vuefireOptions.appCheck,
+      provider: '<%= options.appCheck.provider %>' === 'ReCaptchaV3'
+        ? new ReCaptchaV3Provider('<%= options.appCheck.key %>')
+        : new CustomProvider({
+          getToken: () => Promise.resolve({ token: '', expireTimeMillis: 1 })
+        }),
+    }))
+  }
+  <% } %>
+
   nuxtApp.vueApp.use(VueFire, {
     firebaseApp,
-    modules: [
-    <% if(options.auth) { %>
-      // Auth
-    <% } %>
-    <% if(options.appCheck) { %>
-      VueFireAppCheck({
-        ...appConfig.vuefireOptions.appCheck,
-        provider: process.isClient
-          ? new ReCaptchaV3Provider('<%= options.appCheck.key %>')
-          : new CustomProvider({
-            getToken: () => Promise.resolve({ token: '', expireTimeMillis: 1 })
-          }),
-      }),
-    <% } %>
-    ],
+    modules,
   })
 
+  <% if(options.ssr) { %>
   if (process.server) {
-    // TODO: pass the firebaseApp
+    // collect the initial state
     nuxtApp.payload.vuefire = useSSRInitialState(undefined, firebaseApp)
   } else if (nuxtApp.payload?.vuefire) {
     // hydrate the plugin state from nuxtApp.payload.vuefire
     useSSRInitialState(nuxtApp.payload.vuefire, firebaseApp)
   }
-
-  return {}
+  <% } %>
 })

Diff for: packages/nuxt/templates/plugin.ejs

@@ -1,30 +1,32 @@
 import type { app } from 'firebase-admin'
+import type { FirebaseApp } from 'firebase/app'
 import { CustomProvider, initializeAppCheck } from 'firebase/app-check'
 
 /**
  * Adds AppCheck using the Firebase Admin SDK. This is necessary on the Server if you have configured AppCheck on the
  * client.
  *
  * @param adminApp - firebase-admin app
- * @param appId - appId option passed to firebase/app initializeApp()
+ * @param firebaseApp - firebase/app initializeApp()
  * @param param2 options
  */
 export function VueFireAppCheckServer(
   adminApp: app.App,
-  appId: string,
+  firebaseApp: FirebaseApp,
   {
     // default to 1 week
     ttlMillis = 604_800_000,
   }: {
     ttlMillis?: number
   } = {}
 ) {
-  initializeAppCheck(undefined, {
+  initializeAppCheck(firebaseApp, {
     provider: new CustomProvider({
       getToken: () =>
         adminApp
           .appCheck()
-          .createToken(appId, { ttlMillis })
+          // NOTE: appId is checked on the server plugin
+          .createToken(firebaseApp.options.appId!, { ttlMillis })
           .then(({ token, ttlMillis: expireTimeMillis }) => ({
             token,
             expireTimeMillis,