Two Factor Authentication (2fa) in Angular 6 using Facebook Account Kit

In this tutorial, we are going to cover Two Factor Authentication ( 2fa ) in Angular 6 using Facebook Account Kit. Using facebook account kit, you can authenticate your users by their phone numbers (SMS or Whatsapp), or by their Email Addresses.

First-of-all, we will create facebook developer account, and then we will create an app in developer account, and then we will customize our app, and then we will integrate facebook account kit with Angular 6 Application.

Facebook Account Kit help us to add two factor authentication ( 2fa ) in angular 6 application with very small and easy steps.

Two Factor Authentication (2fa) in Angular 6 Application using Facebook Account Kit.

Let’s start to add two factor authentication ( 2fa ) in angular 6 using facebook account kit in step by step.

Step # 1: Create Facebook Developers Account with APP

In this step, we will create facebook developers account. So, click here to create facebook developers account. After clicking, you will see the page as you see below screenshot.

Now, click on “Account Kit for Web and Mobile Web” link, and then after that click on “Log in to Facebook” and then after that click on “Create a New App” link under the Select an App or Create a New App heading as you see below screenshot.

After clicking the “Create a New App” button, you will see a new popup window with the name “Create a New App ID”. Now, enter the Display Name and then Contact Email.

Now, click on “Choose Your App Settings” button under the heading 2. Now, click on the app which you have created now (E.g. 2fAngularAuthentication) and it will open the dashboard of application.

Now, scroll down the page and then you will see “Add Product” area. So now, click on “Account Kit” setup button and then choose “Web” option as you see in this below screenshot.

Step # 2: Integrate Account Kit with Angular 6 application.

Now, in this step, we will integrate Account Kit code with Angular 6 application. To do this, first-of-all, we will install the ng2-account-kit plugin in our application. So, run this below command in terminal to install ng2-account-kit plugin.

Import Account Kit Javascript SDK

Now, we need to import Account Kit Javascript SDK in our application’s heading tag as you see below in the below code file’s line # 7.

Initialize Account Kit

Now, in this step we will initialize account kit. We need to have appId. So, go to facebook developers account, then go to app which you have created in this tutorial (E.g. 2fAngularAuthentication), then go to Settings, then go to Basic and then copy the App ID as you see in below screenshot.

Now, go to index.html file and then write the Account Kit Initialization code as you see in below code file’s line # 8 to 18.

Note:- replace the App ID with your App ID.

Integrate Account Kit login function for Service

Now, in this step, we will add login function for our typescript(ts) file. So, go to component’s ts file where you want to show login, then copy this below function and then add ts file.

Note: – this below function is for two factor authentication using sms.

If you want to add two factor authentication using email, then write this below function.

Add Html code for calling this function

Now, add this below button code in html to call login function.

Add domain in facebook developers account’s app

Now, go to facebook developers account again, then go to app which you have created in above, then go to settings tab from sidebar, and then select Basic tab and then add the domain name as you see in below screenshot.

Note: – If you are working on localhost, then add localhost.

Now, finally run your project and then click on button “Two Factor”, and then you will see the output as you see in the below screenshot.

Note: – If you want to change UI of login popup, then go to facebook developers account app, then go to Account Kit from sidebar and then go to settings. Now, there you will see lots of options to customize login popup.