Firebase Sign In With Your Phone Number

In this article, we discuss how to set up the sign-in process with phone number using firebase in Angular. To set up a firebase Project follow the article. After setup angular project we need to set up the sign-in method phone display in the below video.

After setup the sign-in method phone we need to whitelist our domain so the request can process. To add “Authorize Domain”
Demo Sign In With Your Phone Number in Firebase

Go to Firebase > Select your Project > Authentication > Sign in method > Scroll Down -> Add your domain under ‘Authorize Domain’ section. display in below screenshot.

Let’s implement the phone verification with reCAPTCHA.


Firebase requires users to use reCAPTCHA to prevent abusive use of the API so no automation done on that.
We can also implement an invisible reCAPTCHA.
Here we will be used as a visible version in this example.
1) we need to Injecting the Window Object
For that, we need a window object we need to create a service so we can get the window object in the component.
for that run below command to create service.


ng g service window

After the service creates we need to add the below code to get the window object.


import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class WindowService {

  constructor() { }

  get windowRef() {
    return window;
  }
}

2) Create Login Component for Sign In.
To create a Login component we need to run the below command to create the component.


ng g component login

Now we need to collect the user’s phone number. To send SMS we need to pass the number must be submitted in E.164 format, For India, we need to pass `+91981823XXXX` numbers.
E.164 Numbers: It contains country,area,prefix & line.
For that, we create a PhoneNumber class to set the phone number display in the below code.


export class PhoneNumber {
  country: string;
  area: string;
  prefix: string;
  line: string;

  // E.164 format
  get e164() {
    const num = this.country + this.area + this.prefix + this.line;
    return `+${num}`;
  }

}

Sign-in Using Phone Process describe below.

  • we need to enter the Phone number and verify the reCAPTCHA
  • After submitting the form Firebase sends SMS on that Phone number and it sends the confirmation object.
  • After we need to open the verify step where the user can enter code which he gets on his phone.
  • After click on verify we confirm its the same value which we send if it’s true then firebase send us the user Id of that user.

Below is the code for the login component.


import { Component, OnInit } from '@angular/core';
import { WindowService } from '../window.service';
import * as firebase from 'firebase';

import { environment } from '../../environments/environment';


export class PhoneNumber {
  country: string;
  area: string;
  prefix: string;
  line: string;

  // format phone numbers as E.164
  get e164() {
    const num = this.country + this.area + this.prefix + this.line
    return `+${num}`
  }

}

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css']
})
export class LoginComponent implements OnInit {

  windowRef: any;

  phoneNumber = new PhoneNumber();

  verificationCode: string;

  user: any;

  constructor(private win: WindowService) { }

  ngOnInit() {

    firebase.initializeApp(environment.firebase);

    this.windowRef = this.win.windowRef;
    this.windowRef.recaptchaVerifier = new firebase.auth.RecaptchaVerifier('recaptcha-container')

    this.windowRef.recaptchaVerifier.render()
  }


  sendLoginCode() {

    const appVerifier = this.windowRef.recaptchaVerifier;

    const num = this.phoneNumber.e164;

    firebase.auth().signInWithPhoneNumber(num, appVerifier)
            .then(result => {

                this.windowRef.confirmationResult = result;

            })
            .catch( error => console.log(error) );

  }

  verifyLoginCode() {
    this.windowRef.confirmationResult
                  .confirm(this.verificationCode)
                  .then( result => {

                    this.user = result.user;

    })
    .catch( error => console.log(error, "Incorrect code entered?"));
  }


}



Below is the full code for the login.component.html


<div [hidden]="user" class="mt-5">
  <h1>Sign In with Your Phone Number</h1>

  <label for="phone">Phone Number</label><br>
  <input type="text" [(ngModel)]="phoneNumber.country"  class="input" placeholder="1"    maxlength="2">
  <input type="text" [(ngModel)]="phoneNumber.area"     class="input" placeholder="949"  maxlength="3">
  <input type="text" [(ngModel)]="phoneNumber.prefix"   class="input" placeholder="555"  maxlength="3">
  <input type="text" [(ngModel)]="phoneNumber.line"     class="input" placeholder="5555" maxlength="4">

  <div id="recaptcha-container" class="mt-3"></div>

  <button (click)="sendLoginCode()" class="mt-2 btn btn-primary">Send SMS Login Code</button>

  <div *ngIf="windowRef.confirmationResult">
    <hr>
    <label for="code">Enter your Verification Code Here</label><br>
    <input type="text" name="code" [(ngModel)]="verificationCode">

    <button (click)="verifyLoginCode()" class="btn btn-sm btn-primary">Verify</button>
  </div>

</div>

<div *ngIf="user">
  <h4>You have successfully logged in with your phone number!</h4>

  <p>UserId: {{ user?.uid }}</p>

</div>

Sample message you get in Phone display in below screen cast.

Output display in below Video.

Demo Sign In With Your Phone Number in Firebase

Spread the love
  •  
  •  
  •  
  •  
  • 1
  • 2
  •  
  •