Using Firebase App Check Debug Provider with Angular

Question

This is not a duplicate of How to initialise Firebase App Check in Angular because I can successfully initialise an app using reCAPTCHA Enterprise. This question is about initialising an app using the Debug Provider.

The Firebase documentation recommends using the Debug Provider when testing from localhost. Specifically

In your debug build, enable debug mode by setting self.FIREBASE_APPCHECK_DEBUG_TOKEN to true before you initialize App Check. For example:

self.FIREBASE_APPCHECK_DEBUG_TOKEN = true;
initializeAppCheck(app, { /* App Check options */ });

How can this be achieved in an Angular application? It's not clear what self is referencing or where this code snippet should be placed.

Answer 1

After a few experiments and guesses, setting FIREBASE_APPCHECK_DEBUG_TOKEN on the window object worked. I did this by adding the following to my app.component.ts constructor

(<any>window).FIREBASE_APPCHECK_DEBUG_TOKEN = true;

The precise code to extend the window object may change over time, but I took this syntax from How do you explicitly set a new property on window in TypeScript?.

Answer 2

You need to declare a new global variable like the follow:

declare global {
  // eslint-disable-next-line no-var
  var FIREBASE_APPCHECK_DEBUG_TOKEN: boolean | string | undefined;
}

self.FIREBASE_APPCHECK_DEBUG_TOKEN = environment.appCheckDebug;

Answer 3

I based on the app check docs changed that property of "self" by this way:

    (self as any).FIREBASE_APPCHECK_DEBUG_TOKEN = true;

And I wrote it in the service where I call the API protected by app check