Firebase throwing auth/internal-error when initializing without the Internet connection

[waglik]

Hello

I've run into a problem when testing PWA app in offline mode. Everything works fine if app started with the Internet access and lost if afterwords. However if I refresh the page in the offline mode I get :

polyfills.a335baf6bc37129f.js:1 Unhandled Promise rejection: Firebase: Error (auth/internal-error). ; Zone: <root> ; Task: HTMLScriptElement.addEventListener:error ; Value: FirebaseError: Firebase: Error (auth/internal-error).

There is nothing happening in the component apart from being injected in the constructor.

export class CheckinComponent implements OnInit {

  constructor(private firestore: AngularFirestore) { }

  ngOnInit(): void {
  }

  submit(): void {  }

}

In my app module I have following code:

import {MaterialModule} from './material-module';
import { HistoryComponent } from './components/history/history.component';
@NgModule({
  declarations: [
    AppComponent,
    CheckinComponent,
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    BrowserAnimationsModule,
    ReactiveFormsModule,
    MaterialModule,
    AngularFireModule.initializeApp(environment.firebase),
    AngularFirestoreModule.enablePersistence(),
    ServiceWorkerModule.register('ngsw-worker.js', {
      enabled: environment.production,
      // Register the ServiceWorker as soon as the app is stable
      // or after 30 seconds (whichever comes first).
      registrationStrategy: 'registerWhenStable:30000'
    })
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Version info

Angular:13.0.0

Firebase:9.4.0

AngularFire:7.2.0

Other (e.g. Ionic/Cordova, Node, browser, operating system):

"dependencies": {
    "@angular/animations": "~13.0.0",
    "@angular/cdk": "^13.0.2",
    "@angular/common": "~13.0.0",
    "@angular/compiler": "~13.0.0",
    "@angular/core": "~13.0.0",
    "@angular/fire": "^7.2.0",
    "@angular/forms": "~13.0.0",
    "@angular/material": "^13.0.2",
    "@angular/platform-browser": "~13.0.0",
    "@angular/platform-browser-dynamic": "~13.0.0",
    "@angular/router": "~13.0.0",
    "@angular/service-worker": "~13.0.0",
    "firebase": "^9.4.0",
    "rxfire": "^6.0.0",
    "rxjs": "~7.4.0",
    "tslib": "^2.3.0",
    "zone.js": "~0.11.4"
  }

Debug output

** Errors in the JavaScript console **

polyfills.a335baf6bc37129f.js:1 Unhandled Promise rejection: Firebase: Error (auth/internal-error). ; Zone: <root> ; Task: HTMLScriptElement.addEventListener:error ; Value: FirebaseError: Firebase: Error (auth/internal-error).
    at cs (main.1e8dbe96f9208f40.js:1)
    at Rn (main.1e8dbe96f9208f40.js:1)
    at HTMLScriptElement.E.onerror [as __zone_symbol__ON_PROPERTYerror] (main.1e8dbe96f9208f40.js:1)
    at HTMLScriptElement.qe (polyfills.a335baf6bc37129f.js:1)
    at T.invokeTask (polyfills.a335baf6bc37129f.js:1)
    at I.runTask (polyfills.a335baf6bc37129f.js:1)
    at m.invokeTask [as invoke] (polyfills.a335baf6bc37129f.js:1)
    at S (polyfills.a335baf6bc37129f.js:1)
    at HTMLScriptElement.D (polyfills.a335baf6bc37129f.js:1) FirebaseError: Firebase: Error (auth/internal-error).
    at cs (http://localhost:8000/main.1e8dbe96f9208f40.js:1:71345)
    at Rn (http://localhost:8000/main.1e8dbe96f9208f40.js:1:70809)
    at HTMLScriptElement.E.onerror [as __zone_symbol__ON_PROPERTYerror] (http://localhost:8000/main.1e8dbe96f9208f40.js:1:137312)
    at HTMLScriptElement.qe (http://localhost:8000/polyfills.a335baf6bc37129f.js:1:11454)
    at T.invokeTask (http://localhost:8000/polyfills.a335baf6bc37129f.js:1:7145)
    at I.runTask (http://localhost:8000/polyfills.a335baf6bc37129f.js:1:2540)
    at m.invokeTask [as invoke] (http://localhost:8000/polyfills.a335baf6bc37129f.js:1:8196)
    at S (http://localhost:8000/polyfills.a335baf6bc37129f.js:1:20140)
    at HTMLScriptElement.D (http://localhost:8000/polyfills.a335baf6bc37129f.js:1:20384)

Expected behavior

Initialize Firebase

Actual behavior

Error message. Firebase do not work.

[185driver]

I am having this same issue, but with a vue.js app. All is okay unless I initialize the app offline. Maybe it's an issue with firebase itself?

[riwos]

I think that everything was working in the Angular 11.x but when I have upgraded to 12.x the issue apperas every time when tha app is offline.. no idea what's wrong..

[vnorbix]

Same problem with Angular 12, Firebase auth won't get initialized and throws the error above in offline mode. For some reason it tries to load Google JS API according to logs which of course is not accessible oflline, this is the code which runs:

function _loadJS(url) {
    // TODO: consider adding timeout support & cancellation
    return new Promise((resolve, reject) => {
        const el = document.createElement('script');
        el.setAttribute('src', url);
        el.onload = resolve;
        el.onerror = e => {
            const error = _createError("internal-error" /* INTERNAL_ERROR */);
            error.customData = e;
            reject(error);
        };
        el.type = 'text/javascript';
        el.charset = 'UTF-8';
        getScriptParentElement().appendChild(el);
    });
}

onerror callback fires, link it tries to load is:

https://apis.google.com/js/api.js?onload=__iframefcb792126

[vnorbix]

It works fine for me after updating firebase to latest version, 9.6.4 as of now.

[riwos]

@vnorbix I'll check and let it know here wheter upgrade to another version of firebase works for me as well. However thanks that you left a comment ;)