fix(auth): authenticated requests on server

Fix #1310

Author: posva

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

@@ -1,5 +1,7 @@
-import { deleteApp, FirebaseApp, initializeApp } from 'firebase/app'
-import type { User } from 'firebase/auth'
+import { deleteApp, type FirebaseApp, initializeApp } from 'firebase/app'
+import { getAuth, signInWithCustomToken, type User } from 'firebase/auth'
+import { type App as AdminApp } from 'firebase-admin/app'
+import { getAuth as getAdminAuth } from 'firebase-admin/auth'
 import { LRUCache } from 'lru-cache'
 import { log } from '../logging'
 import { UserSymbol } from '../constants'
@@ -23,7 +25,7 @@ const appCache = new LRUCache<string, FirebaseApp>({
 /**
  * Initializes the app and provides it to others.
  */
-export default defineNuxtPlugin((nuxtApp) => {
+export default defineNuxtPlugin(async (nuxtApp) => {
   const appConfig = useAppConfig()
 
   const user = nuxtApp[
@@ -32,22 +34,36 @@ export default defineNuxtPlugin((nuxtApp) => {
   ] as User | undefined | null
   const uid = user?.uid
 
-  let firebaseApp: FirebaseApp
+  let firebaseApp: FirebaseApp | undefined
 
   // log('debug', 'initializing app with', appConfig.firebaseConfig)
   if (uid) {
-    if (!appCache.has(uid)) {
+    firebaseApp = appCache.get(uid)
+    if (!firebaseApp) {
       const randomId = Math.random().toString(36).slice(2)
+      // TODO: do we need a randomId?
       const appName = `auth:${user.uid}:${randomId}`
 
-      // log('debug', '✅ creating new app', appName)
+      log('log', '👤 creating new app', appName)
 
       appCache.set(uid, initializeApp(appConfig.firebaseConfig, appName))
+      firebaseApp = appCache.get(uid)!
+      const firebaseAdminApp = nuxtApp.$firebaseAdminApp as AdminApp
+      const adminAuth = getAdminAuth(firebaseAdminApp)
+      // console.time('token')
+      const customToken = await adminAuth.createCustomToken(user.uid)
+      // console.timeLog('token', `got token for ${user.uid}`)
+      const credentials = await signInWithCustomToken(
+        getAuth(firebaseApp),
+        customToken
+      )
+      // console.timeLog('token', `signed in with token for ${user.uid}`)
+      // console.timeEnd('token')
+      // TODO: token expiration (1h)
     }
-    firebaseApp = appCache.get(uid)!
   } else {
     // anonymous session, just create a new app
-    // log('debug', 'anonymous session')
+    // log('log', '🥸 anonymous session')
     firebaseApp = initializeApp(appConfig.firebaseConfig)
   }
 

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

@@ -3,7 +3,7 @@ import { VueFireAuth } from 'vuefire'
 import { defineNuxtPlugin } from '#app'
 
 /**
- * Setups VueFireAuth for the client.
+ * Setups VueFireAuth for the client. This version creates some listeners that shouldn't be set on server.
  */
 export default defineNuxtPlugin((nuxtApp) => {
   const firebaseApp = nuxtApp.$firebaseApp as FirebaseApp

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

@@ -2,8 +2,8 @@ import type { FirebaseApp } from 'firebase/app'
 import type { User } from 'firebase/auth'
 import { VueFireAuthServer } from 'vuefire/server'
 import type { App } from 'vue'
-import { defineNuxtPlugin } from '#app'
 import { UserSymbol } from '../constants'
+import { defineNuxtPlugin } from '#app'
 
 /**
  * Setups the auth state based on the cookie.