"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

are you getting country code along with `phoneNumber` from input field? — Hareesh, Oct 05 '17 at 05:16
i inputted country code with input field like this --> 8155555555(55555555 is my phone number). and I even fixed code like this --> const phoneNumberString = "+81-" + phoneNumber; — mr5, Oct 05 '17 at 05:39
still doesn't work.....T T "Hostname match not found" occur..... — mr5, Oct 05 '17 at 06:06

score 75 · Answer 1 · edited May 18 '22 at 18:15

75

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.

edited May 18 '22 at 18:15

Vinod D

3
4

answered Oct 05 '17 at 05:23

Hareesh

6,770
4
33
60

1

Unfortunately, my domain("my-project-name.firebaseapp.com") was added automatically in Authorized Domains when i activated Authentication Provider(Phone) in Console...TT – mr5 Oct 05 '17 at 11:35
1

I had to whitelist both www.mydomain.com and mydomain.com – kip2 Dec 20 '19 at 16:54
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 – Braj Oct 20 '20 at 07:14
3

In Oct 2022 it's `Firebase Console` -> `Authentication` -> **`Settings`**-> `Authorized Domains` – Touré Holder Oct 28 '22 at 02:25

score 15 · Answer 2 · edited Mar 12 '18 at 10:28

15

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.

Go firebase console.
Click Authentication.
Click SIGN-IN METHOD.
Scroll down and check Authorized domains.
Add your site address where you implement phone Authentication.

edited Mar 12 '18 at 10:28

Pang

9,564
146
81
122

answered Mar 12 '18 at 08:37

Pawan Kumar

734
9
14

1

Thanks, This worked for me, I have updated the domain name in authorized domain list and captcha issue solved instantly – Vino Sep 22 '18 at 15:22
I added the domain in the authorized domains but still its not working any other information? – Manmeet Khurana Nov 29 '19 at 21:39

score 7 · Answer 3 · answered Sep 14 '20 at 04:51

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.

Go firebase console.
Click Authentication.
Click SIGN-IN METHOD.
Scroll down and check Authorized domains.
Add your site address where you implement phone Authentication.

score 6 · Answer 4 · answered Jul 29 '22 at 11:24

6

For new firebase Dashboard

Go to Firebase > Select your Project > Authentication > Settings and under domain you will find Authorise Domains.

Input the domain you want to add and save

answered Jul 29 '22 at 11:24

shine odigie

156
1
6

score 5 · Answer 5 · answered Jun 10 '20 at 15:16

5

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

Follow the photo instruction :

answered Jun 10 '20 at 15:16

XpressGeek

2,889
3
23
27

score 0 · Answer 6 · answered Oct 11 '17 at 01:37

0

You can find your answer in this link: https://stackoverflow.com/a/44091221/6120430
Unfortunately, phone authentication using Firebase JS library will not work in a Cordova/Ionic...

answered Oct 11 '17 at 01:37

Suhail Kawsara

466
3
11

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

6 Answers6

Linked

Related