feat(nuxt): handle user context on the server and use LRU cache for apps

Author: posva

packages/nuxt/package.json

@@ -31,7 +31,8 @@
     "dev:prepare": "nuxt-module-build --stub"
   },
   "dependencies": {
-    "@nuxt/kit": "^3.0.0"
+    "@nuxt/kit": "^3.0.0",
+    "lru-cache": "^7.14.1"
   },
   "peerDependencies": {
     "@firebase/app-types": ">=0.8.1",

packages/nuxt/playground/middleware/vuefire-auth.ts

@@ -1,12 +1,8 @@
 import { getCurrentUser } from 'vuefire'
 export default defineNuxtRouteMiddleware(async (to, from) => {
   const app = useNuxtApp().$firebaseApp
-  // TODO: handle
-  if (process.server) {
-    return
-  }
+  console.log('app name', app.name)
   const user = await getCurrentUser(app.name)
-  console.log('user', user)
 
   if (!user) {
     return navigateTo('/authentication')

packages/nuxt/playground/pages/firestore-secure-doc.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { doc } from 'firebase/firestore'
+import { doc, setDoc } from 'firebase/firestore'
 import { useCurrentUser, useFirestore, usePendingPromises } from 'vuefire'
 
 definePageMeta({
@@ -8,10 +8,16 @@ definePageMeta({
 
 const db = useFirestore()
 const user = useCurrentUser()
-console.log(user.value?.uid)
 const secretRef = computed(() => user.value ? doc(db, 'secrets', user.value.uid) : null)
 
 const secret = useDocument(secretRef)
+
+const textSecret = ref('')
+function setSecret() {
+  if (secretRef.value) {
+    setDoc(secretRef.value, { text: textSecret.value })
+  }
+}
 </script>
 
 <template>
@@ -21,7 +27,14 @@ const secret = useDocument(secretRef)
     </p>
     <template v-else>
       <p>Secret Data for user {{ user.displayName }} ({{ user.uid }})</p>
-      <pre>{{ secret }}</pre>
+      <pre v-if="secret">{{ secret }}</pre>
+      <div v-else>
+        <p>You have no secret. Do you want to create one?</p>
+        <form @submit.prevent="setSecret()">
+          <input v-model="textSecret" type="text">
+          <button>Set the secret</button>
+        </form>
+      </div>
     </template>
   </div>
 </template>

packages/nuxt/src/module.ts

@@ -143,20 +143,12 @@ const VueFire: NuxtModule<VueFireNuxtModuleOptions> =
         ])
       }
 
-      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'))
+        addPlugin(resolve(runtimeDir, 'app-check/plugin.client'))
+        addPlugin(resolve(runtimeDir, 'app-check/plugin.server'))
       }
 
-      // plugin are added in reverse order
+      // this adds the VueFire plugin and handle SSR state serialization and hydration
       addPluginTemplate({
         src: normalize(resolve(templatesDir, 'plugin.ejs')),
 
@@ -167,7 +159,22 @@ const VueFire: NuxtModule<VueFireNuxtModuleOptions> =
       })
 
       // adds the firebase app to each application
-      addPlugin(resolve(runtimeDir, 'app/plugin'))
+      addPlugin(resolve(runtimeDir, 'app/plugin.client'))
+      addPlugin(resolve(runtimeDir, 'app/plugin.server'))
+
+      // we start the admin app first so we can have access to the user uid everywhere
+      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.'
+          )
+        }
+        // this plugin adds the user so it's accessible directly in the app as well
+        if (options.auth) {
+          addPlugin(resolve(runtimeDir, 'admin/plugin-auth-user.server'))
+        }
+        addPlugin(resolve(runtimeDir, 'admin/plugin.server'))
+      }
 
       addVueFireImports([
         // app
@@ -186,6 +193,7 @@ const VueFire: NuxtModule<VueFireNuxtModuleOptions> =
     },
   })
 
+// just to have autocomplete and errors
 type VueFireModuleExportKeys = keyof Awaited<typeof import('vuefire')>
 function addVueFireImports(
   imports: Array<{
@@ -231,12 +239,12 @@ declare module '@nuxt/schema' {
 declare module '#app' {
   interface NuxtApp {
     $firebaseApp: FirebaseApp
-    $adminApp: FirebaseAdminApp
+    $firebaseAdminApp: FirebaseAdminApp
   }
 }
 declare module '@vue/runtime-core' {
   interface ComponentCustomProperties {
     $firebaseApp: FirebaseApp
-    $adminApp: FirebaseAdminApp
+    $firebaseAdminApp: FirebaseAdminApp
   }
 }

packages/nuxt/src/runtime/admin/plugin-auth-user.server.ts

@@ -0,0 +1,53 @@
+import type { App as AdminApp } from 'firebase-admin/app'
+import type { User } from 'firebase/auth'
+import { getAuth as getAdminAuth, UserRecord } from 'firebase-admin/auth'
+import { createServerUser } from 'vuefire/server'
+import { getCookie } from 'h3'
+// FirebaseError is an interface here but is a class in firebase/app
+import type { FirebaseError } from 'firebase-admin'
+import { AUTH_COOKIE_NAME } from '../auth/api.session'
+import { defineNuxtPlugin, useRequestEvent } from '#app'
+
+/**
+ * Check if there is a cookie and if it is valid, extracts the user from it.
+ */
+export default defineNuxtPlugin(async (nuxtApp) => {
+  const event = useRequestEvent()
+  const token = getCookie(event, AUTH_COOKIE_NAME)
+  let user: UserRecord | undefined
+
+  if (token) {
+    const adminApp = nuxtApp.$firebaseAdminApp as AdminApp
+    const auth = getAdminAuth(adminApp)
+
+    try {
+      // TODO: should we check for the revoked status of the token here?
+      const decodedToken = await auth.verifyIdToken(token)
+      user = await auth.getUser(decodedToken.uid)
+    } catch (err) {
+      // TODO: some errors should probably go higher
+      // ignore the error and consider the user as not logged in
+      if (isFirebaseError(err) && err.code === 'auth/id-token-expired') {
+        // the error is fine, the user is not logged in
+      } else {
+        // ignore the error and consider the user as not logged in
+        console.error(err)
+      }
+    }
+  }
+
+  nuxtApp.payload.vuefireUser = user?.toJSON()
+
+  // @ts-expect-error: We cannot provide with a Symbol in nuxt and it cannot be typed
+  nuxtApp[UserSymbol] = createServerUser(user)
+})
+
+/**
+ * Gets access to the user within the application. This is a symbol to keep it private for the moment.
+ * @internal
+ */
+export const UserSymbol = Symbol('user')
+
+function isFirebaseError(err: any): err is FirebaseError {
+  return err != null && 'code' in err
+}

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

@@ -1,20 +1,17 @@
 import { initializeApp, cert, getApp, getApps } from 'firebase-admin/app'
-import { VueFireAppCheckServer } from 'vuefire/server'
 import type { FirebaseApp } from '@firebase/app-types'
 import { defineNuxtPlugin, useAppConfig } from '#app'
 
 export default defineNuxtPlugin((nuxtApp) => {
   const appConfig = useAppConfig()
 
-  const { firebaseConfig, firebaseAdmin, vuefireOptions } = appConfig
+  const { firebaseAdmin } = appConfig
 
   // the admin sdk is not always needed, skip if not provided
   if (!firebaseAdmin?.config) {
     return
   }
 
-  const firebaseApp = nuxtApp.$firebaseApp as FirebaseApp
-
   // only initialize the admin sdk once
   if (!getApps().length) {
     // this is specified when deployed on Firebase and automatically picks up the credentials from env variables
@@ -29,21 +26,11 @@ export default defineNuxtPlugin((nuxtApp) => {
     }
   }
 
-  const adminApp = getApp()
-  if (vuefireOptions.appCheck) {
-    // 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, firebaseApp)
-  }
+  const firebaseAdminApp = getApp()
 
   return {
     provide: {
-      adminApp,
+      firebaseAdminApp,
     },
   }
 })

packages/nuxt/src/runtime/app-check/plugin.ts renamed to packages/nuxt/src/runtime/app-check/plugin.client.ts

@@ -9,20 +9,21 @@ import { VueFireAppCheck } from 'vuefire'
 import { defineNuxtPlugin, useAppConfig } from '#app'
 
 /**
- * Plugin to initialize the appCheck module.
+ * Plugin to initialize the appCheck module. Must be added before the server version. TODO: verify it changes anything.
  */
 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
+  // Add a default provider for production
+  // TODO: make this a dev only warning
   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(`[VueFire]: Unknown Provider "${options.provider}".`)
           : new Error('app-check/invalid-provider')
       ),
   })

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

@@ -0,0 +1,40 @@
+import type { App as FirebaseAdminApp } from 'firebase-admin/app'
+import { VueFireAppCheck } from 'vuefire'
+import { VueFireAppCheckServer } from 'vuefire/server'
+import type { FirebaseApp } from '@firebase/app-types'
+import { CustomProvider } from 'firebase/app-check'
+import { defineNuxtPlugin, useAppConfig } from '#app'
+
+/**
+ * Makes AppCheck work on the server. This requires SSR and the admin SDK to be available
+ */
+export default defineNuxtPlugin((nuxtApp) => {
+  const firebaseApp = nuxtApp.$firebaseApp as FirebaseApp
+  const adminApp = nuxtApp.$firebaseAdminApp as FirebaseAdminApp
+
+  // 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.'
+    )
+  }
+
+  const appConfig = useAppConfig()
+  const options = appConfig.vuefireOptions.appCheck!
+
+  VueFireAppCheckServer(adminApp, firebaseApp)
+
+  // This will fail if used in the server
+  const provider = new CustomProvider({
+    getToken: () =>
+      Promise.reject(
+        new Error("[VueFire]: This shouldn't be called on server.")
+      ),
+  })
+
+  // injects the empty token symbol
+  VueFireAppCheck({
+    ...options,
+    provider,
+  })(firebaseApp, nuxtApp.vueApp)
+})

packages/nuxt/src/runtime/app/plugin.ts renamed to packages/nuxt/src/runtime/app/plugin.client.ts

@@ -0,0 +1,53 @@
+import { deleteApp, FirebaseApp, initializeApp } from 'firebase/app'
+import { User } from 'firebase/auth'
+import LRU from 'lru-cache'
+import { UserSymbol } from '../admin/plugin-auth-user.server'
+import { defineNuxtPlugin, useAppConfig } from '#app'
+
+// TODO: allow customizing
+// TODO: find sensible defaults
+export const LRU_MAX_INSTANCES = 100
+export const LRU_TTL = 1_000 * 60 * 5
+const appCache = new LRU<string, FirebaseApp>({
+  max: LRU_MAX_INSTANCES,
+  ttl: LRU_TTL,
+  allowStale: true,
+  updateAgeOnGet: true,
+  dispose: (value) => {
+    deleteApp(value)
+  },
+})
+
+/**
+ * Initializes the app and provides it to others.
+ */
+export default defineNuxtPlugin(async (nuxtApp) => {
+  const appConfig = useAppConfig()
+
+  // @ts-expect-error: this is a private symbol
+  const user = nuxtApp[UserSymbol] as User | undefined | null
+  const uid = user?.uid
+
+  let firebaseApp: FirebaseApp
+
+  if (uid) {
+    if (!appCache.has(uid)) {
+      const randomId = Math.random().toString(36).slice(2)
+      const appName = `auth:${user.uid}:${randomId}`
+
+      console.log('✅ creating new app', appName)
+
+      appCache.set(uid, initializeApp(appConfig.firebaseConfig, appName))
+    }
+    firebaseApp = appCache.get(uid)!
+  } else {
+    // anonymous session, just create a new app
+    firebaseApp = initializeApp(appConfig.firebaseConfig)
+  }
+
+  return {
+    provide: {
+      firebaseApp,
+    },
+  }
+})