firebase / firebase/firebase-js-sdk

signInWithPhoneNumber throws error on iOS with cordova and Ionic

Open
#8,768 4 comments 0 reactions 0 assignees View on GitHub
api: auth needs-attention question stack:Angular stack:Cordova-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:

![Image](https://github.com/user-attachments/assets/9ed1ef62-11d2-47df-936d-913efdcb9243)

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

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.