feat(ssr): use env credentials in prod

Author: posva

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

@@ -1,6 +1,5 @@
-import admin from 'firebase-admin'
+import { initializeApp, cert, getApp, getApps } from 'firebase-admin/app'
 import { VueFireAppCheckServer } from 'vuefire/server'
-import { config } from 'firebase-functions'
 import type { FirebaseApp } from '@firebase/app-types'
 import { defineNuxtPlugin, useAppConfig } from '#app'
 
@@ -17,15 +16,15 @@ export default defineNuxtPlugin((nuxtApp) => {
   const firebaseApp = nuxtApp.$firebaseApp as FirebaseApp
 
   // only initialize the admin sdk once
-  if (!admin.apps.length) {
-    const adminApp = admin.initializeApp({
-      ...firebaseAdmin.config,
-      credential:
-        // when deployed we get direct access to the config
-        process.env.NODE_ENV === 'production'
-          ? config().firebase
-          : admin.credential.cert(firebaseAdmin.serviceAccount),
-    })
+  if (!getApps().length) {
+    const adminApp =
+      // this is specified when deployed on Firebase and automatically picks up the credentials from env variables
+      process.env.GCLOUD_PROJECT
+        ? initializeApp()
+        : initializeApp({
+            ...firebaseAdmin.config,
+            credential: cert(firebaseAdmin.serviceAccount),
+          })
 
     if (vuefireOptions.appCheck) {
       // NOTE: necessary in VueFireAppCheckServer
@@ -41,7 +40,7 @@ export default defineNuxtPlugin((nuxtApp) => {
 
   return {
     provide: {
-      adminApp: admin.app(),
+      adminApp: getApp(),
     },
   }
 })

playground/src/pages/app-check.vue

@@ -1,7 +1,14 @@
 <script lang="ts" setup>
-import { useAppCheckToken } from 'vuefire'
+import { getToken } from 'firebase/app-check'
+import { onMounted } from 'vue'
+import { useAppCheckToken, useAppCheck } from 'vuefire'
 
 const token = useAppCheckToken()
+const appCheck = useAppCheck()
+
+onMounted(async () => {
+  // console.log(await getToken(appCheck))
+})
 </script>
 
 <template>

src/app-check/index.ts

@@ -1,10 +1,14 @@
 import { FirebaseApp } from 'firebase/app'
 import {
   initializeAppCheck,
-  AppCheckOptions,
   onTokenChanged,
+  AppCheckOptions,
+  AppCheck,
+  getToken,
+  AppCheckTokenResult,
 } from 'firebase/app-check'
 import { App, inject, InjectionKey, Ref, ref } from 'vue-demi'
+import { useFirebaseApp } from '../app'
 import { getGlobalScope } from '../globals'
 import { isClient } from '../shared'
 

src/server/app-check.ts

@@ -1,4 +1,5 @@
-import type { app } from 'firebase-admin'
+import type { App as FirebaseAdminApp } from 'firebase-admin/app'
+import { getAppCheck } from 'firebase-admin/app-check'
 import type { FirebaseApp } from 'firebase/app'
 import { CustomProvider, initializeAppCheck } from 'firebase/app-check'
 
@@ -11,7 +12,7 @@ import { CustomProvider, initializeAppCheck } from 'firebase/app-check'
  * @param param2 options
  */
 export function VueFireAppCheckServer(
-  adminApp: app.App,
+  adminApp: FirebaseAdminApp,
   firebaseApp: FirebaseApp,
   {
     // default to 1 week
@@ -20,11 +21,11 @@ export function VueFireAppCheckServer(
     ttlMillis?: number
   } = {}
 ) {
+  const appCheck = getAppCheck(adminApp)
   initializeAppCheck(firebaseApp, {
     provider: new CustomProvider({
       getToken: () =>
-        adminApp
-          .appCheck()
+        appCheck
           // NOTE: appId is checked on the server plugin
           .createToken(firebaseApp.options.appId!, { ttlMillis })
           .then(({ token, ttlMillis: expireTimeMillis }) => ({