How to add two factor authentication (2fa) in angular 7 using firebase

In this tutorial, we are going to cover Two Factor Authentication ( 2fa ) in Angular 7 using Firebase. Firebase is a mobile and web app development  platform that provide us lots of tools and services to help us develop high quality mobile and web applications. But now in this tutorial, we will use Phone Authentication service to add two factor authentication in angular 7 application.

So, first-of-all, we will create a project in firebase, then we will create an Angular 7 app using visual studio code, then we will integrate firebase firebase project with Angular 7 project, and then we will write some code for two factor authentication.

Two Factor Authentication ( 2fa ) in Angular 7 using Firebase

Let’s start to add two factor authentication ( 2fa ) in Angular 7 using firebase in step by step.

Step # 1: Create a firebase project

So, in this step, we will create a firebase project. To do this, just click here to go to firebase, then click on “GO TO CONSOLE” link from top menu, and then click on “Add project” and then you will see a new popup as you see below.

Now, enter the name in “Project name” and then check the “I accept ….” checkbox and then finally click on “Create project” button as you see above. Then click on “Continue” button and then you will see your project firebase project is ready.

Now, go to settings icon from sidebar and then click on “Project settings” as you see below.

And now copy the “Web API Key”. We will use this key in project integration.

Step # 2: Create an Angular 7 project

Now, in this step, we will create a new angular 7 project using visual studio code. So, open visual studio code and then go to terminal and then write this below command to create a new angular 7 project.

=> ng new myApp

After some time, this above command will create an angular 7 application. So, now go to project directory and then go to app folder and then create a new component using this below command.

=> ng g c passwordless-auth

Now, angular 7 project is ready.

Let’s move next

Step # 3: Integrate Angular 7 Project with firebase

So, go to angular 7 project folder directory and then go to “package.json” file and then copy these two lines of code ( line # 11, 12) and then paste in the dependencies as you see below.

Now, go to terminal and then run this below command.

=> npm install

This above command will install all the firebase dependencies.

Now, go to app.module.ts file and then copy the below code (line # 8,9,10,13, 24,25) and then paste into the  app.module.ts file as you see in below file.

Now, go to environments folder under the app folder and then open the “environment.st” file and then write the code as you see below.

Note: – replace the web api key with yours.

Finally, angular 7 project and firebase project integration is completed.

Step # 4: Write some component code for two factor authentication

Now, in this step, we will write some code for two factor authentication in our component. So, go to component which we have created previously and then write click on the component folder and then click a “New File” with the name “WindowService”. Now, write the code as you see in below file.

Now, open passwordless-auth.component.html file and then write the code as you see in below file.

Now, open passwordless-auth.component.ts file and then write the code as you see in below file.