angularfire: Auth does not work in ionic apps on iphone devices or sims

If anyone also has this issue, I solved it as suggested in the issue https://github.com/firebase/firebase-js-sdk/issues/5019 with this code:

import {
  getAuth,
  indexedDBLocalPersistence,
  initializeAuth,
  provideAuth,
} from '@angular/fire/auth';

@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [
    ...
    provideAuth(() => {
      if (Capacitor.isNativePlatform()) {
        return initializeAuth(getApp(), {
          persistence: indexedDBLocalPersistence,
        });
      } else {
        return getAuth();
      }
    }),
  ]
})

If anyone also has this issue, I solved it as suggested in the issue firebase/firebase-js-sdk#5019 with this code:

import {
  getAuth,
  indexedDBLocalPersistence,
  initializeAuth,
  provideAuth,
} from '@angular/fire/auth';

@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [
    ...
    provideAuth(() => {
      if (Capacitor.isNativePlatform()) {
        return initializeAuth(getApp(), {
          persistence: indexedDBLocalPersistence,
        });
      } else {
        return getAuth();
      }
    }),
  ]
})

@NLueg thank you man, saved my day, was struggling here for hours.

The real problem: firebase-js-sdk on mobile iOS assumes google API (gapi) exists on the window, even when it isn’t used.

I found a work around: Mock window.gapi before using firebase auth login:

window['gapi'] = {
  load: (name: string) => Promise.resolve(),
  iframes: {
    getContext: () => {
      return {
        iframe: {
          contentWindow: {
            postMessage: (message: any) => {
              console.log("gapi iframe message:", message);
            }
          }
        }
      }
    }
  }
} as any;

@bocodigital

app.module.ts

import { provideFirebaseApp, getApp, initializeApp } from '@angular/fire/app';
import { provideAuth, getAuth, indexedDBLocalPersistence, initializeAuth } from '@angular/fire/auth';
import { provideStorage, getStorage } from '@angular/fire/storage';
import { provideMessaging, getMessaging } from '@angular/fire/messaging';

imports: [
    provideFirebaseApp(() => initializeApp(environment.firebase)),
    provideAuth(() => {
      if (Capacitor.isNativePlatform()) {
        return initializeAuth(getApp(), {
          persistence: indexedDBLocalPersistence
        });
      } else {
        return getAuth()
      }
    }),
    provideMessaging(() => getMessaging()),
    provideStorage(() => getStorage()),
]

And for exemple in my auth service you need to do something like that:

import { Auth, signInWithEmailAndPassword } from '@angular/fire/auth';
@Injectable({
  providedIn: 'root'
})
export class AuthService {
constructor(
    private afAuth: Auth,
  ){}
  
  signinWithEmailAndPasswordd(email: string, password: string) {
    return signInWithEmailAndPassword(this.afAuth, email, password);
  }
}

If anyone also has this issue, I solved it as suggested in the issue firebase/firebase-js-sdk#5019 with this code:

import {
  getAuth,
  indexedDBLocalPersistence,
  initializeAuth,
  provideAuth,
} from '@angular/fire/auth';

@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [
    ...
    provideAuth(() => {
      if (Capacitor.isNativePlatform()) {
        return initializeAuth(getApp(), {
          persistence: indexedDBLocalPersistence,
        });
      } else {
        return getAuth();
      }
    }),
  ]
})

@NLueg thank you man, saved my day, was struggling here for hours.

This also resolved my issue, still can’t found an official bug on this. The mix between web and native is still blurry on a so popular tool.

You can do the same thing with angular fire. Playing bf 2042 right now. I’ll see if I can grab my code for angular fire in a few b