refactor(nuxt): domain-based arch

Author: posva

packages/nuxt/src/module.ts

@@ -11,7 +11,7 @@ import type { NuxtModule } from '@nuxt/schema'
 // cannot import from firebase-admin because the build fails, maybe a nuxt bug?
 import type { FirebaseOptions } from '@firebase/app-types'
 import type { AppOptions, ServiceAccount } from 'firebase-admin'
-import type { NuxtVueFireAppCheckOptions } from './app-check'
+import type { NuxtVueFireAppCheckOptions } from './runtime/app-check'
 
 export interface VueFireNuxtModuleOptions {
   /**
@@ -85,8 +85,6 @@ const VueFire: NuxtModule<VueFireNuxtModuleOptions> =
       }
 
       const { resolve } = createResolver(import.meta.url)
-      // TODO: refactor folder structure to be domain based (e.g. auth, firestore, etc.)
-      const authDir = fileURLToPath(new URL('./auth', import.meta.url))
       const runtimeDir = fileURLToPath(new URL('./runtime', import.meta.url))
       const templatesDir = fileURLToPath(
         new URL('../templates', import.meta.url)
@@ -98,7 +96,6 @@ const VueFire: NuxtModule<VueFireNuxtModuleOptions> =
 
       // nuxt.options.build.transpile.push(templatesDir)
       nuxt.options.build.transpile.push(runtimeDir)
-      nuxt.options.build.transpile.push(authDir)
 
       // FIXME: this is a workaround because of the resolve issue with firebase
       // without this, we use different firebase packages within vuefire and nuxt-vuefire
@@ -120,15 +117,17 @@ const VueFire: NuxtModule<VueFireNuxtModuleOptions> =
       if (nuxt.options.ssr) {
         addServerHandler({
           route: '/api/_vuefire/auth',
-          handler: resolve(authDir, 'session'),
+          handler: resolve(runtimeDir, './auth/api.session'),
         })
       }
 
+      // 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, 'plugins/auth'))
+        addPlugin(resolve(runtimeDir, 'auth/plugin.server'))
 
-        addPlugin(resolve(runtimeDir, 'plugins/admin.server'))
+        addPlugin(resolve(runtimeDir, 'admin/plugin.server'))
 
         // plugin are added in reverse order
         addPluginTemplate({
@@ -139,7 +138,7 @@ const VueFire: NuxtModule<VueFireNuxtModuleOptions> =
             ssr: nuxt.options.ssr,
           },
         })
-        addPlugin(resolve(runtimeDir, 'plugins/app'))
+        addPlugin(resolve(runtimeDir, 'app/plugin'))
       })
     },
   })
@@ -149,7 +148,7 @@ export type {
   NuxtVueFireAppCheckOptions,
   NuxtVueFireAppCheckOptionsReCaptchaV3,
   NuxtVueFireAppCheckOptionsReCaptchaEnterprise,
-} from './app-check'
+} from './runtime/app-check'
 
 declare module '@nuxt/schema' {
   export interface AppConfig {

packages/nuxt/src/runtime/plugins/admin.server.ts renamed to packages/nuxt/src/runtime/admin/plugin.server.ts

@@ -8,7 +8,7 @@ export default defineNuxtPlugin((nuxtApp) => {
 
   const { firebaseConfig, firebaseAdmin, vuefireOptions } = appConfig
 
-  // the admin sdk is not always needed
+  // the admin sdk is not always needed, skip if not provided
   if (!firebaseAdmin?.config) {
     return
   }

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

@@ -1,6 +1,16 @@
-import { readBody, setCookie, assertMethod, defineEventHandler, H3Response, setHeader } from 'h3'
+import {
+  readBody,
+  setCookie,
+  assertMethod,
+  defineEventHandler,
+  H3Response,
+  setHeader,
+} from 'h3'
 import { useRuntimeConfig } from '#app'
 
+/**
+ * Setups an API endpoint to be used by the client to mint a cookie based auth session.
+ */
 export default defineEventHandler(async (event) => {
   assertMethod(event, 'POST')
   const { token } = await readBody(event)
@@ -13,14 +23,14 @@ export default defineEventHandler(async (event) => {
       secure: true,
       httpOnly: true,
       path: '/',
-      sameSite: 'lax'
+      sameSite: 'lax',
     })
     // empty content status
   } else {
     // delete the cookie
     setCookie(event, AUTH_COOKIE_NAME, '', {
       maxAge: -1,
-      path: '/'
+      path: '/',
     })
   }
 
@@ -29,5 +39,6 @@ export default defineEventHandler(async (event) => {
   return ''
 })
 
+// TODO: customizable defaults
 export const AUTH_COOKIE_MAX_AGE = 60 * 60 * 24 * 5 * 1_000
 export const AUTH_COOKIE_NAME = '_vuefire_auth'

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

@@ -0,0 +1,27 @@
+import type { FirebaseApp } from '@firebase/app-types'
+import { getAuth, onIdTokenChanged } from 'firebase/auth'
+import { VueFireAuth } from 'vuefire'
+import { defineNuxtPlugin } from '#app'
+
+/**
+ * Setups VueFireAuth and automatically mints a cookie based auth session. On the server, it reads the cookie to
+ * generate the proper auth state.
+ */
+export default defineNuxtPlugin((nuxtApp) => {
+  const firebaseApp = nuxtApp.$firebaseApp as FirebaseApp
+
+  // TODO: provide the server user?
+  VueFireAuth()(firebaseApp, nuxtApp.vueApp)
+  const auth = getAuth(firebaseApp)
+  // send a post request to the server when auth state changes to mint a cookie
+  onIdTokenChanged(auth, async (user) => {
+    const jwtToken = await user?.getIdToken()
+    // console.log('📚 updating server cookie with', jwtToken)
+    // TODO: error handling: should we call showError() in dev only?
+    await $fetch('/api/_vuefire/auth', {
+      method: 'POST',
+      // if the token is undefined, the server will delete the cookie
+      body: { token: jwtToken },
+    })
+  })
+})

packages/nuxt/src/auth/session.ts renamed to packages/nuxt/src/runtime/auth/api.session.ts

@@ -0,0 +1,37 @@
+import type { FirebaseApp } from '@firebase/app-types'
+import type { App as AdminApp } from 'firebase-admin/app'
+import { getAuth as getAdminAuth } from 'firebase-admin/auth'
+import {
+  getAuth,
+  onIdTokenChanged,
+  signInWithCredential,
+  AuthCredential,
+} from 'firebase/auth'
+import { getCurrentUser, VueFireAuth } from 'vuefire'
+import { getCookie } from 'h3'
+import { AUTH_COOKIE_NAME } from './api.session'
+import { defineNuxtPlugin, useRequestEvent } from '#app'
+
+/**
+ * Setups the auth state based on the cookie.
+ */
+export default defineNuxtPlugin(async (nuxtApp) => {
+  const firebaseApp = nuxtApp.$firebaseApp as FirebaseApp
+
+  const event = useRequestEvent()
+  const token = getCookie(event, AUTH_COOKIE_NAME)
+
+  if (token) {
+    const adminApp = nuxtApp.$adminApp as AdminApp
+    const auth = getAdminAuth(adminApp)
+
+    const decodedToken = await auth.verifyIdToken(token)
+    const user = await auth.getUser(decodedToken.uid)
+
+    // signInWithCredential(getAuth(firebaseApp)))
+
+    console.log('🔥 setting user', user)
+
+    // provide user
+  }
+})