Firebase Auth & AngularFire Not Working on IOS Device

Question

I created an Ionic 5 + Capacitor + Firebase project and added the latest version of AngularFire to it.

Everything works perfectly on Desktop but when I launch on my iPhone, there is an error (Well, there is no error but the redirection of my first page does not work).

So, no error in the logs but a white screen.

After much research, I came to the following conclusion.

I use AngularFireAuthGuard as follows :

  {
    path: '',
    loadChildren: () => import('./tabs/tabs.module').then(m => m.TabsPageModule),
    ...canActivate(() => redirectUnauthorizedTo(['landing']))
  }

And my research made me realize that with latest version of AngularFire firebase Auth is not detected properly.

So I found a piece of code that solved the problem for me for a while :

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

As soon as I wanted to add the onAuthStateChanged in my app.component I got the following error :

auth/already-initialized

In my opinion, it might be because my app.module.ts looks like this :

@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [
    BrowserModule,
    IonicModule.forRoot(),
    IonicStorageModule.forRoot(),
    AppRoutingModule,
    AngularFireAuthModule,
    AngularFireModule.initializeApp(environment.firebase)
  ],
  providers: [{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy }],
  bootstrap: [AppComponent],
})

My application is initialized here but if I delete it I get another injection error...

Do you have any ideas how I can fix the problem ?

Arno Teigseth · Answer 1 · 2022-03-11T02:11:49.363

Wondering if my problem is similarly related: signin link works on web and android, but in iOS the app opens, I see the link is received but then the signInWithEmailLink() promise neither resolves nor catches.

This is the code; I see the console.log and thereafter there's silence:

console.log(`incoming Passwordless Login Link for mail ${email}: ${uri}, ${originalLink}`);

signInWithEmailLink(this.auth, email, originalLink)
        .then(cred => {
          console.log("successfully logged in", email, cred);
          window.localStorage.removeItem("emailForSignIn");
          this.router.navigateByUrl("/home");
        })
        .catch((err) => {
          console.error("signInLink err", JSON.stringify(err));
          this.ngZone.run(() => this.router.navigateByUrl("/pwlsignup"));
        });

After the call I do see a few lines of these though, looking into if it is related:

nw_protocol_boringssl_get_output_frames(1301) [C4.1:2][0x7fee0fe19300] get output frames failed, state 8196

2018-11-12 22:12:05.398615-0800 QQBCHAT[37807:7011607] TIC Read Status [4:0x0]: 1:57

EDIT: Yes, mine must be a different issue - and I found the solution too, just if anyone hits this with google search https://github.com/angular/angularfire/issues/2979#issuecomment-940910213

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();
      }
    }),
  ]
})

Firebase Auth & AngularFire Not Working on IOS Device

1 Answers1