feat(nuxt): support admin-sdk appcheck

Author: posva

packages/nuxt/playground/nuxt.config.ts

@@ -1,6 +1,5 @@
 import { fileURLToPath } from 'node:url'
 import { resolve } from 'node:path'
-import VueFire from 'nuxt-vuefire'
 
 // we need the root node modules where packages are hoisted
 const nodeModules = fileURLToPath(
@@ -15,6 +14,9 @@ export default defineNuxtConfig({
 
   alias: {
     // import the dev version directly
+    'vuefire/server': fileURLToPath(
+      new URL('../../../src/server/index.ts', import.meta.url)
+    ),
     vuefire: fileURLToPath(new URL('../../../src/index.ts', import.meta.url)),
   },
 
@@ -41,6 +43,18 @@ export default defineNuxtConfig({
           appId: '1:998674887640:web:1e2bb2cc3e5eb2fc3478ad',
           measurementId: 'G-RL4BTWXKJ7',
         },
+
+        admin: {
+          config: {},
+          serviceAccount: resolve(
+            fileURLToPath(
+              new URL(
+                './vue-fire-store-firebase-adminsdk.json',
+                import.meta.url
+              )
+            )
+          ),
+        },
       },
     ],
   ],

packages/nuxt/src/module.ts

@@ -8,6 +8,7 @@ import {
 } from '@nuxt/kit'
 import type { NuxtModule } from '@nuxt/schema'
 import type { FirebaseOptions } from '@firebase/app-types'
+import type { AppOptions, ServiceAccount } from 'firebase-admin'
 import type { NuxtVueFireAppCheckOptions } from './app-check'
 
 export interface VueFireNuxtModuleOptions {
@@ -18,15 +19,36 @@ export interface VueFireNuxtModuleOptions {
    */
   optionsApiPlugin?: boolean | 'firestore' | 'database'
 
+  /**
+   * Firebase Options passed to `firebase/app`'s `initializeApp()`.
+   */
   config?: FirebaseOptions
 
+  /**
+   * Firebase Admin Options.
+   */
+  admin?: {
+    /**
+     * Firebase Admin Options passed to `firebase-admin`'s `initializeApp()`. Required if you are using the auth, or the
+     * app-check module.
+     */
+    config: Omit<AppOptions, 'credential'>
+
+    /**
+     * Firebase Admin Service Account passed to `firebase-admin`'s `initializeApp()`. Required if you are adding an adminConfig
+     */
+    serviceAccount: string | ServiceAccount
+  }
+
   /**
    * Optional name passed to `firebase.initializeApp(config, name)`
    */
-  appName?: string
+  // TODO: is this useful?
+  // appName?: string
 
   /**
-   * Enables AppCheck
+   * Enables AppCheck on the client and server. Note you only need to pass the options for the client, on the server,
+   * the configuration will be handled automatically.
    */
   appCheck?: NuxtVueFireAppCheckOptions
 
@@ -67,11 +89,25 @@ const VueFire: NuxtModule<VueFireNuxtModuleOptions> =
 
       // Let plugins and the user access the firebase config within the app
       nuxt.options.appConfig.firebaseConfig = options.config
-      nuxt.options.appConfig.appCheck = options.appCheck
+      nuxt.options.appConfig.vuefireOptions = options
 
       // nuxt.options.build.transpile.push(templatesDir)
       nuxt.options.build.transpile.push(runtimeDir)
 
+      if (nuxt.options.ssr && options.admin) {
+        // check the provided config is valid
+        if (options.auth || options.appCheck) {
+          if (!options.admin.config || !options.admin.serviceAccount) {
+            throw new Error(
+              '[VueFire]: Missing firebase "admin" config. Provide an "admin" option to the VueFire module options. This is necessary to use the auth or app-check module.'
+            )
+          }
+          nuxt.options.appConfig.firebaseAdmin = options.admin
+        }
+
+        addPlugin(resolve(runtimeDir, '2.admin-plugin.server.ts'))
+      }
+
       nuxt.hook('modules:done', () => {
         // addPlugin(resolve(runtimeDir, 'plugin'))
 
@@ -101,8 +137,17 @@ declare module '@nuxt/schema' {
     firebaseConfig: FirebaseOptions
 
     /**
-     * AppCheck options passed to VueFire module.
+     * VueFireNuxt options used within plugins.
+     * @internal
+     */
+    vuefireOptions: Pick<VueFireNuxtModuleOptions, 'appCheck' | 'auth'>
+
+    /**
+     * Firebase Admin options passed to VueFire module. Only available on the server.
      */
-    appCheck?: NuxtVueFireAppCheckOptions
+    firebaseAdmin?: {
+      config: Omit<AppOptions, 'credential'>
+      serviceAccount: string | ServiceAccount
+    }
   }
 }

packages/nuxt/src/runtime/2.admin-plugin.server.ts

@@ -0,0 +1,35 @@
+import admin from 'firebase-admin'
+import { VueFireAppCheckServer } from 'vuefire/server'
+import { defineNuxtPlugin, useAppConfig } from '#app'
+
+export default defineNuxtPlugin((nuxtApp) => {
+  const appConfig = useAppConfig()
+
+  const { firebaseConfig, firebaseAdmin, vuefireOptions } = appConfig
+
+  // the admin sdk is not always needed
+  if (!firebaseAdmin?.config) {
+    return
+  }
+
+  // only initialize the admin sdk once
+  if (!admin.apps.length) {
+    const adminApp = admin.initializeApp({
+      ...firebaseAdmin.config,
+      credential: admin.credential.cert(firebaseAdmin.serviceAccount),
+    })
+
+    if (vuefireOptions.appCheck) {
+      if (!firebaseConfig.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)
+    }
+  }
+
+  return {
+    adminApp: admin.app(),
+  }
+})

packages/nuxt/templates/plugin.ejs

@@ -37,8 +37,6 @@ export default defineNuxtPlugin((nuxtApp) => {
 
   const firebaseApp = initializeApp(firebaseConfig)
 
-  console.log('appcheck debug', appConfig.appCheck.debug)
-
   // TODO: emulator option
   // connectFirestoreEmulator(getFirestore(firebaseApp), 'localhost', 8080)
   // connectDatabaseEmulator(getDatabase(firebaseApp), 'localhost', 8081)
@@ -51,9 +49,12 @@ export default defineNuxtPlugin((nuxtApp) => {
     <% } %>
     <% if(options.appCheck) { %>
       VueFireAppCheck({
-        debug: <%= options.appCheck.debug %>,
-        isTokenAutoRefreshEnabled: <%= options.appCheck.isTokenAutoRefreshEnabled %>,
-        provider: new ReCaptchaV3Provider('<%= options.appCheck.key %>'),
+        ...appConfig.vuefireOptions.appCheck,
+        provider: process.isClient
+          ? new ReCaptchaV3Provider('<%= options.appCheck.key %>')
+          : new CustomProvider({
+            getToken: () => Promise.resolve({ token: '', expireTimeMillis: 1 })
+          }),
       }),
     <% } %>
     ],

src/app-check/index.ts

@@ -12,7 +12,7 @@ export const AppCheckTokenInjectSymbol: InjectionKey<Ref<string | undefined>> =
   Symbol('app-check-token')
 
 /**
- * The current app-check token as a `Ref`. Note this is undefined on the server.
+ * The current app-check token as a `Ref`. Note this ref is always undefined on the server.
  */
 export function useAppCheckToken() {
   return inject(AppCheckTokenInjectSymbol)!
@@ -47,7 +47,7 @@ export function VueFireAppCheck(options: VueFireAppCheckOptions) {
     const token = getGlobalScope(firebaseApp, app).run(() => ref<string>())!
     app.provide(AppCheckTokenInjectSymbol, token)
 
-    // AppCheck is client only as it relies on browser apis
+    // AppCheck requires special treatment on the server
     if (!isClient) return
 
     if (options.debug) {