feat(app-check): useAppCheckToken()

Author: posva

playground/src/main.ts

@@ -1,10 +1,11 @@
 import { createApp } from 'vue'
 import { createPinia } from 'pinia'
-import { firestorePlugin, VueFire, VueFireAuth } from 'vuefire'
+import { firestorePlugin, VueFire, VueFireAuth, VueFireAppCheck } from 'vuefire'
 import App from './App.vue'
 import { createFirebaseApp } from './firebase'
 import { createWebHistory, createRouter } from 'vue-router/auto'
 import { createStore } from 'vuex'
+import { ReCaptchaV3Provider } from 'firebase/app-check'
 
 const router = createRouter({
   history: createWebHistory(),
@@ -19,12 +20,23 @@ const store = createStore({
   }),
 })
 
+// @ts-expect-error: ok
+self.FIREBASE_APPCHECK_DEBUG_TOKEN = true
+
 const app = createApp(App)
 app
   .use(createPinia())
   .use(VueFire, {
     firebaseApp: createFirebaseApp(),
-    modules: [VueFireAuth],
+    modules: [
+      VueFireAuth(),
+      VueFireAppCheck({
+        isTokenAutoRefreshEnabled: true,
+        provider: new ReCaptchaV3Provider(
+          '6LfJ0vgiAAAAAHheQE7GQVdG_c9m8xipBESx_SKI'
+        ),
+      }),
+    ],
   })
   .use(firestorePlugin)
   .use(store)

playground/typed-router.d.ts

@@ -36,6 +36,12 @@ import type {
 declare module 'vue-router/auto/routes' {
   export interface RouteNamedMap {
     '/': RouteRecordInfo<'/', '/', Record<never, never>, Record<never, never>>
+    '/app-check': RouteRecordInfo<
+      '/app-check',
+      '/app-check',
+      Record<never, never>,
+      Record<never, never>
+    >
     '/authentication': RouteRecordInfo<
       '/authentication',
       '/authentication',

src/app-check/index.ts

@@ -0,0 +1,27 @@
+import { FirebaseApp } from 'firebase/app'
+import {
+  initializeAppCheck,
+  AppCheckOptions,
+  onTokenChanged,
+} from 'firebase/app-check'
+import { App, inject, InjectionKey, Ref, ref } from 'vue'
+import { scope } from '../globals'
+
+export const AppCheckTokenInjectSymbol: InjectionKey<Ref<string | undefined>> =
+  Symbol('app-check-token')
+
+export function useAppCheckToken() {
+  return inject(AppCheckTokenInjectSymbol)!
+}
+
+export function VueFireAppCheck(options: AppCheckOptions) {
+  return (firebaseApp: FirebaseApp | undefined, app: App) => {
+    const appCheck = initializeAppCheck(firebaseApp, options)
+    const token = scope.run(() => ref<string>())!
+    onTokenChanged(appCheck, (newToken) => {
+      token.value = newToken.token
+    })
+
+    app.provide(AppCheckTokenInjectSymbol, token)
+  }
+}

src/auth/index.ts

@@ -7,14 +7,21 @@ import { AuthUserInjectSymbol, setupOnAuthStateChanged } from './user'
 
 export { setupOnAuthStateChanged, useCurrentUser } from './user'
 
-// TODO: figure out a way, could be related to adding a new API to Vue that allows library authors to set the active app and therefore allow top level injcections
-// const userMap = new WeakMap<FirebaseApp, Ref<User | null | undefined>>()
+export function VueFireAuth(_app?: never) {
+  // TODO: refactor to share across modules
+  if (process.env.NODE_ENV !== 'production') {
+    if (_app != null) {
+      console.warn(`Did you forget to call the VueFireAuth function? It should look like
+modules: [VueFireAuth()]`)
+    }
+  }
 
-export function VueFireAuth(firebaseApp: FirebaseApp | undefined, app: App) {
-  const user = scope.run(() => shallowRef<User | null | undefined>())!
-  // userMap.set(app, user)
-  app.provide(AuthUserInjectSymbol, user)
-  setupOnAuthStateChanged(user, firebaseApp)
+  return (firebaseApp: FirebaseApp | undefined, app: App) => {
+    const user = scope.run(() => shallowRef<User | null | undefined>())!
+    // userMap.set(app, user)
+    app.provide(AuthUserInjectSymbol, user)
+    setupOnAuthStateChanged(user, firebaseApp)
+  }
 }
 
 /**

src/index.ts

@@ -52,6 +52,9 @@ export { useCurrentUser, VueFireAuth, useFirebaseAuth } from './auth'
 // SSR
 export { usePendingPromises } from './ssr/plugin'
 
+// App Check
+export { VueFireAppCheck, useAppCheckToken } from './app-check'
+
 /**
  * Options for VueFire Vue plugin.
  */