AngularFire does not work on ios with ionic capacitor 3

Version info

Angular: “@angular/common”: “~12.1.1”, “@angular/core”: “~12.1.1”,

"@angular/forms": "~12.1.1",
"@angular/platform-browser": "~12.1.1",
"@angular/platform-browser-dynamic": "~12.1.1",
"@angular/router": "~12.1.1",
"@capacitor/android": "^3.3.2",
"@capacitor/app": "^1.0.6",
"@capacitor/core": "3.3.2",
"@capacitor/ios": "^3.3.2",
"@ionic/angular": "^5.5.2",

"rxjs": "~6.6.0",
"tslib": "^2.2.0",
"xcode": "^3.0.1",
"xml-js": "^1.6.11",
"zone.js": "~0.11.4"

Firebase: “firebase”: “^9.5.0”, AngularFire: “@angular/fire”: “^7.2.0”,

Other (e.g. Ionic/Cordova, Node, browser, operating system): ionic info

Ionic:

Ionic CLI : 6.18.1 (/usr/local/lib/node_modules/@ionic/cli) Ionic Framework : @ionic/angular 5.9.1 @angular-devkit/build-angular : 12.1.4 @angular-devkit/schematics : 12.1.4 @angular/cli : 12.1.4 @ionic/angular-toolkit : 4.0.0

Capacitor:

Capacitor CLI : 3.3.2 @capacitor/android : 3.3.2 @capacitor/core : 3.3.2 @capacitor/ios : 3.3.2

Cordova:

Cordova CLI : 10.0.0 (cordova-lib@10.1.0) Cordova Platforms : android broken, ios 5.1.1 Cordova Plugins : no whitelisted plugins (0 plugins total)

Utility:

cordova-res (update available: 0.15.4) : 0.15.3 native-run : 1.5.0

System:

ios-deploy : 1.9.4 ios-sim : ios-sim/9.0.0 darwin-x64 node-v14.17.0 NodeJS : v14.17.0 (/usr/local/bin/node) npm : 7.24.0 OS : macOS Monterey Xcode : Xcode 13.1 Build version 13A1030d

How to reproduce these conditions

Failing test unit, Stackblitz demonstrating the problem

Steps to set up and reproduce ionic build ionic cap copy ionic cap sync open xcode and either run on device or simulator

Sample data and security rules

Debug output

2021-12-08 13:25:36.266937-0600 App[2469:682932] KeyboardPlugin: resize mode - native 2021-12-08 13:25:36.280309-0600 App[2469:682932] InAppPurchase[objc] Initialized. ⚡️ Loading app at capacitor://localhost… ⚡️ [log] - onscript loading complete ⚡️ To Native -> Device getId 109505367 ⚡️ [log] - Ionic Native: deviceready event fired after 48 ms ⚡️ TO JS {“uuid”:“14A77728-365E-4EDC-8F78-7CD1F6CC8CA0”} To Native Cordova -> AppVersion getVersionNumber AppVersion678940142 [“options”: []] ⚡️ WebView loaded SplashScreen.hideSplash: SplashScreen was automatically hidden after default timeout. You should call SplashScreen.hide() as soon as your web app is loaded (or increase the timeout). Read more at https://capacitorjs.com/docs/apis/splash-screen#hiding-the-splash-screen ⚡️ To Native -> App addListener 109505368

** Errors in the JavaScript console ** above pasted nothing else

** Output from firebase.database().enableLogging(true); **

** Screenshots **

Expected behavior

should run fine as it runs on android

Actual behavior

does not run on ios but run on android

[alistairheath]

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.

[ChristianGerardHizon]

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