Firebase Phone Authentication Login With Ionic 5

I’ve looked everywhere for a guide on how to do this and could not find one on how to exactly get this done. So I guess I’ll just write about it.

RYMS
RYMS
Aug 5, 2020 · 6 min read
Image for post
Image for post
Photo by Rich Smith on Unsplash

I have to be honest. This task seems to look easy but it was quite a while for me to understand how to do it. From an Ionic development perspective, the tricky part here is to figure out the Captcha part, which took me awhile to figure out but I eventually did.

Firebase Phone Authentication was just very recently made available in my country, so I’m quite excited about this. In this article, I will integrate the Firebase Phone Authentication with an Ionic Angular Progressive Web App (PWA).

This is a simple step by step guide on how to create a Firebase Phone Authentication Login with Ionic 5 and hopefully everyone reading this succeeds in creating a phone based authentication login with your Ionic 5 progressive web app.

Read on!

Step 0: Make sure you are familiar with Ionic 5 and Firebase

Not to discourage, but if you are brand new to Angular and Ionic, it will be a little bit difficult to follow. Having said that however…

If you are unfamiliar with Ionic 5, it would be a good idea to have a look at Ionic 5 for your future development because it is basically building an app with HTML, TypeScript and CSS and the unique feature about building hybrid apps with Ionic 5? It works everywhere whether as a Progressive Web App or as an Android, iOS and even a fully fledged computer program.

Coupled with Firebase and you don’t even have to worry about the back end because all of this is taken care off for you. I’ve written a few articles about the Ionic Framework and Firebase by Google, so you can refer to my past articles about both.

To find out about Ionic Framework and Firebase, the following are links to their official websites.

Step 1: Make sure you have Firebase configured in your Ionic 5 project

The first thing to do is to install Firebase in your Ionic Application. To do this, simply run the following command in your command prompt:

npm install firebase

That’s it. This will install Firebase for you.

Step 2: Create a Firebase project

I’ve written about this before, so all you to do is just follow the instructions on how to install, setup and initialize a Firebase project from this article that I have written previously:

Just in case its too long for you to read, here’s an excerpt from the article above that I wrote:

Setting up Firebase

  1. Click ‘Add Project’. Give your project a name and click ‘Continue’
Image for post

2. The first thing you will be asked is to add analytics. This is up to your discretion if you want to add analytics or otherwise. If you do not want to, just uncheck this part.

3. Firebase will automatically create a project for you, this will take about 2 minutes.

4. Once this is done, you will need to add an application to this project. Ionic Angular projects are essentially Angular projects, therefore, create a web based project

5. You will then be presented with a bunch of configuration keys. Copy and paste this keys, we will need this later. Click on Done.

6. Go to Authentication tab, click on ‘Sign in method’ and make sure you enable phone. I would recommend adding your own phone number for testing and also add a simple code to remember so that you do not have to wait for a code each time.

7. BACK TO YOUR IONIC PROJECT, add the configuration keys from Step 5 into environment.ts like so:

Image for post
Image for post

8. Initialise your Firebase project inside your app.module.ts file

import * as firebase from 'firebase';
import { environment } from '../environment/environment';
....firebase.initialiseApp(environment.firebaseConfig);

Step 3: Add a global call to window ref

You have to create a service to call windows globally. After creating a window service, you will need to create a windowRef (credits for this solution given to Fireship Youtube channel). This was the tricky part but thanks to Fireship, I was able to find the solution in their video.

I recommend you guys to subscribe to the Fireship Youtube channel for more Angular and Firebase related development:

So, all you need to do to get the windows solution is to just add the following in a service that you have created:

In window.service.ts

get windowRef(){    return window;
}

Step 4: Add the following lines in ionViewWillEnter() to make sure it is the first things loaded when the page is ready. You will also need to create a function to login:

In home.page.ts, add the following:

import * as firebase from 'firebase';import {WindowService} from '../service/window.service';...windowRef:any;prefix:any;
line:any;
verifCode:any;...constructor(public windowService : WindowService){}
//Initiate windowRef from WindowService
ionViewWillEnter(){ this.windowRef=await this.windowService.windowRef; this.windowRef.recaptchaVerifier=await new firebase.auth.RecaptchaVerifier('recaptcha-container'); await this.windowRef.recaptchaVerifier.render()}sendLoginCode(){//Make sure phone number in e164 format const num=this.prefix.toString()+this.line.toString(); const appVerifier=this.windowRef.recaptchaVerifier; firebase.auth().signInWithPhoneNumber(num,appVerifier)
.then(result=>{
this.windowRef.confirmationResult=result; }).catch(err=>console.log('err1',err))}submitVerif(){ this.windowRef.confirmationResult.confirm(this.verifCode)
.then(async result=>{

//If the result is successful...
})
.catch(err=>{
console.log('err2',err)
});

Step 5: Create a ‘recaptcha box’ div and create a button to execute a function to call Firebase to send an SMS to user’s phone number

<ion-grid>
<ion-row>
<ion-col size='3' style="font-size:0.8em;font-weight:bolder;"> <strong> PRE FIX </strong> </ion-col> <ion-col size='9' style="font-size:0.8em;font-weight:bolder;"> <strong> PHONE NUMBER </strong> </ion-col> </ion-row><ion-row> <ion-col size='3'> <ion-input [(ngModel)]="prefix" placeholder="6012" type="tel" maxlength='4'></ion-input> </ion-col> <ion-col size='9'> <ion-input [(ngModel)]="line" placeholder="2345678" type="tel"></ion-input> </ion-col></ion-row>
<div class='ion-center' style="position:relative;z-index:10;width:100%;margin-left:2em;margin-right:auto;">
<div id="recaptcha-container"></div> </div></ion-grid><ion-button (click)="sendLoginCode()" color="primary" style="z-index:4;width:100%;"> <ion-icon name="chevron-forward" slot="end"></ion-icon>
SUBMIT
</ion-button>

Step 6: Verify the user’s verification code

If all is well, the user should receive an SMS from Firebase. This SMS will contain a verification code. The user will input this code into our application and we need to verify this code.

To receive the code in HTML, just enter a simple ion-input box into the HTML and then in the TS file we will need to end over the verification code to Firebase to verify.

Please note, in this example, I am using the type="number" instead of password, but its really up to you what type of input you want, this really depends on your creativity, maybe you could create several different boxes that would eventually be combined later, just some ideas, but the SMS will definitely contain numbers that the users will then need to enter into the input box.

So, with that in mind, in home.page.html

<ion-input [(ngModel)]="verifCode" type="number">
</ion-input>
<ion-button (click)="verifyCode()">Verify Code</ion-button>

If the verifyCode() function is successful, your should be able to verify your user. Just a quick note: Google gives out 10,000 SMS for free for you to verify your user. Anything beyond 10,000 is at your cost charged through your Firebase Blaze plan.

AND THAT’S IT, you should be able to verify your user and if the user is new, you should be able to automatically create a new user in your authentication list in Firebase.

DO give it a try folks!

Selamat Mengaturcara

The Startup

Medium's largest active publication, followed by +773K people. Follow to join our community.

Thanks to Trey Huffine

RYMS

Written by

RYMS

Husband, son, father & multi award winning app developer. 😊❤️ TypeScript and JavaScript. Proud to be Malaysian. Sometimes I tweet @razmans

The Startup

Medium's largest active publication, followed by +773K people. Follow to join our community.

RYMS

Written by

RYMS

Husband, son, father & multi award winning app developer. 😊❤️ TypeScript and JavaScript. Proud to be Malaysian. Sometimes I tweet @razmans

The Startup

Medium's largest active publication, followed by +773K people. Follow to join our community.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store