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!