Search code examples
angularfirebasegoogle-cloud-functionsfirebase-app-checkangular-standalone-components

How do I use Firebase AppCheck with httpsCallable functions?


I'm using firebase functions like so...

exports.sendLicenseAgain = onCall({
  enforceAppCheck: true,
  consumeAppCheckToken: true,
}, async (req) => {
     ...
})

and i have this in my angular 17 front end code

import { getFunctions, httpsCallable } from 'firebase/functions';
import { AppCheck, getToken } from '@angular/fire/app-check';
....
...
getToken(this.appCheck).then((token) => {
        const funcs = getFunctions();
        const sendFunc= httpsCallable(funcs, "sendLicenseAgain", { limitedUseAppCheckTokens: true })
        sendFunc({ ... })

I get error status 401 because i haven't included the appcheck token. I know I'm supposed to put the token in the headers with 'X-Firebase-AppCheck' in the http request, but I can't find a way to do that with the httpsCallable funciton. Am I missing something?

EDIT: more info on my implementation: in app.config.ts:

importProvidersFrom(provideAppCheck(() => {
      const provider = new ReCaptchaV3Provider("...");
      return initializeAppCheck(undefined, { provider, isTokenAutoRefreshEnabled: true });
    })),

in app.component.ts (because im in a local host env)

constructor(){
(<any>window).FIREBASE_APPCHECK_DEBUG_TOKEN = true;
}

Solution

  • UPDATE: I removed replay protection code from firebase functions and my web app and now it works.

    Specifically I removed from the function's index.js:

     consumeAppCheckToken: true,
    

    And i removed from my web app's httpsCallable invocation:

     { limitedUseAppCheckTokens: true }
    

    based on no evidence, I'm thinking the error come from using the debug token with the replay protection.