Why does Angular Fire / Firebase Deny my Web App Check Request Even with the Debug Token Setup for Local Development?

AngularFire / Firebase Debug Token Issues

In my app.module.ts:

import <various imports>...

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

self.FIREBASE_APPCHECK_DEBUG_TOKEN = environment.appCheckDebug; // set to <debugToken> that registered with App-Check in Firebase Console

@NgModule({
  declarations: [<component decs>...],
  imports: [
    <ng material module imports>..., 
    provideFirebaseApp(() => initializeApp(environment.firebaseConfig)),
    provideAppCheck(() =>
      initializeAppCheck(getApp(), {
        provider: new ReCaptchaV3Provider(environment.recaptchaSiteKey),
        isTokenAutoRefreshEnabled: true,
      })
    ),
    provideFirestore(() => getFirestore()),
    provideStorage(() => getStorage()),
    provideAnalytics(() => initializeAnalytics(getApp())),
    <serviceworker module>],
  providers:[],
  bootstrap:[AppComponent] 
})
export class AppModule{}

The issue seems to be a POST request to https://content-firebaseappcheck.googleapis.com/v1/projects/<projectId>/apps/<appId>:exchangeDebugToken?key=<firebaseAPIKey>

Request body:

{"debug_token":"<debugToken>"}

Response:

{
  "error": {
    "code": 403,
    "message": "Requests from referer http://localhost:8080/ are blocked.",
    "status": "PERMISSION_DENIED",
    "details": [
      {
        "@type": "type.googleapis.com/google.rpc.ErrorInfo",
        "reason": "API_KEY_HTTP_REFERRER_BLOCKED",
        "domain": "googleapis.com",
        "metadata": {
          "service": "firebaseappcheck.googleapis.com",
          "consumer": "projects/<redact>"
        }
      }
    ]
  }
}

When I tried to add a Referer header using the Firebase hosting url through a postman POST request it was successful. I thought the debug token was supposed to get around needing the request to be from the project url on localhost, so I'm very confused.

https://stackoverflow.com/questions/69521649/how-to-use-firebase-app-check-in-react-403-error

See answer 4 regarding API key restriction. It was the cause in my case.

This was the answer. I had restricted my API Key and needed to undo that. https://stackoverflow.com/questions/54072206/requests-for-referrer-are-blocked-when-trying-to-sign-in-anonymously-to-firebase

In addition to this I had issues with this question as well, resolved it with the following:

You need to use await getToken() in your client and send that as your X-Firebase-AppCheck header:

async getAppCheckToken(): Promise<string | AppCheckTokenResult | undefined> {
    try {
      info(this.appCheck);
      this.tokenResult = (await getToken(this.appCheck)).token; 
      info(this.tokenResult);
    } catch (err) {
      error(err);
    }
    return this.tokenResult;
  }

it will generate a debug provider jwt that you can check on jwt.io, it's payload should look like the following:

{
  "sub": "<appId>",
  "aud": [
    "projects/<project-number>",
    "projects/<project-name>"
  ],
  "provider": "debug",
  "iss": "https://firebaseappcheck.googleapis.com/<project-number>",
  "exp": 1684275518,
  "iat": 1684271918,
  "jti": "<jwt-uuid-redacted>"
}