CODEWITHSUNDEEP
firebaseionic4recaptcha
Oyekeye Sam
Oyekeye Sam

Reputation: 83

ionic firebase phoneAuth without recaptcha on ios

I have an ionic app where i use firebase phone authentication which uses recaptcha. It works fine on android but throws error on ios saying recaptcha can only be run in an http environment. I would like to know if there's a way to perform firebase phone auth without using recaptcha.

    this.recaptchaVerifier = new firebase.auth.RecaptchaVerifier('recaptcha-container',{
      'size': 'invisible'
    });


              let appVerifier = this.recaptchaVerifier;
              this.appService.sendPhoneVerification(phoneNumber,appVerifier) 
              .then(confirmationResult => {
                   //do something
                })

Ios throws error 'RECAPTCHA can only be run in HTTP/HTTPS environment'

Upvotes: 3

Views: 3417

Answers (1)

Code Mickey
Code Mickey

Reputation: 957

Well this is how I solved my issue "'RECAPTCHA can only be run in HTTP/HTTPS environment'".

  1. Install the Firebase Plugin :plugin link
  2. Add the it to your app.module.ts.

  3. Make a platform check: to check if its iOS.

    if (this.plt.is('ios')) { //ios code here } else { //android here }

  4. Now add the following code (iOS platform) to send a verification code sms to the user to verify the phone number. Inject the plugin into the constructor. Create a variable to assign the data from the promise. Phone number should be country code + number. example '+19999999999'

    public signInUser(phoneNum) { this.firebase.verifyPhoneNumber(phoneNum).then((vdata) => { this.refConfirm = vdata; //you can redirect the person to a verification page or show an alert to input verification code. }); }

  5. Now create a token to verify and sign in user with credentials using firebase.

    public verifyPhoneNumber(phoneNumber) { let tokenPhone = firebase.auth.PhoneAuthProvider.credential(this.refConfirm, phoneNumber); firebase.auth().signInWithCredential(tokenPhone).then((verifiedData) => { //whatever you want to do here or redirect the user to home page. }); }

  6. Generate your GoogleService.plist on Firebase & add to your project root directoryenter image description here

  7. You have to add reversed client id instead of normal one.

    enter image description here

  8. This is how I solved it.

Upvotes: 2

Related Questions