Authentication with MSAL.js
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-authenticationStep 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.
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.
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.
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 msalif you are using npm, use the following command.
npm install msalStep 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.
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.
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
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
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.
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.
Now, let’s run the project. execute below command for that
yarn startFinal result
You can see the authentication flow works successfully. You can find the sample project here.
