wip(nuxt): auth plugin

Author: posva

packages/nuxt/playground/app.vue

@@ -0,0 +1,54 @@
+<script lang="ts" setup>
+import { computed } from 'vue'
+import { useRouter } from 'vue-router'
+
+const router = useRouter()
+const routes = router
+  .getRoutes()
+  // remove dynamic routes
+  .filter(route => route.path !== '/' && !route.path.includes(':') && !route.children.length)
+  .map((route) => {
+    return {
+      to: route.name ? { name: route.name } : route.path,
+      label: route.path,
+    }
+  }).sort((a, b) => a.label.localeCompare(b.label))
+</script>
+
+<template>
+  <div>
+    <nav class="nav-links">
+      <ul>
+        <li v-for="route in routes">
+          <NuxtLink :to="route.to">
+            {{ route.label }}
+          </NuxtLink>
+        </li>
+      </ul>
+    </nav>
+
+    <hr>
+
+    <NuxtPage />
+  </div>
+</template>
+
+<style scoped>
+.nav-links {
+  margin: 0;
+  padding: 0;
+}
+
+.nav-links > ul {
+  display: flex;
+  list-style: none;
+  flex-direction: row;
+  align-items: center;
+  padding: 0;
+  margin: 0;
+}
+
+.nav-links > ul > li {
+  margin: 0 0.5rem;
+}
+</style>

packages/nuxt/playground/pages/index.vue

@@ -1,26 +1,8 @@
 <script setup lang="ts">
-const router = useRouter()
-
-const routeRecords = router
-  .getRoutes()
-  // remove dynamic routes
-  .filter(route => route.path !== '/' && !route.path.includes(':'))
-  .map((route) => {
-    return {
-      to: route.name ? { name: route.name } : route.path,
-      label: route.path,
-    }
-  }).sort((a, b) => a.label.localeCompare(b.label))
 </script>
 
 <template>
   <div>
-    <ul>
-      <li v-for="route in routeRecords" :key="route.label">
-        <NuxtLink :to="route.to">
-          {{ route.label }}
-        </NuxtLink>
-      </li>
-    </ul>
+    <h1>Select one of the links above</h1>
   </div>
 </template>

packages/nuxt/src/auth/session.ts

@@ -0,0 +1,33 @@
+import { readBody, setCookie, assertMethod, defineEventHandler, H3Response, setHeader } from 'h3'
+import { useRuntimeConfig } from '#app'
+
+export default defineEventHandler(async (event) => {
+  assertMethod(event, 'POST')
+  const { token } = await readBody(event)
+
+  // console.log('💚 updating token', token)
+
+  if (token) {
+    setCookie(event, AUTH_COOKIE_NAME, token, {
+      maxAge: AUTH_COOKIE_MAX_AGE,
+      secure: true,
+      httpOnly: true,
+      path: '/',
+      sameSite: 'lax'
+    })
+    // empty content status
+  } else {
+    // delete the cookie
+    setCookie(event, AUTH_COOKIE_NAME, '', {
+      maxAge: -1,
+      path: '/'
+    })
+  }
+
+  // empty response
+  event.node.res.statusCode = 204
+  return ''
+})
+
+export const AUTH_COOKIE_MAX_AGE = 60 * 60 * 24 * 5 * 1_000
+export const AUTH_COOKIE_NAME = '_vuefire_auth'

packages/nuxt/src/module.ts

@@ -3,6 +3,7 @@ import { normalize } from 'node:path'
 import {
   addPlugin,
   addPluginTemplate,
+  addServerHandler,
   createResolver,
   defineNuxtModule,
 } from '@nuxt/kit'
@@ -84,6 +85,8 @@ 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)
@@ -95,6 +98,8 @@ 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
       nuxt.options.build.transpile.push('vuefire')
@@ -112,10 +117,18 @@ const VueFire: NuxtModule<VueFireNuxtModuleOptions> =
         }
       }
 
+      if (nuxt.options.ssr) {
+        addServerHandler({
+          route: '/api/_vuefire/auth',
+          handler: resolve(authDir, 'session'),
+        })
+      }
+
       nuxt.hook('modules:done', () => {
-        addPlugin(resolve(runtimeDir, 'plugins/admin.server'))
+        // must be added after the admin module to use the admin app
+        addPlugin(resolve(runtimeDir, 'plugins/auth'))
 
-        addPlugin(resolve(runtimeDir, 'plugins/auth.client'))
+        addPlugin(resolve(runtimeDir, 'plugins/admin.server'))
 
         // plugin are added in reverse order
         addPluginTemplate({

packages/nuxt/src/runtime/plugins/auth.client.ts

@@ -0,0 +1,50 @@
+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 '../../auth/session'
+import { defineNuxtPlugin, useRequestEvent } 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(async (nuxtApp) => {
+  const firebaseApp = nuxtApp.$firebaseApp as FirebaseApp
+
+  if (process.server) {
+    const event = useRequestEvent()
+    const token = getCookie(event, AUTH_COOKIE_NAME)
+
+    if (token) {
+      const firebaseApp = nuxtApp.$firebaseApp as FirebaseApp
+      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
+    }
+  } else {
+    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/runtime/plugins/auth.ts

@@ -94,6 +94,7 @@ type _UserState =
 
 const initialUserMap = new WeakMap<FirebaseApp, _UserState>()
 
+// TODO: add firebase app name?
 // @internal
 function _getCurrentUserState() {
   const firebaseApp = useFirebaseApp()