Authentication problem with running ionic app using firebase on native device, everything works fine with live reload

Question

Good morning! I have a strange problem where i can run & authenticate my user on my ios device perfectly fine running the app using the command below.

ionic capacitor run -l --external

Using an emulator, it works sometimes, though not always.

When I try to deploy the app using Xcode, the app opens and looks normal, but if I try to send authentication requests to firebase, the app just keeps on loading, although the requests are successfully performed.

I first thought the problem was because of using LocalStorage so I rebuilt everything using Ionic Storage. But that didn't help.

I tried different versions of adding the Firebase SDK in Swift or in the Cocoa Pods file but the behaviour doesn't change so I don't believe that this is a issue with a wrong firebase configuration, what is the proper way to do this by the way - or is Ionic doing this for me already?

The output of Xcode doesn't provide any valuable information either.

    2021-12-01 11:20:13.990875+0100 App[3162:27661] Writing analzed variants.
2021-12-01 11:20:14.125754+0100 App[3162:27661] KeyboardPlugin: resize mode - native
⚡️  Loading app at capacitor://localhost...
2021-12-01 11:20:14.552490+0100 App[3162:27661] Writing analzed variants.
⚡️  WebView loaded
⚡️  [log] - Angular is running in development mode. Call enableProdMode() to enable production mode.
⚡️  [log] - null
⚡️  To Native ->  App addListener 60635511
2021-12-01 11:20:21.393141+0100 App[3162:27661] [Accessibility] WKContentView[@] set up: @ pid: @ MACH_PORT -830404096

login-function

loginWithEmail() {
    let email: string = this.loginForm.get("email").value;
    let password: string = this.loginForm.get("password").value;

    this.loadingService.present({
      message: "Logging in . . ."
    });

    this.authService
      .loginWithEmail(email, password)
      .then((result) => {
        this.authService.SetUserData(result.user)
        this.resetLoginForm();
        this.loginSuccess();
        this.router.navigateByUrl("/tabs/intensity");
      })
      .catch(error => {
        console.log(error);
        this.loginFailed(error);
      });
  }

login-success

  loginSuccess() {
    this.loadingService.dismiss();

    this.toastService.present({
      message: "Welcome back!",
      duration: 3000,
      color: "secondary"
    });
  }

login-with-email

import { AngularFireAuth } from "@angular/fire/compat/auth";
...
 async loginWithEmail(email: string, password: string) {
    return await this.afAuth.signInWithEmailAndPassword(email, password);
  }

set user-data function

SetUserData(user) {
    this.user = user;
    const userRef: AngularFirestoreDocument<any> = this.afs.doc(`users/${user.uid}`);
    const userData: User = {
      uid: user.uid,
      email: user.email,
      displayName: user.displayName,
      photoURL: user.photoURL,
      emailVerified: user.emailVerified
    }
    return userRef.set(userData, {
      merge: true
    })
  }

Running it multiple times some times I get this error.

API error: <_UIKBCompatInputView: 0x7fb965726040; frame = (0 0; 0 0); layer = <CALayer: 0x600002f718a0>> returned 0 width, assuming UIViewNoIntrinsicMetric

I am really stuck on this and would appreciate any help. Thank you & kind regards.

Ionic 6.18.1 Angular 12.1.5 Xcode Version 13.1 (13A1030d)