Authentication with MSAL.js
By: Ayesh Nipun
Tags: Azure B2c, Authentication, Msaljs, Reactjs

MSAL.js is a powerful library that is used in JavaScript for authentication. You can use it to authenticate users using Azure Active Directory with work and school accounts (AAD), and Microsoft personal accounts (MSA). Also, you can use MSAL.js with your Azure B2C and authenticate users via social identity providers like Facebook, Google, Linked In…etc.

MSAL.js is a pure JavaScript library. If you are using a framework like React, Vue, or angular, Either you have to customize the code into the relevant framework or you have to use a wrapper. As an example for React.JS, you can use react-aad-msal. Those wrappers have all the configurations predefined. We just need to get the code and add those to our project. But in this article, I’m gonna show you how you can use MSAL.js with your react js project.

Requirements

A working Azure AD B2C tenant.

If you don’t have an Azure B2C tenant, follow this documentation from Microsoft to create a new tenant.

2. A ReactJS project

You can use the following command to create a fresh ReactJS project

npx create-react-app react-authentication

Step 1 — Create an application in Azure B2C

Head over to the B2C tenant. In the left panel, navigate to the “App registrations” tab. From there, you can register a new application. Here’s how I registered my application.

App registration

Once you register your application, you will be navigated to the overview page of the application. From there, you need to copy the Application (client) ID.

Copy the clientID

Step 2 — Create a user flow in Azure B2C

In the left panel, head over to the “User flows” section. There, you can add a new user flow. I’m gonna add a sign in the user flow.

User flow creation.

Now all the configurations in Azure B2C are done. Next, let’s see how we can configure our front end.

Step 3 — install MSAL.js to the project

if you are using yarn, use the following command.

yarn add msal

if you are using npm, use the following command.

npm install msal

Step 4 — Add B2C variables to the .env file

I’m using a .env file to keep my variables. So I’m gonna dd those into my .env.development file.

Here we have the client id of the application that I registered earlier. And the redirect URL which I added when registering the application. Also, you can see a variable called REACT_APP_AUTHORITY. This is something that you have to provide for the front end to identify the user flow. You can copy the value, and then change the user flow name and the tenant name.

In the front end, we gonna use Context for storing these authentication details. So we need to initialize a context, and we need to do the MSAL configurations also.

Step 5 — Create a Context for authentication.

Create a file called auth-context.js in your project.

auth-context.js

In this file, we don’t need to do that much work. We need to initialize the context. You can see how I did it with the below code.

auth-context.js

Step 6 — Add a file to create an MSAL instance

Before using MSAL, we need to create an object with MSAL properties, to perform MSAL functions. And we need to add our environment variable to this MSAL object/instance. So I’m gonna create a new file called auth-utils.js

auth-utils.js file

And in this file, we need to initiate the MSAL object. I did it as follows.

This code is provided in msal.js examples. You can get the code from there but will have to do some modifications.

As you can see, I have an instance called “msalApp” initiated. This instance is used to perform the MSAL functions like login, logout..etc.

Step 6 — Creating the auth provider

In this file, we will add definitions to MSAL functions, then we gonna add those functions to the context. So, I’m gonna create a file called auth-provicder.js

auth provider file

And here is the code. This code also you can find from MSAL examples.

Here we have defined

isAuthenticated — Check whether the user is authenticated or not onSignIn() — To perform the sign-in process onSignOut() — To perform the sign-out process account — A state variable to get the account details error — Another state variable to get any error messages

And finally, we have used the auth context that we created earlier, to inject those values into the context.

With those steps, we have finished all the configurations. But we are not done yet.

Step 7 — Creating the Login component

Now we need a login form. So we gonna create it now.

login page

I added two buttons there. To log in and logout. And also I added a section to display the user’s name after login. Here is my component. And note that you need to define the contextType to use those MSALfunctions.

Step 8 — Import Login component and export main component with the AuthProvider

We have successfully created our AuthProvider in step-6. Now we need to export our main component with this provider to use those functions and variables. In my case, I’m gonna modify, my App component since my main component is App.

App.js

Now, let’s run the project. execute below command for that

yarn start

Final result

You can see the authentication flow works successfully. You can find the sample project here.

References