"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

Answer 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.

Add any subdomain that you are currently using to test this app.

Answer 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.