feat(nuxt): split plugins and check options ot add them

Author: posva

packages/nuxt/src/module.ts

@@ -15,6 +15,7 @@ import type {
   ServiceAccount,
   App as FirebaseAdminApp,
 } from 'firebase-admin/app'
+import { markRaw } from 'vue'
 import type { NuxtVueFireAppCheckOptions } from './runtime/app-check'
 
 export interface VueFireNuxtModuleOptions {
@@ -94,9 +95,10 @@ const VueFire: NuxtModule<VueFireNuxtModuleOptions> =
         new URL('../templates', import.meta.url)
       )
 
+      // TODO: I don't think the appConfig is the right place to store these as it makes things reactive
       // Let plugins and the user access the firebase config within the app
-      nuxt.options.appConfig.firebaseConfig = options.config
-      nuxt.options.appConfig.vuefireOptions = options
+      nuxt.options.appConfig.firebaseConfig = markRaw(options.config)
+      nuxt.options.appConfig.vuefireOptions = markRaw(options)
 
       // nuxt.options.build.transpile.push(templatesDir)
       nuxt.options.build.transpile.push(runtimeDir)
@@ -114,7 +116,7 @@ const VueFire: NuxtModule<VueFireNuxtModuleOptions> =
               '[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
+          nuxt.options.appConfig.firebaseAdmin = markRaw(options.admin)
         }
       }
 
@@ -127,11 +129,24 @@ const VueFire: NuxtModule<VueFireNuxtModuleOptions> =
 
       // this allows us to the order of the plugins
       nuxt.hook('modules:done', () => {
-        addPlugin(resolve(runtimeDir, 'auth/plugin.client'))
-        // must be added after the admin module to use the admin app
-        addPlugin(resolve(runtimeDir, 'auth/plugin.server'))
+        if (options.auth) {
+          addPlugin(resolve(runtimeDir, 'auth/plugin.client'))
+          // must be added after the admin module to use the admin app
+          addPlugin(resolve(runtimeDir, 'auth/plugin.server'))
+        }
 
-        addPlugin(resolve(runtimeDir, 'admin/plugin.server'))
+        if (options.admin) {
+          if (!nuxt.options.ssr) {
+            console.warn(
+              '[VueFire]: The "admin" option is only used during SSR. You should reenable ssr to use it.'
+            )
+          }
+          addPlugin(resolve(runtimeDir, 'admin/plugin.server'))
+        }
+
+        if (options.appCheck) {
+          addPlugin(resolve(runtimeDir, 'app-check/plugin'))
+        }
 
         // plugin are added in reverse order
         addPluginTemplate({
@@ -142,6 +157,8 @@ const VueFire: NuxtModule<VueFireNuxtModuleOptions> =
             ssr: nuxt.options.ssr,
           },
         })
+
+        // adds the firebase app to each application
         addPlugin(resolve(runtimeDir, 'app/plugin'))
       })
     },
@@ -158,6 +175,7 @@ declare module '@nuxt/schema' {
   export interface AppConfig {
     /**
      * Firebase config to initialize the app.
+     * @internal
      */
     firebaseConfig: FirebaseOptions
 
@@ -169,6 +187,7 @@ declare module '@nuxt/schema' {
 
     /**
      * Firebase Admin options passed to VueFire module. Only available on the server.
+     * @internal
      */
     firebaseAdmin?: {
       config: Omit<AppOptions, 'credential'>

packages/nuxt/src/runtime/app-check/plugin.ts

@@ -0,0 +1,40 @@
+import type { FirebaseApp } from 'firebase/app'
+import {
+  ReCaptchaV3Provider,
+  ReCaptchaEnterpriseProvider,
+  CustomProvider,
+  AppCheckOptions,
+} from 'firebase/app-check'
+import { VueFireAppCheck } from 'vuefire'
+import { defineNuxtPlugin, useAppConfig } from '#app'
+
+/**
+ * Plugin to initialize the appCheck module.
+ */
+export default defineNuxtPlugin((nuxtApp) => {
+  const appConfig = useAppConfig()
+  // NOTE: appCheck is present because of the check in module.ts
+  const options = appConfig.vuefireOptions.appCheck!
+  const firebaseApp = nuxtApp.$firebaseApp as FirebaseApp
+
+  // default provider for server
+  let provider: AppCheckOptions['provider'] = new CustomProvider({
+    getToken: () =>
+      Promise.reject(
+        process.env.NODE_ENV !== 'production'
+          ? new Error("[VueFire]: This shouldn't be called on server.")
+          : new Error('app-check/invalid-provider')
+      ),
+  })
+
+  if (options.provider === 'ReCaptchaV3') {
+    provider = new ReCaptchaV3Provider(options.key)
+  } else if (options.provider === 'ReCaptchaEnterprise') {
+    provider = new ReCaptchaEnterpriseProvider(options.key)
+  }
+
+  VueFireAppCheck({
+    ...options,
+    provider,
+  })(firebaseApp, nuxtApp.vueApp)
+})

packages/nuxt/src/runtime/app/plugin.ts

@@ -4,7 +4,6 @@ import { defineNuxtPlugin, useAppConfig } from '#app'
 /**
  * Initializes the app and provides it to others.
  */
-
 export default defineNuxtPlugin(() => {
   const appConfig = useAppConfig()
 

packages/nuxt/templates/plugin.ejs

@@ -1,17 +1,10 @@
 import {
-  usePendingPromises,
   VueFire,
-
   useSSRInitialState,
-
-  // TODO: conditional imports
-  VueFireAppCheck,
 } from 'vuefire'
-import { initializeApp } from 'firebase/app'
 import {
   defineNuxtPlugin,
   useAppConfig,
-  useRuntimeConfig,
 } from '#app'
 import {
   connectFirestoreEmulator,
@@ -40,30 +33,8 @@ export default defineNuxtPlugin((nuxtApp) => {
   // connectFirestoreEmulator(getFirestore(firebaseApp), 'localhost', 8080)
   // connectDatabaseEmulator(getDatabase(firebaseApp), 'localhost', 8081)
 
-  const modules = []
-
-  <% if(options.auth) { %>
-  // modules.push(VueFireAuth())
-  <% } %>
-
-  <% if(options.appCheck) { %>
-  modules.push(VueFireAppCheck({
-    ...appConfig.vuefireOptions.appCheck,
-    provider: '<%= options.appCheck.provider %>' === 'ReCaptchaV3'
-      ? new ReCaptchaV3Provider('<%= options.appCheck.key %>')
-      : new CustomProvider({
-        getToken: () => Promise.reject(
-          process.env.NODE_ENV !== 'production'
-            ? new Error('Unknown provider "<%= options.appCheck.provider %>"')
-            : new Error()
-          ),
-      }),
-  }))
-  <% } %>
-
   nuxtApp.vueApp.use(VueFire, {
     firebaseApp,
-    modules,
   })
 
   <% if(options.ssr) { %>