fix(ssr): create user only with auth activated

posva · posva · commit 078c3ac9563e · 2023-07-13T21:55:40.000+02:00
diff --git a/packages/nuxt/playground/preset/nitro.config.ts b/packages/nuxt/playground/preset/nitro.config.ts
@@ -16,17 +16,3 @@ export default {
 //     }
 //   }
 // }
-
-interface FirebaseUserAppConfig {
-  firebase?: {
-    functions?: {
-      runtimeOptions?: RuntimeOptions
-      httpsOptions?: HttpsOptions
-    }
-  }
-}
-
-declare module '@nuxt/schema' {
-  // interface AppConfig extends FirebaseUserAppConfig {}
-  interface RuntimeConfig extends FirebaseUserAppConfig {}
-}
diff --git a/packages/nuxt/src/module.ts b/packages/nuxt/src/module.ts
@@ -133,20 +133,45 @@ export default defineNuxtModule<VueFireNuxtModuleOptions>({
         )
       }
 
-      // Add the session handler than mints a cookie for the user
-      if (nuxt.options.ssr && hasServiceAccount) {
+      if (options.appCheck) {
+        addPlugin(resolve(runtimeDir, 'app-check/plugin.client'))
+        // TODO: ensure this is the only necessary check. Maybe we need to check if server
+        if (hasServiceAccount) {
+          addPlugin(resolve(runtimeDir, 'app-check/plugin.server'))
+        } else if (nuxt.options.ssr) {
+          log(
+            'warn',
+            'You activated both SSR and app-check but you are not providing an admin config. If you render or prerender any page using app-check, you will get an error. In that case, provide an admin config to the nuxt-vuefire module.'
+            // TODO: link about how to provide admin credentials
+          )
+        }
+      }
+
+      // this adds the VueFire plugin and handle SSR state serialization and hydration
+      addPluginTemplate({
+        src: normalize(resolve(templatesDir, 'plugin.ejs')),
+
+        options: {
+          ...options,
+          ssr: nuxt.options.ssr,
+        },
+      })
+
+      // if (nuxt.options.ssr && hasServiceAccount) {
+      if (options.auth) {
+        // Add the session handler than mints a cookie for the user
         addServerHandler({
           route: '/api/__session',
-          // handler: resolve(runtimeDir, './auth/api.session'),
           handler: resolve(runtimeDir, './auth/api.session-verification'),
         })
 
         // must be added after (which means before in code) the plugin module
         addPlugin(resolve(runtimeDir, 'auth/plugin-mint-cookie.client'))
       }
 
+      // hydrates the user if any
       addPlugin(resolve(runtimeDir, 'auth/plugin.client'))
-      // must be added after the admin module to use the admin app
+      // loads the user on the current app
       addPlugin(resolve(runtimeDir, 'auth/plugin.server'))
 
       addVueFireImports([
@@ -163,30 +188,6 @@ export default defineNuxtModule<VueFireNuxtModuleOptions>({
       ])
     }
 
-    if (options.appCheck) {
-      addPlugin(resolve(runtimeDir, 'app-check/plugin.client'))
-      // TODO: ensure this is the only necessary check. Maybe we need to check if server
-      if (hasServiceAccount) {
-        addPlugin(resolve(runtimeDir, 'app-check/plugin.server'))
-      } else if (nuxt.options.ssr) {
-        log(
-          'warn',
-          'You activated both SSR and app-check but you are not providing an admin config. If you render or prerender any page using app-check, you will get an error. In that case, provide an admin config to the nuxt-vuefire module.'
-          // TODO: link about how to provide admin credentials
-        )
-      }
-    }
-
-    // this adds the VueFire plugin and handle SSR state serialization and hydration
-    addPluginTemplate({
-      src: normalize(resolve(templatesDir, 'plugin.ejs')),
-
-      options: {
-        ...options,
-        ssr: nuxt.options.ssr,
-      },
-    })
-
     // adds the firebase app to each application
     addPlugin(resolve(runtimeDir, 'app/plugin.client'))
     addPlugin(resolve(runtimeDir, 'app/plugin.server'))
@@ -200,16 +201,18 @@ export default defineNuxtModule<VueFireNuxtModuleOptions>({
         )
       }
 
-      // TODO: remove this runtime config if it's not needed as it could include sensitive data
-      if (options.admin) {
-        nuxt.options.appConfig.firebaseAdmin = markRaw(options.admin)
-      }
-
+      // TODO: add with ssr
       if (hasServiceAccount) {
-        // 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'))
+          // decodes user token from cookie if any
+          addPlugin(resolve(runtimeDir, 'auth/plugin-user-token.server'))
+        }
+
+        if (options.admin?.options) {
+          // used by the admin app plugin to initialize the admin app
+          nuxt.options.runtimeConfig.vuefireAdminOptions = options.admin.options
         }
+        // injects firebaseAdminApp
         addPlugin(resolve(runtimeDir, 'admin/plugin.server'))
       }
     }
@@ -284,26 +287,32 @@ export type {
   NuxtVueFireAppCheckOptionsReCaptchaEnterprise,
 } from './runtime/app-check'
 
-declare module '@nuxt/schema' {
-  export interface AppConfig {
-    /**
-     * Firebase config to initialize the app.
-     * @internal
-     */
-    firebaseConfig: FirebaseOptions
+interface VueFireRuntimeConfig {
+  /**
+   * Firebase Admin options passed to VueFire module. Only available on the server.
+   *
+   * @internal
+   */
+  vuefireAdminOptions?: Omit<AppOptions, 'credential'>
+}
 
-    /**
-     * VueFireNuxt options used within plugins.
-     * @internal
-     */
-    vuefireOptions: Pick<VueFireNuxtModuleOptions, 'appCheck' | 'auth'>
+interface VueFireAppConfig {
+  /**
+   * Firebase config to initialize the app.
+   * @internal
+   */
+  firebaseConfig: FirebaseOptions
 
-    /**
-     * Firebase Admin options passed to VueFire module. Only available on the server.
-     * @internal
-     */
-    firebaseAdmin?: VueFireNuxtModuleOptions['admin']
-  }
+  /**
+   * VueFireNuxt options used within plugins.
+   * @internal
+   */
+  vuefireOptions: Pick<VueFireNuxtModuleOptions, 'appCheck' | 'auth'>
+}
+
+declare module '@nuxt/schema' {
+  export interface AppConfig extends VueFireAppConfig {}
+  export interface RuntimeConfig extends VueFireRuntimeConfig {}
 }
 
 // @ts-ignore: #app not found error when building
diff --git a/packages/nuxt/src/runtime/admin/plugin-auth-user.server.ts b/packages/nuxt/src/runtime/admin/plugin-auth-user.server.ts
diff --git a/packages/nuxt/src/runtime/admin/plugin.server.ts b/packages/nuxt/src/runtime/admin/plugin.server.ts
@@ -1,22 +1,12 @@
 import { App as AdminApp } from 'firebase-admin/app'
 import { getAdminApp } from 'vuefire/server'
-import {
-  defineNuxtPlugin,
-  useAppConfig,
-  useRequestEvent,
-  useRuntimeConfig,
-} from '#app'
+import { defineNuxtPlugin, useRequestEvent, useRuntimeConfig } from '#app'
 
 export default defineNuxtPlugin(() => {
   const event = useRequestEvent()
-  const { firebaseAdmin } = useAppConfig()
-  const runtimeConfig = useRuntimeConfig()
+  const { vuefireAdminOptions } = useRuntimeConfig()
 
-  const firebaseAdminApp = getAdminApp(
-    firebaseAdmin?.options,
-    // @ts-expect-error: FIXME:
-    runtimeConfig.googleApplicationCredentials
-  )
+  const firebaseAdminApp = getAdminApp(vuefireAdminOptions)
 
   // TODO: Is this accessible within middlewares and api routes? or should we use a middleware to add it
   event.context.firebaseApp = firebaseAdminApp
diff --git a/packages/nuxt/src/runtime/app/plugin.server.ts b/packages/nuxt/src/runtime/app/plugin.server.ts
@@ -27,7 +27,6 @@ const appCache = new LRUCache<string, FirebaseApp>({
  */
 export default defineNuxtPlugin(async (nuxtApp) => {
   const appConfig = useAppConfig()
-  const event = useRequestEvent()
 
   const decodedToken = nuxtApp[
     // we cannot use a symbol to index
@@ -59,36 +58,6 @@ export default defineNuxtPlugin(async (nuxtApp) => {
     } else {
       log('debug', '👤 reusing authenticated app', uid)
     }
-    // TODO: this should only happen if user enabled auth in config
-    const firebaseAdminApp = nuxtApp.$firebaseAdminApp as AdminApp
-    const adminAuth = getAdminAuth(firebaseAdminApp)
-    const auth = getAuth(firebaseApp)
-
-    // reauthenticate if the user is not the same (e.g. invalidated)
-    if (auth.currentUser?.uid !== uid) {
-      const customToken = await adminAuth
-        .createCustomToken(uid)
-        .catch((err) => {
-          log('error', 'Error creating custom token', err)
-          return null
-        })
-      // console.timeLog('token', `got token for ${user.uid}`)
-      if (customToken) {
-        const auth = getAuth(firebaseApp)
-        await signInWithCustomToken(auth, customToken)
-        // console.timeLog('token', `signed in with token for ${user.uid}`)
-        // console.timeEnd('token')
-        // TODO: token expiration (1h)
-      }
-    }
-    nuxtApp[
-      // we cannot use a symbol to index
-      UserSymbol as unknown as string
-    ] = auth.currentUser
-    // expose the user to code
-    event.context.user = auth.currentUser
-    // for SSR
-    nuxtApp.payload.vuefireUser = auth.currentUser?.toJSON()
   } else {
     if (!appCache.has('')) {
       appCache.set('', initializeApp(appConfig.firebaseConfig))
diff --git a/packages/nuxt/src/runtime/auth/plugin-user-token.server.ts b/packages/nuxt/src/runtime/auth/plugin-user-token.server.ts
@@ -0,0 +1,27 @@
+import type { App as AdminApp } from 'firebase-admin/app'
+import { decodeUserToken, AUTH_COOKIE_NAME } from 'vuefire/server'
+import { getCookie } from 'h3'
+import { DECODED_ID_TOKEN_SYMBOL } from '../constants'
+import { defineNuxtPlugin, useRequestEvent } from '#app'
+
+// TODO: move this to auth and adapt the module to load it in the right order
+
+/**
+ * Decodes the user token if any. Should only be added on the server and before the firebase/app
+ */
+export default defineNuxtPlugin(async (nuxtApp) => {
+  const event = useRequestEvent()
+  const adminApp = nuxtApp.$firebaseAdminApp as AdminApp
+
+  // log('debug', '🔥 Plugin auth user server')
+
+  const decodedToken = await decodeUserToken(
+    getCookie(event, AUTH_COOKIE_NAME),
+    adminApp
+  )
+
+  nuxtApp[
+    // we cannot use symbol to index
+    DECODED_ID_TOKEN_SYMBOL as unknown as string
+  ] = decodedToken
+})
diff --git a/packages/nuxt/src/runtime/auth/plugin.client.ts b/packages/nuxt/src/runtime/auth/plugin.client.ts
@@ -1,4 +1,5 @@
 import type { FirebaseApp } from 'firebase/app'
+import type { User } from 'firebase/auth'
 import { VueFireAuth } from 'vuefire'
 import { defineNuxtPlugin } from '#app'
 
@@ -8,7 +9,8 @@ import { defineNuxtPlugin } from '#app'
 export default defineNuxtPlugin((nuxtApp) => {
   const firebaseApp = nuxtApp.$firebaseApp as FirebaseApp
 
-  // @ts-expect-error: FIXME: type it
-  console.log('🔥 Plugin auth client', nuxtApp.payload.vuefireUser)
-  VueFireAuth(nuxtApp.payload.vuefireUser)(firebaseApp, nuxtApp.vueApp)
+  VueFireAuth(nuxtApp.payload.vuefireUser as User | undefined)(
+    firebaseApp,
+    nuxtApp.vueApp
+  )
 })
diff --git a/packages/nuxt/src/runtime/auth/plugin.server.ts b/packages/nuxt/src/runtime/auth/plugin.server.ts
diff --git a/src/server/admin.ts b/src/server/admin.ts
