Firebase Auth & AngularFire Not Working on IOS Device - ios

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 ?

Answer 1

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