I Use Ionic Capacitor 5 Angular Phone Authentication Implementation in that Recaptha is Not Working for Ios and it works in Andriod

Capacitor
1

I use
“@angular/fire”: “^16.0.0”,
“@capacitor/cli”: “5.0.5”,
“@capacitor/ios”: “^5.7.1”,
“@capacitor/android”: “5.0.5”,

code to send otp

import { AngularFireAuth } from ‘@angular/fire/compat/auth’;
import firebase from ‘firebase/compat/app’;
constructor(private http: HttpClient,public ngFireAuth: AngularFireAuth,private storage: Storage) {}

recaptchaVerifier!: firebase.auth.RecaptchaVerifier;
this.recaptchaVerifier = new firebase.auth.RecaptchaVerifier(‘recaptcha-container’, {
‘size’: ‘invisible’, // or ‘normal’ for a visible captcha
‘callback’: (response: string) => {
// reCAPTCHA solved - proceed with phone authentication
// console.log(“reCAPTCHA solved, response:”, response);
// You can use the response token here if needed
},
‘expired-callback’: () => {
// Handle expired reCAPTCHA
console.log(“reCAPTCHA expired. Please solve it again.”);
}
});
}

async sendOtp(phoneNumber: string, recaptchaVerifier: firebase.auth.RecaptchaVerifier) {
return this.ngFireAuth.signInWithPhoneNumber(phoneNumber, recaptchaVerifier);
}

Recaptha Does work in Ios i get Undefined error in console iOS.
Same code works for Andriod
I Observe in ios my url is capacitor://127.0.0.1 which i cannot directly added in firebase → authroized domain. for Andriod it is http://127.0.01 and identity Took API is working there not in ios

1 Like
2

Please update your question with proper code blocks so we can easily read it.

3

Hi @twestrick , Thanks for Responding

My app.module.ts

import { NgModule } from '@angular/core';

import { BrowserModule } from '@angular/platform-browser';

import { RouteReuseStrategy } from '@angular/router';

import { AngularFireModule } from '@angular/fire/compat';



import { environment } from 'src/environments/environment';

import { AngularFireAuthModule } from '@angular/fire/compat/auth';


import { AngularFireModule } from '@angular/fire/compat';




@NgModule({

exports: [],

declarations: [AppComponent, NgVar],

imports: [AngularFireModule.initializeApp(environment.firebase),AngularFireAuthModule ],

providers: [{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy }, File,FileTransfer, FileOpener,Media, SpeechRecognition, Vibration, HTTP], // NativeAudio

bootstrap: [AppComponent, ],

})

export class AppModule {}

Login.Page.ts

import firebase from 'firebase/compat/app';
import { AngularFireAuth } from '@angular/fire/compat/auth';

recaptchaVerifier!: firebase.auth.RecaptchaVerifier;

  constructor(private http: HttpClient,public ngFireAuth: AngularFireAuth,private storage: Storage) {}

 async sendOtp(phoneNumber: string, recaptchaVerifier: firebase.auth.RecaptchaVerifier) {
  return this.ngFireAuth.signInWithPhoneNumber(phoneNumber, recaptchaVerifier);
}

this code work in andriod but ios i was facing issue for recaptha, please feel free to ask if you still need anythig

4

Updated using quote blocks @twestrick

5

My guess is that you’ll need to use a native/Capacitor package for Firebase Auth - Capacitor Firebase Authentication Plugin - Capawesome.

6

@twestrick Hi, I have already tried this extenstion not working not proper logs and cannot find solution in online can you please help me understand why im getting this error after using this plugin

⚡️  [log] - sending otp! undefined
[ FirebaseAuthentication ]  Error Domain=FIRAuthErrorDomain Code=17048 "Invalid token." UserInfo={NSLocalizedDescription=Invalid token., FIRAuthErrorUserInfoNameKey=INVALID_APP_CREDENTIAL}

I have followed this to upload p8 key to firebase console
ios - "Invalid Token" when trying to authenticate phone number using firebase - Stack Overflow)%0AIn