If you’re using Firebase Authentication from the Modular version of the Firebase SDK (version 9.0 or above) you might have noticed that when you deploy to iOS using Capacitor the app doesn’t just work.™️

I found this out rather painfully, because I tested my app fully on Android, and when I was ready for the app store my first iPhone test was a white screen with no logs, no errors, no nothing.

After spending an embarrassing amount of time debugging why my authentication guard was not working on iOS I found out that it is an error on Firebase Authentication itself (or rather, a design choice, since the Firebase team sees this as expected behavior).

It looks like Firebase Authentication doesn’t properly initialize, so for me, my auth guard was in fact calling Firebase Auth to see if the user was logged in, but it was not getting a response.

To fix this, you need to go to where you initialized Firebase Authentication, since I use @angular/fire for me this is the app.module.ts file.

And check if the app is a web app or if it’s a capacitor app. If it is a native app running with Capacitor, you should set the Auth persistence to indexedDBLocalPersistence.

And that’s it, after that my app was fully working on the iPhone without issues.

Here’s the code snippet so that you can apply it:

import { NgModule } from '@angular/core';
import { getApp, initializeApp, provideFirebaseApp } from '@angular/fire/app';
import {
  connectAuthEmulator,
  getAuth,
  indexedDBLocalPersistence,
  initializeAuth,
  provideAuth,
} from '@angular/fire/auth';
import { Capacitor } from '@capacitor/core';
import { environment } from '../environments/environment';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [
    ...,
    provideFirebaseApp(() => initializeApp(environment.firebase)),
    provideAuth(() => {
      if (Capacitor.isNativePlatform()) {
        return initializeAuth(getApp(), {
          persistence: indexedDBLocalPersistence,
        });
      } else {
        const auth = getAuth();
        if (environment.useFirebaseEmulator) {
          connectAuthEmulator(auth, 'http://localhost:9099');
        }
        return auth;
      }
    }),
    ...
  ],
  ...,
})
export class AppModule {}