Firebase Authentication Sticks Capacitor Ionic on iOS

Question

I am using angular-fire for firebase authentication on Ionic-Capacitor. It works fine on the web and android, but not on IOS.

When I inspected the app network activity, I realized the app is able to get an Authentication response successfully from firebase, but it's not fulfilling the async call.

My app.module.ts

@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [BrowserModule, IonicModule.forRoot({mode: 'ios'}), AppRoutingModule,
    HttpClientModule,
    AngularFireModule.initializeApp(environment.firebaseConfig),
    AngularFireAuthModule,
    AngularFirestoreModule
]})

This is how I am initializing Angular fire.

Answer 1

This is a FirebasePlugin issue! All you need to do is to initialize AngularFire with the latest method.

OLD Method (Wrong) -

@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [BrowserModule, IonicModule.forRoot({mode: 'ios'}), AppRoutingModule,
    HttpClientModule,
    AngularFireModule.initializeApp(environment.firebaseConfig),
    AngularFireAuthModule,
    AngularFirestoreModule
]})

Working Method (NEW)

import {getApp, initializeApp, provideFirebaseApp} from "@angular/fire/app";
import {getAuth, initializeAuth, provideAuth, indexedDBLocalPersistence} from "@angular/fire/auth";

@NgModule({

  imports: [
    provideFirebaseApp(() =>      initializeApp(environment.firebaseConfig)),
    provideAuth(() => {
      if (Capacitor.isNativePlatform()) {
        return initializeAuth(getApp(), {
          persistence: indexedDBLocalPersistence
        })
      } else {
        return getAuth()
      }
    })]
})

After modifying the initializing approach, you'll need to remove usage of AngularFireAuth, instead use it like:-

import {Auth, createUserWithEmailAndPassword, signInWithEmailAndPassword} from "@angular/fire/auth";

export class UserService {
 constructor(private auth : Auth) {

const user: any = await signInWithEmailAndPassword(this.auth,email,password);

}

Also, you can visit the latest docs of AngularFire to understand it better.