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?
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. Failed to do so will make your requests fail with a 403 status.