Phone Authentication using firebase in ionic 4

I am trying to perform phone authentication(i,e OTP) using firebase . Now i am receiving the OTP from the firebase , But i want verify that OTP, And after successful verification it should to route another page called home .I am unable to perform to verification process.

Below is my CODE:


<ion-content padding>
    <ion-label position="floating">Phone</ion-label>
    <ion-input type="text" [(ngModel)]="phone"></ion-input>
  <ion-button expand="full" (click)="send()">Send</ion-button>
      <ion-label position="floating">Enter OTP</ion-label>
      <ion-input type="text" [(ngModel)]="code"></ion-input>
  <ion-button expand="full" (click)="verify()">Verify</ion-button>


import { Component, OnInit } from '@angular/core';
import { NavController } from '@ionic/angular';
import * as firebase from 'firebase';
  selector: 'app-login',
  templateUrl: './',
  styleUrls: ['./'],
export class LoginPage implements OnInit {
  verificationId: any;
  code = '';
  phone: number;

  constructor(public navCtrl: NavController) { }

   ngOnInit() {}

  send() {
    const tell = '+91' +;
    (<any> window).FirebasePlugin.verifyPhoneNumber(tell, 60, (credential) => {
      this.verificationId = credential.verificationId;
    }, (error) => {

  verify() {
    const signInCredential = firebase.auth.PhoneAuthProvider.credential(this.verificationId, this.code);
    firebase.auth().signInWithCredential(signInCredential).then((info) => {
      // this.navCtrl.navigateRoot('/home'); 
    }, (error) => {

While surfing i got this solution ,Here they are performing verification of the CAPTCHA also, I don’t want this functionality. I just want OTP verification.


I had an auth problem only with iOS verifying OTP code. I’ve fixed changing:

this.verificationId = credential.verificationId;


this.verificationId = credential;

First, you should check verificationId or platform similar like this:

if (credential.verificationId)
console.log("Android credential: ", credential.verificationId);
console.log("iOS credential: ", credential);

Hope this helps.

This is not Working. i have googled a lot but not able to find solution.
phone auth with firebase is not working in ionic 4+. thanks.

Hi, you must to use firebase-X from ionic documentation.

this is the method to verify phone number.

//verificationId: any;
async verifyPhone() {

  if(this.phoneNumber) {

    const loading = await this.loadCtrl.create({

      spinner: 'bubbles'




    let phone = '+223' + String(this.phoneNumber);

    this.firebaseX.verifyPhoneNumber((success: any) => {

      this.verificationId = success.verificationId;


    }, (error) => {alert(error); loading.dismiss();

    }, phone, 10);      


  else {

    const alert = await this.alertCtrl.create({

      header: "Attention !",

      message: 'phone number is empty !',

      buttons: ['Ok']





and this method for login
//verificationCode is the code sent from firebase

async phoneLogin() {

const loading = await this.loadCtrl.create({

  spinner: 'bubbles'



let signCredential = firebase.auth.PhoneAuthProvider.credential(this.verificationId, String(this.verificationCode));

firebase.auth().signInWithCredential(signCredential).then(async (info) => {


 //  success

}).catch(async () => {




I’ve tried to using firebase-x but its pretty confusing to manage and setup the plugin. So i had to use firebase authentication plugin.