How to make Firebase App Check work when using Angularfire?

Question

I'm trying to make Firebase App Check work but I'm struggling to find a way to do so using Angularfire as there seem to be no docs on it from what I can find.

...
import { getFirestore, provideFirestore } from '@angular/fire/firestore';
import { AngularFireModule } from '@angular/fire/compat';
import { AngularFireStorageModule } from '@angular/fire/compat/storage';
import { initializeAppCheck, provideAppCheck, ReCaptchaV3Provider } from '@angular/fire/app-check';
import { FirebaseApps, getApp } from '@angular/fire/app';

@NgModule({
  ...
  imports: [
    ...
    AngularFireModule.initializeApp(environment.firebase),
    AngularFirestoreModule.enablePersistence(),
    AngularFireStorageModule,
    provideFirestore(() => getFirestore()),
    provideAppCheck(() => initializeAppCheck(getApp(), { provider: new ReCaptchaV3Provider(environment.recaptchaSiteKey), isTokenAutoRefreshEnabled: true })),
  ],
})
export class AppModule {}

With this I get this error when I run the app:

NullInjectorError: R3InjectorError(AppModule)[AngularFireAuthGuard -> AngularFireAuth -> AppCheckInstances -> InjectionToken angularfire2.app-check-instances -> [object Object] -> FirebaseApps -> FirebaseApps -> FirebaseApps]: NullInjectorError: No provider for FirebaseApps!

And if I add FirebaseApps directly to providers like:

providers: [
  FirebaseApps,
]

I get this error instead:

FirebaseError: Firebase: No Firebase App '[DEFAULT]' has been created - call Firebase App.initializeApp() (app/no-app).

What's the correct way of doing this?

Vacuity

Answer 1

So managed to solve this by ditching AngularFireModule and using this instead:

 provideFirebaseApp(() => initializeApp(environment.firebase)),

Also had to add:

{ provide: FIREBASE_OPTIONS, useValue: environment.firebase },

to providers.

After that I also had to add the "App Check debug token" that is logged by the SDK in the browser console to debug tokens in the Firebase Console under the "App Check" section. Failing to do so will make your requests fail with a 403 status.

Vacuity

so did you have to switch from compat to new angularfire? and update all your angular fire code? – Michell

@Michell Yes I believe so, most of the implementation code shouldn't be affected, more just how you load Firebase as a whole if I recall correctly. – Vacuity

I encounter the exact same issue now but the problem is I am also using FirebaseUI, which doesn't support V9. That means I have to stick with compat unless I rewrite the GUI myself. – Carchemish

Answer 2

If your are using @angular/fire/COMPAT and you cannot switch for any reasons to the new modular version of angularfire, then you can use the app-check from Firebase JavaScript SDK directly.

in app.module.ts:

import { AngularFireModule } from "@angular/fire/compat";
import { initializeAppCheck, ReCaptchaEnterpriseProvider } from 'firebase/app-check';
import { getApp } from 'firebase/app';

@NgModule({
  imports: [
    ...
    AngularFireModule.initializeApp(environment.firebase),
    ... 
  ]

export class AppModule {
  constructor() {
    this.initializeAppCheck();
  }

  private initializeAppCheck() {
    const firebaseApp = getApp(); // get app that has been initialized with Angularfire above
    initializeAppCheck(firebaseApp, {
      provider: new ReCaptchaEnterpriseProvider(environment.recaptchaSiteKey),
      isTokenAutoRefreshEnabled: true
    });
  }
}

Bordelaise