signInWithPhoneNumber throws error on iOS with cordova and Ionic

[willemjanvankranenburg]

Operating System

iOS 17.5.1

Environment (if applicable)

Ionic 8, Cordova CLI 12, Cordova iOS 7.1.1, @ionic/angular 8.4.2

Firebase SDK Version

11.2.0

Firebase SDK Product(s)

Auth

Project Tooling

Ionic Cordova Angular App, build for iOS

Detailed Problem Description

When calling the signInWithPhoneNumber method from 'firebase/auth' everything works fine for web and andriod. But using the same build for iOS I get the following Error:

I followed the steps from https://firebase.google.com/docs/auth/ios/phone-auth#set-up-recaptcha-verification, but this had no other result.

Steps and code to reproduce issue

Create a clean Ionic Cordova app using Angular withionic start phoneLogin blank --cordova --type=angular
Add firebase package with npm i firebase
make sure the initializeAp from firebase/app is called in app.module.ts with your firebase project config

In home.page.ts add the following:

import {
  Auth,
  getAuth,
  RecaptchaVerifier,
  signInWithPhoneNumber,
} from 'firebase/auth';


let window: any;

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
  standalone: false,
})
export class HomePage implements ViewDidEnter {
  private auth: Auth;
  constructor(private formBuilder: FormBuilder) {
    this.auth = getAuth(getApp());      
  }
  public ionViewDidEnter(): void {
    window = new RecaptchaVerifier(this.auth, 're-captcha-container', {
      size: 'invisible',
    });
  }

  public async sendVerificationSMS(): Promise<void> {
    const phoneNumber: string = '<PHONENUMBER>';
    try {
      const confirmationResult = await signInWithPhoneNumber(this.auth, phoneNumber, window);
      console.log(confirmationResult)
    } catch (error) {
      console.log(error);
    }
  }
}

The HTML for home.page should have the following;

<ion-header [translucent]="true">
  <ion-toolbar>
    <ion-title> Blank </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content [fullscreen]="true">
  <ion-header collapse="condense">
    <ion-toolbar>
      <ion-title size="large">Blank</ion-title>
    </ion-toolbar>
  </ion-header>
    <ion-button color="primary" (click)="sendVerificationSMS()">
      SEND
    </ion-button>
  <div class="reCaptchaContainer" id="re-captcha-container"></div>
</ion-content>

In config.xml add

    <preference name="Hostname" value="url.for.you" />
    <preference name="Scheme" value="https" />

make sure the url.for.you in Hostname is an authorised domain in your firebase project > Authentication > Settings > Authorised domains

• To your firebase project > Project settings > Your Apps, add an iOS App with the correct package ID, and download the google-services.json, and add that to your ionic project

• follow https://firebase.google.com/docs/auth/ios/phone-auth#start-receiving-silent-notifications to add an APNs auth key for your project

• In your ionic project; run ionic cordova platform add iOS and `ionic cordova build ios, open the project in Xcode,

• add the URL type in XCode (https://firebase.google.com/docs/auth/ios/phone-auth#set-up-recaptcha-verification)

• Enable 'Background fetch, Background processing and Remote notifications in XCode

• run on an iPhone or Emulator and receive the error

---

• in your ionic project; run ionic cordova platform add android and ionic cordova build android, install the build APK on an Android device and everything works

[google-oss-bot]

I couldn't figure out how to label this issue, so I've labeled it for a human to triage. Hang tight.