"Hostname match not found" error in firebase phone authentication(with ionic)

Question

I'm trying to combine "firebase phone authentication" with ionic.

but, stuck in one question.

I keep getting "Hostname match not found" error from

.catch(function (error) { 
  console.log("error! : " +  error); 
});"

of login.ts(below)

import { Component } from '@angular/core';
import { IonicPage, NavController, AlertController } from 'ionic-angular';

import firebase from 'firebase';

@IonicPage()
@Component({
   selector: 'page-login',
   templateUrl: 'login.html',
})

export class LoginPage {
  public recaptchaVerifier:firebase.auth.RecaptchaVerifier;
  constructor(public navCtrl: NavController, public alertCtrl: AlertController) {}

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

  signIn(phoneNumber: number){
    const appVerifier = this.recaptchaVerifier;
    const phoneNumberString = "+" + phoneNumber;

    firebase.auth().signInWithPhoneNumber(phoneNumberString, appVerifier)
      .then( confirmationResult => {

        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 => {
               confirmationResult.confirm(data.confirmationCode)
                 .then(function (result) {

                 }).catch(function (error) {

                 });
            }
          }
        ]
     });
     prompt.present();
   })
   .catch(function (error) {
      console.log("error! : " +  error);           //   <------------The place that informs this error.
   });
 }
}

this error occurred shortly after reCAPTCHA solved

Why does this happen?

--Initializing Firebase

--login.html

Solution 1

This error may occur when you host your app in no ssl certified domain. Then you have to whitelist your domain in firebase console.

Go to Firebase Console -> Authentication -> sign-in-method -> Authorized Domains and add your domain.

By default localhostand any https:// domain is whitelisted.

Solution 2

This error occurs because when Google send otp on Number then it match your website url and your firebase Authentication url is your domain or site address match then it send you otp otherwise error occour.

To resolve the error, go to firebase console.

1. Go firebase console.

2. Click Authentication.

3. Click SIGN-IN METHOD.

4. Scroll down and check Authorized domains.

5. Add your site address where you implement phone Authentication.

Solution 3

You should follow in here:

Note: The domain need to add both: https://www.exam.com and exam.com

To resolve the error, go to firebase console.

1. Go firebase console.

2. Click Authentication.

3. Click SIGN-IN METHOD.

4. Scroll down and check Authorized domains.

5. Add your site address where you implement phone Authentication.

Solution 4

Go to Firebase > Select your Project > Authentication > Sign in method > Scroll Down -> Add your domain under 'Authorize Domain' section.

Follow the photo instruction :

View more solutions

Comments

[Admin]

Unfortunately, my domain("my-project-name.firebaseapp.com") was added automatically in Authorized Domains when i activated Authentication Provider(Phone) in Console...TT

[Vino]

Thanks, This worked for me, I have updated the domain name in authorized domain list and captcha issue solved instantly

[Manmeet Khurana]

I added the domain in the authorized domains but still its not working any other information?

[kip2]

I had to whitelist both www.mydomain.com and mydomain.com

[Braj]

Waited 2 days to figure it out. There was another option to define the domain inside Google Developer for firebase account and that was not working at all. Thanks