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.

Lengthwise

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.

Lengthwise

I"m using Cordova instead of Capacitor. – Gustation

Answer 2

I had to follow exactly below setting in order to fixed the capacitor://localhost cors issue on ios.

import { provideFirestore } from '@angular/fire/firestore';
import { getFirestore } from 'firebase/firestore';
import { provideAuth } from '@angular/fire/auth';
import { initializeApp, getApp } from "firebase/app";
import { Capacitor } from "@capacitor/core";
import { getAuth, initializeAuth, indexedDBLocalPersistence } from "firebase/auth"

const app = initializeApp(environment.firebase);

@NgModule({
  declarations: [AppComponent], 
  imports: [
    BrowserModule,
    IonicModule.forRoot(),
    AppRoutingModule,
    provideFirestore(() => getFirestore()),
    provideAuth(() => {
      if (Capacitor.isNativePlatform()) {        
        return initializeAuth(getApp(), {
          persistence: indexedDBLocalPersistence
        })
      } else {
        return getAuth()
      }
    })
  ],
  providers: [{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy }],
  bootstrap: [AppComponent],
})

Also at capacitor.config.ts from docs

import { CapacitorConfig } from '@capacitor/cli';

const config: CapacitorConfig = {
  plugins: {
    CapacitorHttp: {
      enabled: true,
    },
  },
 ....
};

export default config;

Ref:

Dolabriform