Firebase auth in SDK 9 does not work on ios sim or devices

I recently moved to the firebase v9 sdk for a brand new ionic/angular project. I was able to get the signInWithEmailAndPassword call to work in a web browser but it hangs in iphone simulators and devices. Strangely, it works in the ipad simulator. If I take the same app and switch it to the v8 firebase sdk, the login process works on all sims and devices.
I contacted Firebase tech support. I got the “It’s not us it’s ionic” response. Was not the kind of response I expected.
Any who, be aware that the firebase v9 sdk has problems when used with ionic.

2 Likes

I am getting precisely the same error, (with signInWithEmailAndPassword, on an Ionic Angular project, on the IOS simulator). I will try and move back to Firebase v8.

There is an update on this. You can use the new v9 sdk if you want. You just need to initialize auth like so:

init() {
    const app = initializeApp(environment.firebase);
    if (Capacitor.isNativePlatform) {
      initializeAuth(app, {
        persistence: indexedDBLocalPersistence
      });
    }
    this.firestore = getFirestore(app);
  }

See this for more details: Auth does not work in ionic apps on iphone devices or sims · Issue #5552 · firebase/firebase-js-sdk · GitHub

If you want to use FB or Google auth, you need to look at this: Authenticate Using OAuth Providers with Cordova  |  Firebase

2 Likes

Thanks a lot for your answer. Do you know what that would look like in the app.module.ts file when using AngularFire? I can’t get it to work.

I don’t know. I would have to research it. If I get some time, I might get into it.

Regards,
Don Morris

Don you’re a legend - I’ve been struggling with this for 2 days. Thanks!

I didn’t solve it. This guy did jayordway (Jay Ordway) · GitHub

I saw that. But I wouldn’t have if you hadn’t posted here, so thanks anyway.

If anyone is wondering where to put that code, I put it in app.component and it is working in the iOS simulator. Here is the full file with imports:

import { Component } from '@angular/core';
import { Capacitor } from '@capacitor/core';
import { initializeApp } from 'firebase/app';
import { indexedDBLocalPersistence, initializeAuth } from 'firebase/auth';
import { environment } from 'src/environments/environment';

@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.scss'],
})
export class AppComponent {
  constructor() {
    const app = initializeApp(environment.firebase);
    if (Capacitor.isNativePlatform) {
      initializeAuth(app, {
        persistence: indexedDBLocalPersistence
      });
    }
  }
}
3 Likes

Hi,

What have you got in app.module?

I am getting already initialised errors.

Thanks in advance,

EDIT

I worked it out.

I rewrote the app with only angular/fire and not firebase

Thanks it really helped me solve my issue @

Edit: I was also struggling with already initialized’ errors, but as a workaround, I managed to add the initializeAuth calls into app.module, which now looks something like this:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';
import { provideFirebaseApp, initializeApp } from '@angular/fire/app';
import { enableIndexedDbPersistence, getFirestore, provideFirestore } from '@angular/fire/firestore';
import {provideAuth, getAuth, initializeAuth, indexedDBLocalPersistence} from '@angular/fire/auth';
import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';
import { environment } from 'src/environments/environment';
import { Capacitor } from '@capacitor/core';


@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [
      BrowserModule,
      IonicModule.forRoot(),
      AppRoutingModule,
      provideFirebaseApp(() => {
        const app = initializeApp(environment.firebase);
          if (Capacitor.isNativePlatform) {
            initializeAuth(app, {
                persistence: indexedDBLocalPersistence
            });
        }
          return app;
        }),
      provideAuth(() => getAuth()),
      provideFirestore(() => {
        const firestore = getFirestore();
        enableIndexedDbPersistence(firestore);
        return firestore;
      }),
    ],
  providers: [{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy }],
  bootstrap: [AppComponent],
})
export class AppModule {}

1 Like

This was the only thing that worked for me, thanks !!

Can please share your app.module and how you made it work. I have been trying to resolve the issue buh no success

I thing you are interested in this part:

    provideFirebaseApp(() => {
      const app = initializeApp(firebaseConfig);
      if (Capacitor.isNativePlatform) {
        initializeAuth(app, {
          persistence: indexedDBLocalPersistence
        });
      }
      return app;
    }),
    provideFirestore(() => {
      const firestore = getFirestore();
      enableIndexedDbPersistence(firestore);
      return firestore;
    }),
    provideAuth(() => getAuth()),

this is inside the imports array.

I copied that but still same issue. Can please share your app.module? Did you do any changes in your app.component.ts?

My app module is not relevant, but I will post it:

import {NgModule} from '@angular/core';
import {BrowserModule} from '@angular/platform-browser';
import {RouteReuseStrategy} from '@angular/router';

import {IonicModule, IonicRouteStrategy} from '@ionic/angular';

import {AppComponent} from './app.component';
import {AppRoutingModule} from './app-routing.module';

import {HttpClient, HttpClientModule} from '@angular/common/http';
import {TranslateLoader, TranslateModule} from '@ngx-translate/core';
import {TranslateHttpLoader} from '@ngx-translate/http-loader';

import {firebaseConfig} from './***';
import {provideFirebaseApp, initializeApp} from '@angular/fire/app';
import {enableIndexedDbPersistence, getFirestore, provideFirestore} from '@angular/fire/firestore';
import {getAuth, initializeAuth, provideAuth, indexedDBLocalPersistence} from '@angular/fire/auth';
import {AuthenticationGuardService} from './authentication-guard.service';
import {AuthenticationService} from './authentication.service';
import {Capacitor} from '@capacitor/core';


@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [
    BrowserModule,
    IonicModule.forRoot(),
    AppRoutingModule,
    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useFactory: httpLoaderFactory,
        deps: [HttpClient]
      }
    }),
    HttpClientModule,
    provideFirebaseApp(() => {
      const app = initializeApp(firebaseConfig);
      if (Capacitor.isNativePlatform) {
        initializeAuth(app, {
          persistence: indexedDBLocalPersistence
        });
      }
      return app;
    }),
    provideFirestore(() => {
      const firestore = getFirestore();
      enableIndexedDbPersistence(firestore);
      return firestore;
    }),
    provideAuth(() => getAuth()),
  ],
  providers: [AuthenticationGuardService,AuthenticationService, {provide: RouteReuseStrategy, useClass: IonicRouteStrategy}],
  bootstrap: [AppComponent],
})
export class AppModule {
}

// required for AOT compilation
export function httpLoaderFactory(http: HttpClient) {
  return new TranslateHttpLoader(http);
}

in the app.component.ts I don’t have anything related to the initialisation.