Proper firebase app-check setup for angular

[nitinR9]

Version info

Angular: 15.2.9

Firebase: 12.0.0 firebase --version

AngularFire: 7.5.0

Node: 16.20.0

OS: Manjaro Linux KDE Plasma 5.27.5

How to reproduce these conditions

Steps to set up and reproduce

Fresh project with @angular/fire adding firestore and auth in app.module.ts as initial setup.
Then adding app-check after the initializeApp as shown in code:

(app.module.ts)

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { LayoutModule } from '@angular/cdk/layout' ;
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { getApp, initializeApp, provideFirebaseApp } from '@angular/fire/app';
import { ReCaptchaV3Provider, initializeAppCheck, provideAppCheck } from '@angular/fire/app-check' ;
import { environment } from '../environments/environment';
import { provideAuth,getAuth, connectAuthEmulator } from '@angular/fire/auth';
import { provideFirestore,getFirestore, Firestore, initializeFirestore } from '@angular/fire/firestore';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    provideFirebaseApp(() => initializeApp(environment.firebase)),
    provideAppCheck( () => initializeAppCheck(undefined, {
      provider: new ReCaptchaV3Provider(environment.recaptchaV3SiteKey),
      isTokenAutoRefreshEnabled: true
    })),
    provideAuth(() => {
      const auth = getAuth() ;
      if (environment.useEmulators){
        connectAuthEmulator(auth, 'http://localhost:9099', {
          disableWarnings: true
        }) ;
      }

      return auth ;
    }),
    provideFirestore(() => {
      let firestore: Firestore ;
      if (environment.useEmulators){
        firestore = initializeFirestore(getApp(), {
          experimentalForceLongPolling: true
        }) ;
      }
      else{
        firestore = getFirestore() ;
      }

      return firestore ;
    }),
    BrowserAnimationsModule,
    LayoutModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Then in login.component.ts

On using ng serve gives a debug token which i've added in the app-check section of firebase console. But the error 403 is still persisting with response.

{
  "error": {
    "code": 403,
    "message": "Invalid API key for project ID: demo-project",
    "status": "PERMISSION_DENIED"
  }
}

As, shown in screenshot below.

Also, noticed that this.appcheck gives my app credentials but here on ng serve it shows demo-project as projectId but when i make production build log gives original projectId that i've setup but with different debug token each time with error having "App attestation failed."

Expected behavior

It should stop giving 403 error

[google-oss-bot]

This issue does not seem to follow the issue template. Make sure you provide all the required information.

[rubenheymans]

I don't add app check again in the login component, I'm just assuming that importing it in the app.module is enough?
I can't get it to work properly either though

[Sugamsm]

@rubenheymans is right, we don't need to inject AppCheck in any components again if no need of manually retrieving the token. App Module will automatically refresh it based on the config. However, you might need to enable or restrict the API key on : https://console.cloud.google.com/apis/credentials

Under the API key you're using, you might want to allow/restrict localhost, by restricting the key for Websites and adding "localhost" under Domain, to be able to use the Firebase AppCheck API key.

For localhost development, you'll also need to enable FIREBASE_APPCHECK_DEBUG_TOKEN, refer: https://firebase.google.com/docs/app-check/web/debug-provider
Once done, you'll get a debug token in your browser console that you need to add to Firebase project console's AppCheck debug tokens.

@splintercell9dev

[rubenheymans]

how do you provide this FIREBASE_APPCHECK_DEBUG_TOKEN in angular though?

[joelmeaders]

how do you provide this FIREBASE_APPCHECK_DEBUG_TOKEN in angular though?

I did it with this code snippet, above my app module:

if (!environment.production) { (self as any).FIREBASE_APPCHECK_DEBUG_TOKEN = true; }

It also looks like this step may not be required. You can get the token from the body of the post request you're getting a 403 from.

[Sugamsm]

how do you provide this FIREBASE_APPCHECK_DEBUG_TOKEN in angular though?

sorry for the delayed response, I've simply added:
window['FIREBASE_APPCHECK_DEBUG_TOKEN'] = false;
to my main.ts file since I'm using a Angular standalone project. You can try to add it in the app.component as well, and this would result in a console log with the token which you can add to your Firebase console AppCheck Debug tokens.

@splintercell9dev

[nitinR9]

got it thanks

[nitinR9]

issue is resolved , on my side checking with above answers