• About Me
  • Contact Us
  • Privacy Policy
  • Terms and Conditions
  • Advertise / Sponsor

DOTNET DETAIL

Learn Microsoft .NET Technologies

  • Home
  • Tutorials
    • Angular
      • Angular 5
      • Angular 6
    • ASP.NET Core
    • Azure
    • React
    • Vue
  • Books
  • Courses
  • Cloud Hosting
  • Interview Questions
You are here: Home / Angular / How to add two factor authentication (2fa) in angular 7 using firebase

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

February 3, 2019 by mebakar1005 Leave a Comment

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.

See also  How to add Pie-Chart using Angular 6 & Asp Net Core web API

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.

Two Factor Authentication (2fa) in Angular 6 using Facebook Account Kit
Drag and Drop in Angular 6 using ASP.NET Core Web API

Related

Filed Under: Angular, Angular 5, Angular 6, Angular 7, Authentication and Authorization Tagged With: 2FA, Angular 7, Firebase, Two Factor Authentication

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Buy me a coffeeBuy me a coffee

Jobs

Dotnet Jobs

Join Us

Join Us

Subscribe to Blog via Email

Enter your email address to subscribe.

Recent Posts

  • Realmente Hace Él En absoluto como yo ?
  • Fiscal Planning — What You Need to Know
  • Organization Strategies for Good Business Success
  • Contemporary Business The usage
  • Deciding on a Document Management Program
  • Most Popular Dating Apps For Black Gay – Remanufactured Online Hookup for Gays
Copyright © 2022