Ionic IOS app not authenticating with Firebase on real device

Question

Similar to this question, I can authenticate using an emulator with IOS version 17.2, but as soon as I try to authenticate with a real device (also IOS 17.2) I see that the requests are to "https://identitytoolkit.googleapis.com" and I get a status of 200. The problem is my app always just navigates to the home page after this when I login with ionic serve. I also don't get any errors.

I expected to login like normal the same as with ionic serve, but that was not the case.

My login function in my ionic angular app is

loginWithEmail(email: string, password: string) {
    signInWithEmailAndPassword(this.auth, email, password)
      .then(() => this.router.navigate(['/home']))
      .catch(async (error) => {
        const toast = await this.toast.create({
          message: 'Error logging in.',
          duration: 2000,
          position: 'top',
          color: 'warning'
        });
    
        await toast.present();
      });
  }

Also, I have a similar function of Angular Fire that I am calling to set up a new user.

async registerWithEmailAndPassword(email: string, password: string, customProperties: any): Promise<void> {
    try {
      const userRef = await createUserWithEmailAndPassword(this.auth, email, password);
      // await updateProfile(userRef.user, { displayName });
      const db = getFirestore();
      await setDoc(doc(db, "users", userRef.user.uid), customProperties, { merge: true });
      const toast = await this.toast.create({
        message: 'New user created!',
        duration: 2000,
        position: 'top',
        color: 'success'
      });
      
      await toast.present();
      this.router.navigate(['/home']);
    } catch (error: any) {
      if (error.code === 'auth/weak-password') {
        console.log('Password is too weak.');
        // Handle accordingly (display a message to the user, redirect, etc.)
        const toast = await this.toast.create({
          message: 'Password is too weak. 6 characters minimum',
          duration: 2000,
          position: 'top',
          color: 'warning'
        });
    
        return toast.present();
      }
      
      // Check for specific error codes
      if (error.code === 'auth/email-already-in-use') {
        console.log('Email address is already in use.');
        // Handle accordingly (display a message to the user, redirect, etc.)
        const toast = await this.toast.create({
          message: 'Email address is already in use.',
          duration: 2000,
          position: 'top',
          color: 'warning'
        });
    
        return toast.present();
      }
      // Handle registration error
      console.error('Registration failed:', error.message);
      const toast = await this.toast.create({
        message: 'Registration failed.',
        duration: 2000,
        position: 'top',
        color: 'warning'
      });
  
      return toast.present();
    }
  }

I can see now that the register user function is working on the real device, since I can look in the firebase console and see the newly created user. However, the user should be routed to home, but it isn't. So Im assuming there is something wrong in the AngularFire function not returning like it should for some reason? Does anyone have any idea why this is happening or how to fix it?

Well, I finally found the answer. I just asked the right question eventually. The answer was found here