angularfire: AngularFire does not work on ios with ionic capacitor 3

I was also having this issue when building for an iOS emulator and actual iOS device, but adding this to the app.component.ts worked for me.

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
      });
    }
  }
}

This is where I found the fix and a sample code https://github.com/firebase/firebase-js-sdk/issues/5552#issuecomment-929580662

Original Issue https://forum.ionicframework.com/t/firebase-auth-in-sdk-9-does-not-work-on-ios-sim-or-devices/215362/9

Based on my comment above, I believe I have found a workaround. If calls from capacitor://localhost are being rejected by firebase which then prevents the creation of the “gapi” object on the browser window, what if we could use a different protocol instead of “capacitor://”.

Fortunately capacitor.config.ts has a feature do exactly this, just set server .iosScheme to “ionic” like so: const config: CapacitorConfig = { ... server: { iosScheme: 'ionic' } };

I tried this and compat worked immediately on iOS! I’m still nervous to push this into production as I unsure what unintended consequences may arise from using the “ionic” protocol, which was used with Cordova, instead of the “capacitor” protocol.

Ok, so I got this working finally with the following dependencies:

    "@angular/fire": "^7.2.0",
    "firebase": "^9.6.4",
    "rxfire": "^6.0.3"

After reading this ticket and many others I decided to remove all references to compat but no luck, it still wouldn’t connect on iOS. I was going to try vanilla like others described and create a service but didn’t like that I’d lose DI.

Instead I did this:

import { provideFirebaseApp, getApp, initializeApp, FirebaseApp } from '@angular/fire/app';
import { provideAuth, initializeAuth } from '@angular/fire/auth';
import { provideFirestore, getFirestore } from '@angular/fire/firestore';

import { indexedDBLocalPersistence } from 'firebase/auth';

@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [
    provideFirebaseApp(() => initializeApp(environment.firebase)),
    provideFirestore(() => getFirestore()),
    provideAuth(() => initializeAuth(getApp(), { persistence: indexedDBLocalPersistence })),
    BrowserModule,
    IonicModule.forRoot(),
    AppRoutingModule
  ],
  providers: [
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy },
    AuthService
  ],
  bootstrap: [AppComponent],
})
export class AppModule {}

Notice I imported indexedDBLocalPersistence from 'firebase/auth' instead of @angular/fire/auth. I was getting compile time errors saying indexedDBLocalPersistence wasn’t available. Something for the AngularFire team to look at.

Now I can use like so:

import { Component } from '@angular/core';
import { Auth, signInWithEmailAndPassword, UserCredential, User } from '@angular/fire/auth';

@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.scss'],
})
export class AppComponent {
  constructor(private afAuth: Auth) {
    signInWithEmailAndPassword(this.afAuth, email, password);
  }
}

Hope this saves someone the hours I wasted.

I have the same error. Launching angular fire app on real iOS device I get this error:

TypeError: undefined is not an object (evaluating 'gapi.iframes.getContext')

is it possible to solve this and continue using angular fire?

Ok, so I got this working finally with the following dependencies:

    "@angular/fire": "^7.2.0",
    "firebase": "^9.6.4",
    "rxfire": "^6.0.3"

After reading this ticket and many others I decided to remove all references to compat but no luck, it still wouldn’t connect on iOS. I was going to try vanilla like others described and create a service but didn’t like that I’d lose DI.

Instead I did this:

import { provideFirebaseApp, getApp, initializeApp, FirebaseApp } from '@angular/fire/app';
import { provideAuth, initializeAuth } from '@angular/fire/auth';
import { provideFirestore, getFirestore } from '@angular/fire/firestore';

import { indexedDBLocalPersistence } from 'firebase/auth';

@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [
    provideFirebaseApp(() => initializeApp(environment.firebase)),
    provideFirestore(() => getFirestore()),
    provideAuth(() => initializeAuth(getApp(), { persistence: indexedDBLocalPersistence })),
    BrowserModule,
    IonicModule.forRoot(),
    AppRoutingModule
  ],
  providers: [
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy },
    AuthService
  ],
  bootstrap: [AppComponent],
})
export class AppModule {}

Notice I imported indexedDBLocalPersistence from 'firebase/auth' instead of @angular/fire/auth. I was getting compile time errors saying indexedDBLocalPersistence wasn’t available. Something for the AngularFire team to look at.

Now I can use like so:

import { Component } from '@angular/core';
import { Auth, signInWithEmailAndPassword, UserCredential, User } from '@angular/fire/auth';

@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.scss'],
})
export class AppComponent {
  constructor(private afAuth: Auth) {
    signInWithEmailAndPassword(this.afAuth, email, password);
  }
}

Hope this saves someone the hours I wasted.

Work like a charm 👍 Thank you!

is there a solution for this?

TypeError: undefined is not an object (evaluating ‘gapi.iframes.getContext’)

Error Screenshot

@alistairheath - amazing, great sleuthing! I confirm this worked in Xcode / Simulator and on local iOS device. Very much appreciated.

@moblizeit Sorry for late answer. Here app.module.ts. I just deleted all firebase initializers and providers.

@NgModule({
  imports: [
    BrowserModule,
    AppRoutingModule,
    HttpClientModule,
    FormsModule,
    SwiperModule,
    IonicModule.forRoot(),
    IonicStorageModule.forRoot(),
    ServiceWorkerModule.register('ngsw-worker.js', {
      enabled: environment.production
    })
  ],
  declarations: [AppComponent],
  providers: [InAppBrowser, StatusBar, Broadcaster],
  exports: [],
  bootstrap: [AppComponent]
})
export class AppModule {}

Instead of this I created small service

import {Injectable, OnInit} from '@angular/core';
import {environment} from '../../environments/environment';
import 'firebase/firestore';
import 'firebase/database';
import { initializeApp } from 'firebase/app';
import { initializeAuth, indexedDBLocalPersistence, Auth, browserLocalPersistence } from 'firebase/auth';
import { getDatabase, Database } from '@firebase/database';
import { FirebaseApp } from '@firebase/app';

@Injectable({
  providedIn: 'root'
})
export class FirebasecustomService implements OnInit {
  app: FirebaseApp;
  database: Database;
  auth: Auth;
  constructor() {
    this.app = initializeApp(environment.firebaseConfig);
    this.auth = initializeAuth(this.app, {
      persistence: indexedDBLocalPersistence
    });
    this.database = getDatabase(this.app);
  }

  ngOnInit(): void {

  }
}

And just use vanilla rxfire. Like this.

import {BehaviorSubject, forkJoin, from, Observable, of, pipe, Subject} from 'rxjs';
import {catchError, first, map, mergeMap, switchMap, tap} from 'rxjs/operators';
import {User} from '@firebase/auth';
import {Database, ref, set, remove} from 'firebase/database';
import {objectVal} from 'rxfire/database';

...

  constructor(
    public storage: Storage,
    public firebaseCustom: FirebasecustomService
  ) {
    this.db = firebaseCustom.database;
  }

...

  loadStories(): Observable<Story[]> {
    return objectVal<Story[]>(ref(this.db, '/stories'))
        .pipe(
            mergeMap(val => of(Object.values(val)))
        );
  }

I dont know if its normal code. Because I’m not js dev. Just my pet project. But its working both on sim and real device