Proper setup for firebase app-check in Angular (@angular/fire)

Question

Angular version: 15.2.9 AngularFire version: 7.5.0

Here is my 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 { }

after this in my login component:

Which gives following error log in development mode:

I added the given debug token in app-check console in firebase. After that also I'm getting 403 error with response as:

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

when checking the result for console.log(this.appcheck) it give my app credentials with demo-project as my projectId. But when i build my app for production it gives my firebase project id with different debug token and different 403 response with message "App attest failed".

I've checked numerous guides and other questions on stackoverflow but still confused about how to setup properly for local and production development.

Edit 1: Added screenshot for production mode. Debug token is different and now this.appcheck is giving correct projectId instead of demo-project when using ng serve.

also added screenshot of 403 response.

Edit 2: When setting up firestore and auth emulators in some guides they told to change the projectId to demo-*. So, in my dev enironment.ts I changed back my project id. Now I'm getting app-check token back. In dev mode it's ok to show the debug token but in production it's still showing the above production error with different debug id with attestation failed. How to fix this issue ?

Answer 1

Taking 3 days to finally fix this problem. I check the dev server source and in the app check init function it checks the global value FIREBASE_APPCHECK_DEBUG_TOKEN if it's string or set to true. Then it will show the log with debug token otherwise it will generate new one.

So, answer is to set as false for production verison and to debug token saved in firebase console for development version.

export class AppComponent implements OnInit {

  ngOnInit(): void {
    if (!environment.production){
      self.FIREBASE_APPCHECK_DEBUG_TOKEN = environment.debugToken ;
    }
    else{
      self.FIREBASE_APPCHECK_DEBUG_TOKEN = environment.debugToken ;
    }
  }
}

Production console log:

Also, the issue with 403 on production solved after selecting disable cache in network tab and refreshing the production page. I think browser was using an older version where i didn't changed the projectId as well as didn't set DEBUG TOKEN to false.