Ionic 3 Firebase Phone Authentication not working on phone

Here below is the source code I am using for Firebase phone authentication. This is working fine on browser. But once I create .apk file and tests on my android phone it shows me the exception. alert(“Error: SMS not sent”); It means the following line is not working on phone.
firebase.auth().signInWithPhoneNumber(phoneNumberString, appVerifier)

It shows me the error “Error: RecaptchaVerifier is only supported in a browser HTTP/HTTPS environment”

What could be the reason? How can I bypass the captcha on phone.

Source Code:

phone: string;
public recaptchaVerifier:firebase.auth.RecaptchaVerifier;

constructor(public authService: AuthService, public loadingCtrl: LoadingController, public afAuth: AngularFireAuth, public navCtrl: NavController, public navParams: NavParams, public alertCtrl: AlertController) {
}

ionViewDidLoad() {
this.recaptchaVerifier = new firebase.auth.RecaptchaVerifier(‘recaptcha-container’);
}

SignupWithPhone()
{

  let autSer = this.authService;
  const appVerifier = this.recaptchaVerifier;
  if (this.phone.indexOf('+') <= -1) {
     this.phone = "+" + this.phone;
  }

 //alert(this.phone);

  const phoneNumberString = this.phone;

  firebase.auth().signInWithPhoneNumber(phoneNumberString, appVerifier)
  //this.afAuth.auth.signInWithPhoneNumber(phoneNumberString,appVerifier)
  .then( confirmationResult => {
    // SMS sent. Prompt user to type the code from the message, then sign the
        // confirmationResult.verificationId

          let prompt = this.alertCtrl.create({
          title: 'Enter the Confirmation code',
          inputs: [{ name: 'confirmationCode', placeholder: 'Confirmation Code' }],
          buttons: [
            { text: 'Cancel',
              handler: data => { console.log('Cancel clicked'); }
            },
            { text: 'Send',
              handler: data => {
                // Here we need to handle the confirmation code

                  let signInCredential = firebase.auth.PhoneAuthProvider.credential(confirmationResult.verificationId, data.confirmationCode);
                  autSer.loginWithPhone(signInCredential).subscribe(authData => {
                      this.navCtrl.setRoot(HomePage);
                    }, error => {
                      // in case of login error
                      let alert = this.alertCtrl.create({
                        message: error.message,
                        buttons: ['OK']
                      });
                      alert.present();
                    });

              }
            }
          ]
        });
        prompt.present(); 

  })
  .catch(function (error) { 
    alert("Error: SMS not sent");
    console.log("Error: SMS not sent");
    alert(error);
  });

}

Looks like the phone number string has two + based upon your code above

I have updated the code, Thanks. Its working fine on browser as it was working already. It makes the problem on real android device.

Following error is being shown on android device.

Error: RecaptchaVerifier is only supported in a browser HTTP/HTTPS environment

Where is RecaptchaVerifier coming from?

Please see now. I have updated the source code above also.

phone: string;
public recaptchaVerifier:firebase.auth.RecaptchaVerifier;

constructor(public authService: AuthService, public loadingCtrl: LoadingController, public afAuth: AngularFireAuth, public navCtrl: NavController, public navParams: NavParams, public alertCtrl: AlertController) {
}

ionViewDidLoad() {
this.recaptchaVerifier = new firebase.auth.RecaptchaVerifier(‘recaptcha-container’);
}

I don’t know much about Firebase but found this article https://medium.com/@gbrigens/ionic-3-phone-authentication-with-firebase-dbed967e95ef

Did you solve this issue?? I am running into the same problem. I do see the captcha in browser but not on a real device.
Getting error message. Error: RecaptchaVerifier is only supported in a browser HTTP/HTTPS environment

For anyone wondering, the standard way of serving recaptcha on the web does not work on iOS devices (not sure about android), because cordova is served via file:// protocol and not http. I haven’t tried the plugins yet but if you are getting the http/https environment error on devices, that is probably why.

1 Like

Issue solved dear…?

@tommybananas do you have a solution/workaround for this? Thanks in advance.