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?

Chrillewoodz · Accepted Answer · 2023-05-02T06:03:16.637

4

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.

edited May 02 '23 at 06:03

answered Apr 22 '22 at 06:47

Chrillewoodz

27,055
21
92
175

so did you have to switch from compat to new angularfire? and update all your angular fire code? – EmreAkkoc May 01 '23 at 14:24
1

@EmreAkkoc 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. – Chrillewoodz May 02 '23 at 06:02
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. – Cupid Chan Jun 01 '23 at 14:44

How to make Firebase App Check work when using Angularfire?

1 Answers1