Ionic Angular Firebase Phone Authentication

Introduction

In this lesson, you can learn about how you can implement Phone Authentication using Firebase.

Install firebase using below command:

npm i firebase --save

Setting Up the UI

Here, I use three div container.

• First Div - it is used to hide recapta verifier content

• Second Div - it is used to show the content before an OTP is sent (it contains input to enter phone number)

• Third Div - it is used to show the content after an OTP is sent (it contains input to enter OTP)

phone.page.html

<ion-content class="ion-padding ion-text-center">
 
 <div id="recapta-container" style="display: none;"></div>

 <div *ngIf="!otpSent">
 <ion-note style="font-weight: bold;font-size: medium;"> 
      Enter phone number you want to verify
 </ion-note>
 <ion-item>
 <ion-label position="floating">Phone Number</ion-label>
 <ion-input id="phoneNumber"></ion-input>
 </ion-item>
 <ion-button (click)="sendOtp()" style="float: right;margin-top: 30px;">
      Send OTP
 </ion-button>
 </div>

 <div *ngIf="otpSent">
 <ion-note style="font-weight: bold;font-size: medium;"> 
      Enter OTP sent to {{phoneNumber}}
 </ion-note>
 <ion-item>
 <ion-label position="floating">6 Digit OTP</ion-label>
 <ion-input id="otp"></ion-input>
 </ion-item>
 <ion-button (click)="verifyOTP()" style="float: right;margin-top: 30px;">
      Verify OTP
 </ion-button>
 </div>
 
</ion-content>

Code!!!

Here, we use invisible recapta verifier and two methods.One is for to send OTP and another is for verifying the OTP

phone.page.ts

import { Component, OnInit } from '@angular/core';
import * as firebase from "firebase";

@Component({
 selector: 'app-login',
 templateUrl: './login.page.html',
 styleUrls: ['./login.page.scss'],
})
export class LoginPage implements OnInit {
  otpSent: boolean = false; //OTP sent status
  recaptchaVerifier;
  confirmationResult: firebase.auth.ConfirmationResult;

  phoneNumber: string; //set value after OTP is sent

 constructor() {
 }

 ngOnInit() {
 this.recaptchaVerifier = new firebase.auth.RecaptchaVerifier('recaptcha-container', { 'size': 'invisible' });
 }


 sendOTP() {
 var phNo = (<HTMLInputElement>document.getElementById("phoneNumber")).value;

    firebase.auth().signInWithPhoneNumber(phNo, this.recaptchaVerifier).then(result => {
 this.phoneNumber = phNo;
 this.otpSent = true;
 this.confirmationResult = result;
 }).catch(err => {
 alert(err);
 })
 }

 verifyOTP() {
 var otp = (<HTMLInputElement>document.getElementById("otp")).value;

 this.confirmationResult.confirm(otp).then((data) => {
 alert("Success"); 
 }).catch(err => {
 alert(err);
 })
 }
}

I hope you understand the lesson.Please leave your feedback in comments.Cheers!