AppCheck stopped working with upgrade from 7.0.4 to 7.5.0 and is throwing No Firebase App '[DEFAULT]' has been created

[Yetispapa]

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

[Yetispapa]

Anyone?

[Yetispapa]

@jamesdaniels could you maybe help me here?

[vadimwe]

+1

[georgstrieder]

+1 Any solution in the meantime?

[Di-Strix]

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.

[Di-Strix]

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.

[rinebob]

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

[Di-Strix]

@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);
}

[rinebob]

Hi @Di-Strix - great tip - did just what you said and it worked immediately. Thanks! Once that got fixed the firebaseui worked right away.

[Mobiletainment]

The only workaround for me was to downgrade from firebase@9.23.0 to firebase@9.17.2

[ekselys]

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.