angular
AppCheck stopped working with upgrade from 7.0.4 to 7.5.0 and is throwing No Firebase App '[DEFAULT]' has been created
Version info
Angular: 15.1.2
Firebase: 9.23.3
AngularFire: 7.5.0
Other (e.g. Ionic/Cordova, Node, browser, operating system):
Node: 18.13.0 Package Manager: yarn 1.22.19 OS: darwin arm64
Angular: 15.1.1 ... animations, cdk, common, compiler, compiler-cli, core, forms ... material, platform-browser, platform-browser-dynamic, router
Package Version
@angular-devkit/architect 0.1501.2 @angular-devkit/build-angular 15.1.2 @angular-devkit/core 15.1.2 @angular-devkit/schematics 15.1.2 @angular/cli 15.1.2 @angular/fire 7.5.0 @schematics/angular 15.1.2 rxjs 6.6.7 typescript 4.9.4
How to reproduce these conditions
I upgrade from Angular 12 to Angular 15. With that, I upgrade AngularFire from 7.0.4 to 7.5.0. The overall upgrade of Angular seemed alright, but unfortunately my AppCheck stopped working. In the console, I have the AppCheck enabled via Recaptcha. More details of my setup are in the steps to reproduce.
Steps to set up and reproduce
In app.modules.ts
imports: [
AngularFireModule.initializeApp(environment.firebase),
provideFirebaseApp(() => initializeApp(environment.firebase)),
provideAppCheck(() => {
const provider = new ReCaptchaV3Provider(environment.recaptcha);
// calling getApps() is returning an empty array
// the line getApp() is throwing: No Firebase App '[DEFAULT]' has been created
return initializeAppCheck(getApp(), {
provider,
isTokenAutoRefreshEnabled: true,
});
})
],
As mentioned in the code comments, getApp() is throwing the exception: No Firebase App '[DEFAULT]' has been created and let angular run in a white page. I tried some debugging and getApps() is returning an empty array. So it seems, that there is no Firebase app created in the first place.
I tried several different approaches, which you can find in the tickets, Stackoverflow or documentation like:
Use provideFirestore
provideFirebaseApp(() => initializeApp({ ... })),
provideFirestore(() => getFirestore()),
Use undefined instead of getApp()
const provider = new ReCaptchaV3Provider(environment.recaptcha3SiteKey);
return initializeAppCheck(undefined, { provider, isTokenAutoRefreshEnabled: true });
Adding this to providers:
{ provide: FIREBASE_OPTIONS, useValue: environment.firebase },
I want to point out, that if I comment out the AppCheck section, my app works and I get a permission exception because of the missing app check token as expected. Furthermore, my setup worked in 7.0.4.
Debug output
ERROR Error: Uncaught (in promise): FirebaseError: Firebase: No Firebase App '[DEFAULT]' has been created - call Firebase App.initializeApp() (app/no-app).
Expected behavior
AppCheck is initialized with a correct FirebaseApp instance
Actual behavior
No FirebaseApp instance is available and AppCheck initialization is throwing an exception, as described in above
Really strange. Tried partly removing data from firebase config or provide firebase one more time using compat API and still could not get this error.
Could you show where do you import firebase stuff from?
And there is a bug existing in the latest release, when compat API does not work with Angular 15, so only modular API is working right now.
Make sure you import firebase stuff only from @angular/fire and not from compat subdirectory or firebase library.
I see that you provide Firebase app one more time using AngularFireModule.initializeApp(environment.firebase),. It is not necessary and could be removed. Moreover it seems to be compat API which is known to be problematic right now.
Has anyone found a solution? I'm getting this error trying to initialize an Auth instance.
main.ts:6 ERROR FirebaseError: Firebase: No Firebase App '[DEFAULT]' has been created - call Firebase App.initializeApp() (app-compat/no-app).
app.module.ts import { connectFirestoreEmulator, getFirestore, provideFirestore, enableMultiTabIndexedDbPersistence } from '@angular/fire/firestore'; import { getAuth, provideAuth } from '@angular/fire/auth'; import { initializeApp, provideFirebaseApp } from '@angular/fire/app';
imports: [ ... provideFirebaseApp(() => initializeApp(environment.firebase)), provideAuth(() => { const auth = getAuth(); if (environment.useEmulators) { connectAuthEmulator(auth, 'http://localhost:9099', {disableWarnings: false}); } return auth; }), ]
login.component.ts ui: firebaseui.auth.AuthUI; constructor() {} ngOnInit(): void { this.ui = new firebaseui.auth.AuthUI(firebase.auth()); this.ui.start('#firebaseui-auth-container', this.firebaseuiConfig); // this also doesn't work: if (this.ui.isPendingRedirect()) { this.ui.start('#firebaseui-auth-container', this.firebaseuiConfig); }
}
login.component.html
div class="auth-container" id="firebaseui-auth-container"></div
Here's a screenshot with the debugger paused on the error
@rinebob, could you try getting auth object using DI rather than getting it from the firebase directly?
Do something like this in your login.component.ts:
import { Auth } from '@angular/fire/auth';
...
constructor(private auth: Auth) {}
ngOnInit(): void {
this.ui = new firebaseui.auth.AuthUI(this.auth);
this.ui.start('#firebaseui-auth-container', this.firebaseuiConfig);
}
Hi @Di-Strix - great tip - did just what you said and it worked immediately. Thanks! Once that got fixed the firebaseui worked right away.
I was having the same error with this configuration:
"@angular/xxxx": "16.1.4",
"@angular/fire": "7.6.1",
"firebase": "9.23.0",
I get the error directly when invoking getAuth():
@NgModule({
declarations: [],
imports: [
CommonModule,
provideFirebaseApp(() => initializeApp(environment.firebase)),
provideAuth(() => {
// ERRROR HERE
const auth = getAuth();
setPersistence(auth, { type: 'LOCAL' });
if (!environment.production) {
connectAuthEmulator(auth, 'http://127.0.0.1:9099');
}
return auth;
}),
]
})
export class FirebaseModule {
}
I've deleted node_modules and package-lock.json, and repeated npm i and everything started working again. At least in my case, seems to be related to some dependencies not correctly resolved after the Angular upgrade from version 14 to 16.
