Phone number auth using firebase in ionic, angular, capacitor app gives auth/internal-error in iOS Simulator. Web and Android are working

Question

Have a project based on ionic, angular, capacitor using phone number based Firebase Auth.

This is working fine in web app and Android both dev and prod. I'm trying to add iOS support to this app and I get firebase error 'auth/internal-error' in iOS simulator.

(Currently, NOT in a position to test on actual iPhone. I would like to first run it successfully in iOS simulator.)

(Also, I would like to test it using a real phone number and not a test number that can be configured in firebase console)

(I tried firebase google login and it works as expected in iOS simulator.)

Steps:

1. I enabled iOS app in firebase console, copied GoogleService-Info.plist in the same folder as Info.plist. It contains CLIENT_ID and REVERSED_CLIENT_ID.
2. Added URL Schemes in App target in Xcode (leaving Identifier and Icon empty) taken from firebase console Encoded app ID.
3. set server.allowNavigation to [*] in capacitor.config.json

package.json:

...
"dependencies": {
    "@angular/animations": "^13.4.0",
    "@angular/common": "^13.4.0",
    "@angular/compiler": "^13.4.0",
    "@angular/core": "^13.4.0",
    "@angular/fire": "7.2",
    "@angular/forms": "^13.4.0",
    "@angular/platform-browser": "^13.4.0",
    "@angular/platform-browser-dynamic": "^13.4.0",
    "@angular/router": "^13.4.0",
    "@capacitor/android": "^5.0.5",
    "@capacitor/app": "5.0.6",
    "@capacitor/core": "5.5.1",
    "@capacitor/haptics": "5.0.6",
    "@capacitor/ios": "^5.5.1",
    "@capacitor/keyboard": "5.0.6",
    "@capacitor/status-bar": "5.0.6",
    "@ionic/angular": "^6.7.5",
    "firebaseui-angular": "^6.1.1",
    "rxjs": "~7.8.0",
    "tslib": "^2.3.0"
  },
...

Code is pretty straight forward as I created a minimum project to reproduce the issue.

environment.ts: contains firebase config

environment.prod.ts: contains firebase config but not using it as I'm building dev version of the web app (ng build --configuration development)

app.module.ts:

@NgModule({
  ...,
  imports: [
    ...
    AngularFireModule.initializeApp(environment.firebase),
    AngularFireAuthModule,
  ],
  ...
})
export class AppModule {}

home.mondule.ts:

const firebaseUiAuthConfig: firebaseui.auth.Config = {
  signInFlow: 'popup',
  signInOptions: [
    {
      provider: firebase.auth.PhoneAuthProvider.PROVIDER_ID,
      recaptchaParameters: {
        size: 'invisible', // other values also give the same auth/internal-error
        badge: 'bottomright',
      },
      defaultCountry: 'IN',
    },
  ],
  tosUrl: '...',
  privacyPolicyUrl: '...',
};

@NgModule({
  imports: [
    ...,
    FirebaseUIModule.forRoot(firebaseUiAuthConfig),
  ],
  declarations: [HomePage],
})

home.page.html:

...
<firebase-ui></firebase-ui>
...

I also tried capacitor-firebase-authentication-demo project but web app itself is not working (giving the same auth/internal-error. also, this doesn't even display recaptcha in web app)

I also tried to use cordova-plugin-firebasex plugin but it clearly states that it's only for Cordova and not for capacitor. it's a non-starter.

The main issue seems to be recaptcha not getting displayed in iOS in simulator. In web app and Android it's getting displayed and firebase phone auth works as expected.

Any help to solve this is highly appreciated.

Answer 1

Currently, NOT in a position to test on actual iPhone. I would like to first run it successfully in iOS simulator.

you need to test on a real device, no other way around it.