CODEWITHSUNDEEP
firebaseauthenticationionic-frameworkfirebase-authentication
mr5
mr5

Reputation: 281

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

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

enter image description here

--login.html

enter image description here

Upvotes: 27

Views: 36324

Answers (7)

MILAN SADARIYA
MILAN SADARIYA

Reputation: 11

Add domain name in Firebase console => Authentication => Settings => Authorised domains => Add domain: See the screenshots for more details.

Firebase Console Setting Image

Upvotes: -1

shine odigie
shine odigie

Reputation: 298

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

Upvotes: 7

Hareesh
Hareesh

Reputation: 6900

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.

Upvotes: 82

Alex
Alex

Reputation: 4266

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.

Upvotes: 7

XpressGeek
XpressGeek

Reputation: 3687

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

Follow the photo instruction :

enter image description here

enter image description here

Upvotes: 6

Pawan Kumar
Pawan Kumar

Reputation: 762

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.

Upvotes: 15

Suhail Kawsara
Suhail Kawsara

Reputation: 515

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

Upvotes: 0

Related Questions