I am trying to go through the features available in Azure AD B2C. In this article, let’s try to see how multi factor authentication can be enabled.

Prerequisites

For following all steps in this article, we will need Azure Subscription. If you don’t have an Azure subscription, create a free account before you begin.

We will also need instance of Azure AD B2C instance. We will also need API and Angular App already registered in that instance.

Below is the list of those posts which explains all the steps to get there:

• Create Azure AD B2C instance
• Create user flows in Azure AD B2C
• Protecting Web API using Azure Azure AD B2C and MSAL
• Protecting Angular Web Application using Azure AD B2C and MSAL
• Angular App with Protected Web APIs using MSAL

If you followed all the steps, you will have a complete setup of protected angular application calling protected APIs.

But, we have not enabled multi factor authentication yet. Let’s see what it is and how to enable it.

What is MFA ?

Authentication is the process of verifying the identity of the user. User can confirm the identity of user by presenting some soft of evidence to the system. This evidence can be of any of the below types:

• knowledge – something the user and only the user knows
• possession – something the user and only the user has 
• inherence – something the user and only the user is

Most of us might be familiar with knowledge type of evidence and most common form of this evidence type is username and password authentication.

2FA

Two Factor Authentication (2FA) is a method in which user provides 2 types of evidences. ATM machine applications are most common applications which use 2FA. They authenticate user based on two evidence types – possession of ATM card and knowledge of ATM PIN.

MFA

The Multi Factor Authentication is method of authentication in which user needs to provide 2 or more types of evidence. This means 2FA is subset of MFA.

Most common MFA methods being used now a days are

• Password and OTP on Mobile device or email
• Password and Auth code from Authenticator apps (Microsoft, Google, etc.)
• Password, OTP, and security questions, where user needs to provide answers every time they login.

In this article, let’s try to enable password and OTP combination on our Angular App + API App setup.

New User Flow

The authentication policies in Azure AD B2C can be specified in the form of user flows. So, let’s try to create a new user flow which supports multi-factor authentication.

Login to Azure Portal and search “Azure AD B2C” in the search box in top navigation bar. A panel as shown below will open.

Next select New user flow button and select sign up and sign in flow type from the recommended tab on Create a user flow panel.

On create user flow, we need to specify below inputs:

• Name, this is name of user flow. Give some meaningful name here (e.g. B2C_1_SignUpSignInMFA) and note it down as this needs to be configured in our application configurations.
• Identity providers, select the default email sign up provider
• Multifactor Authentication, enable this option.
• User attributes and claims, here we need to specify the attributes that we want to collect during sign up. Also, in second column of checkbox, check those attributes which we want to be available in the form of token claims.

Once all these inputs are specified, click on Create button.

API Configurations

In the protected web API, go to appsettings.json and change the user flow name The configuration file should be as shown below.

Angular Configurations

In the protected Angular application, go to api-config.ts and update b2cPolicies object to specify the new user flow name. The b2cPolicies object should be as shown below.

Run and Verify

Now, if we run both API project and Angular app project, Angular app will show home page. From there, we can login to the application.

Please note that this setup will not ask phone during sign up.

But when user tries to login first time, user enter email and password. If the username and password is correct, then next dialog is shown where user can enter the phone number and system sends code (or calls). Then user can enter the code to complete the authentication.

Please note that phone number is asked only during first login. From second time, user can directly receive the code after login and password authentication as shown in below diagram.

I hope you enjoyed this article. Let me know your thoughts.