AngularFireAuth and Ionic 5 login issue

I've been working on a new app for iOS and Android. I'm developping it on Angular 12 using Ionic 5, Capacitor and Firebase 9.

While I'm used to setting up auth pages (login/register/pwd reset) with AngularFireAuth, I'm having trouble doing the same with Ionic and Capacitor. My pages, services and guards are working fine on browser but as soon as I run 'ionic cap sync', build on XCode and try to run on my iPhone, my login function doesn't run.

Here's my code so far:

AuthService:

import { Injectable, NgZone } from '@angular/core';
import { User } from './authUser.model';
import { Router } from '@angular/router';
import { AngularFireAuth } from '@angular/fire/compat/auth';
import { AngularFirestore, AngularFirestoreDocument } from '@angular/fire/compat/firestore';

@Injectable({
  providedIn: 'root'
})

export class AuthService {
  userData: any;

  constructor(
    public afStore: AngularFirestore,
    public ngFireAuth: AngularFireAuth,
    public router: Router,
    public ngZone: NgZone
  ) {
    this.ngFireAuth.authState.subscribe(user => {
      if (user) {
        this.userData = user;
        localStorage.setItem('user', JSON.stringify(this.userData));
        JSON.parse(localStorage.getItem('user'));
      } else {
        localStorage.setItem('user', null);
        JSON.parse(localStorage.getItem('user'));
      }
    });
  }

  // Login in with email/password
  SignIn(email, password) {
    console.log('signing in from service');
    return this.ngFireAuth.signInWithEmailAndPassword(email, password);
  }

Login Page:

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { AuthService } from '../shared/auth.service';


@Component({
  selector: 'app-login',
  templateUrl: './login.page.html',
  styleUrls: ['./login.page.scss'],
})

export class LoginPage implements OnInit {

  constructor(
    public authService: AuthService,
    public router: Router
  ) { }

  ngOnInit() { }

  logIn(email, password) {
    this.authService.SignIn(email.value, password.value)
      .then((res) => {
        console.log('signing in from page');
        if (this.authService.isEmailVerified) {
          this.router.navigate(['tabs']);
        } else {
          window.alert('Email is not verified');
          return false;
        }
      }).catch((error) => {
        console.log(error);
        window.alert(error.message);
      });
  }

}

Thanks for your inputs!

Solution 1:

I have downgraded like so and then no issues. But this is super disappointing since we cannot use great new features and performance improvements of the latest Firebase now with Ionic native iOS apps.

npm un @angular/fire firebase

npm i @angular/[email protected]  [email protected]

Note: You need to change the imports like so on all the places too:

import { AngularFireAuth } from '@angular/fire/auth';