firebase / firebase/firebase-js-sdk
signInWithPhoneNumber throws error on iOS with cordova and Ionic
- Dominant language
- TypeScript
- Stars
- 5.1k
- Forks
- 1k
- Avg merge
- 2d 21h
- Merged PRs (30d)
- 37
Description
### 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 with`ionic 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 {
const phoneNumber: string = '';
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;
```
Blank
Blank
SEND
```
In `config.xml` add
```
```
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
Contributor guide
Assessment
This issue has not been assessed yet.