Phone Authentication using firebase in ionic 4

Ionic Framework
1

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:

HTML

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

TS

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

  constructor(public navCtrl: NavController) { }

   ngOnInit() {}

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

  verify() {
    const signInCredential = firebase.auth.PhoneAuthProvider.credential(this.verificationId, this.code);
    firebase.auth().signInWithCredential(signInCredential).then((info) => {
      console.log(info);
      // this.navCtrl.navigateRoot('/home'); 
    }, (error) => {
      console.log(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.

2

Hi,

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

this.verificationId = credential.verificationId;

by

this.verificationId = credential;

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

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

Hope this helps.

3

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.

4

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'

    });

    loading.present();

    

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


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

      this.verificationId = success.verificationId;


      loading.dismiss();

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

    }, phone, 10);      

  }

  else {

    const alert = await this.alertCtrl.create({

      header: "Attention !",

      message: 'phone number is empty !',

      buttons: ['Ok']

    });

    alert.present();

  }

}

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

async phoneLogin() {

const loading = await this.loadCtrl.create({

  spinner: 'bubbles'

});

loading.present();

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

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

  loading.dismiss();


 //  success

}).catch(async () => {

//error

});

}

5

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. https://ionicframework.com/docs/native/firebase-authentication