refactor(nuxt): better options and wip app check

Author: posva

packages/nuxt/playground/nuxt.config.ts

@@ -21,11 +21,16 @@ export default defineNuxtConfig({
   modules: [
     //
     [
-      VueFire,
+      '../src/module.ts',
       {
-        services: {
-          auth: true,
+        auth: true,
+        appCheck: {
+          debug: process.env.NODE_ENV !== 'production',
+          isTokenAutoRefreshEnabled: true,
+          provider: 'RecaptchaV3',
+          key: '6LfJ0vgiAAAAAHheQE7GQVdG_c9m8xipBESx_SKI',
         },
+
         config: {
           apiKey: 'AIzaSyAkUKe36TPWL2eZTshgk-Xl4bY_R5SB97U',
           authDomain: 'vue-fire-store.firebaseapp.com',

packages/nuxt/playground/pages/database/todos.vue

@@ -1,13 +1,15 @@
 <script setup lang="ts">
-const todos = []
+const todos = ref<{ title: string, id: string }[]>([])
 </script>
 
 <template>
   <div>
     <h1>Todos</h1>
     <ul>
       <li v-for="todo in todos" :key="todo.id">
-        <NuxtLink :to="`/database/todos/${todo.id}`">{{ todo.title }}</NuxtLink>
+        <NuxtLink :to="`/database/todos/${todo.id}`">
+          {{ todo.title }}
+        </NuxtLink>
       </li>
     </ul>
   </div>

packages/nuxt/playground/pages/index.vue

@@ -1,15 +1,4 @@
-<script lang="ts">
-import {} from 'firebase/firestore'
-// import { listAll, ref as storageRef } from 'firebase/storage'
-// import { useFirebaseApp, useStorage } from 'vuefire'
-
-console.log('initializing pages/index.vue')
-// console.log('firebaseApp', !!useFirebaseApp())
-
-// listAll(storageRef(useStorage(), 'demo')).then((data) => {
-//   console.log('data', data)
-// })
-</script>
+<script lang="ts"></script>
 
 <template>
   <div>

packages/nuxt/src/app-check/index.ts

@@ -0,0 +1,27 @@
+import type { VueFireAppCheckOptions } from 'vuefire'
+
+/**
+ * @internal
+ */
+export interface _NuxtVueFireAppCheckOptionsBase
+  extends Omit<VueFireAppCheckOptions, 'provider'> {
+  provider: 'ReCaptchaV3' | 'ReCaptchaEnterprise' | 'Custom'
+}
+
+export interface NuxtVueFireAppCheckOptionsReCaptchaV3
+  extends _NuxtVueFireAppCheckOptionsBase {
+  provider: 'ReCaptchaV3'
+  key: string
+}
+
+export interface NuxtVueFireAppCheckOptionsReCaptchaEnterprise
+  extends _NuxtVueFireAppCheckOptionsBase {
+  provider: 'ReCaptchaEnterprise'
+  key: string
+}
+
+// TODO: Custom provider
+
+export type NuxtVueFireAppCheckOptions =
+  | NuxtVueFireAppCheckOptionsReCaptchaV3
+  | NuxtVueFireAppCheckOptionsReCaptchaEnterprise

packages/nuxt/src/module.ts

@@ -7,7 +7,8 @@ import {
   defineNuxtModule,
 } from '@nuxt/kit'
 import type { NuxtModule } from '@nuxt/schema'
-import { type FirebaseOptions } from '@firebase/app-types'
+import type { FirebaseOptions } from '@firebase/app-types'
+import type { NuxtVueFireAppCheckOptions } from './app-check'
 
 export interface VueFireNuxtModuleOptions {
   /**
@@ -17,19 +18,22 @@ export interface VueFireNuxtModuleOptions {
    */
   optionsApiPlugin?: boolean | 'firestore' | 'database'
 
-  config: FirebaseOptions
+  config?: FirebaseOptions
 
   /**
    * Optional name passed to `firebase.initializeApp(config, name)`
    */
   appName?: string
 
-  services?: {
-    auth?: boolean
-    firestore?: boolean
-    database?: boolean
-    storage?: boolean
-  }
+  /**
+   * Enables AppCheck
+   */
+  appCheck?: NuxtVueFireAppCheckOptions
+
+  /**
+   * Enables Authentication
+   */
+  auth?: boolean
 }
 
 // Manual to avoid build error
@@ -45,11 +49,16 @@ const VueFire: NuxtModule<VueFireNuxtModuleOptions> =
 
     defaults: {
       optionsApiPlugin: false,
-      config: {},
-      services: {},
     },
 
     setup(options, nuxt) {
+      // ensure provided options are valid
+      if (!options.config) {
+        throw new Error(
+          '[VueFire]: Missing firebase config. Provide a "config" option to the VueFire module options.'
+        )
+      }
+
       const { resolve } = createResolver(import.meta.url)
       const runtimeDir = fileURLToPath(new URL('./runtime', import.meta.url))
       const templatesDir = fileURLToPath(
@@ -58,12 +67,7 @@ const VueFire: NuxtModule<VueFireNuxtModuleOptions> =
 
       // Let plugins and the user access the firebase config within the app
       nuxt.options.appConfig.firebaseConfig = options.config
-
-      if (Object.keys(options.config).length === 0) {
-        throw new Error(
-          '[VueFire]: Missing firebase config. Provide it to the VueFire module options.'
-        )
-      }
+      nuxt.options.appConfig.appCheck = options.appCheck
 
       // nuxt.options.build.transpile.push(templatesDir)
       nuxt.options.build.transpile.push(runtimeDir)
@@ -83,12 +87,22 @@ const VueFire: NuxtModule<VueFireNuxtModuleOptions> =
   })
 
 export default VueFire
+export type {
+  NuxtVueFireAppCheckOptions,
+  NuxtVueFireAppCheckOptionsReCaptchaV3,
+  NuxtVueFireAppCheckOptionsReCaptchaEnterprise,
+} from './app-check'
 
 declare module '@nuxt/schema' {
   export interface AppConfig {
     /**
      * Firebase config to initialize the app.
      */
     firebaseConfig: FirebaseOptions
+
+    /**
+     * AppCheck options passed to VueFire module.
+     */
+    appCheck?: NuxtVueFireAppCheckOptions
   }
 }

packages/nuxt/templates/plugin.ejs

@@ -1,4 +1,12 @@
-import { usePendingPromises, VueFire, useSSRInitialState } from 'vuefire'
+import {
+  usePendingPromises,
+  VueFire,
+
+  useSSRInitialState,
+
+  // TODO: conditional imports
+  VueFireAppCheck,
+} from 'vuefire'
 import { initializeApp } from 'firebase/app'
 import {
   defineNuxtPlugin,
@@ -16,22 +24,38 @@ getDatabase,
 import {
   toRaw,
 } from 'vue-demi'
+import {
+  // TODO: conditional imports
+  ReCaptchaV3Provider,
+  ReCaptchaEnterpriseProvider,
+  CustomProvider,
+} from 'firebase/app-check'
 
 export default defineNuxtPlugin((nuxtApp) => {
   const appConfig = useAppConfig()
   const firebaseConfig = toRaw(appConfig).firebaseConfig
 
   const firebaseApp = initializeApp(firebaseConfig)
 
+  console.log('appcheck debug', appConfig.appCheck.debug)
+
+  // TODO: emulator option
   // connectFirestoreEmulator(getFirestore(firebaseApp), 'localhost', 8080)
   // connectDatabaseEmulator(getDatabase(firebaseApp), 'localhost', 8081)
 
   nuxtApp.vueApp.use(VueFire, {
     firebaseApp,
-    services: [
-    <% if(options.services.auth) { %>
+    modules: [
+    <% if(options.auth) { %>
       // Auth
     <% } %>
+    <% if(options.appCheck) { %>
+      VueFireAppCheck({
+        debug: <%= options.appCheck.debug %>,
+        isTokenAutoRefreshEnabled: <%= options.appCheck.isTokenAutoRefreshEnabled %>,
+        provider: new ReCaptchaV3Provider('<%= options.appCheck.key %>'),
+      }),
+    <% } %>
     ],
   })