Microsoft Login Integration with React

This tutorial teaches you how to build a React single-page app that uses the Microsoft Login and retrieve user information using MSAL.js and Microsoft Graph API for a logged in user.

What is MSAL.js?

MSAL for JavaScript enables client-side JavaScript web applications, running in a web browser, to authenticate users using Azure AD work and school accounts (AAD), Microsoft personal accounts (MSA) and social identity providers like Facebook, Google, LinkedIn, Microsoft accounts, etc. through Azure AD B2C service. It also enables your app to get tokens to access Microsoft Cloud services such as Microsoft Graph.

Prerequisites

• You should have either a personal Microsoft account or a Microsoft work or school account.
• Setup the Microsoft Azure B2C tenant
• Setup the initial react app project locally. (create-react-app)

Install the required client-side libraries

• react-router-dom for declarative routing inside the React app.
• [bootstrap] for styling and common components.
• reactstrap for React components based on Bootstrap.
• fontawesome-free for icons.
• msal for authenticating to Azure Active Directory and retrieving access tokens.
• microsoft-graph-client for making calls to Microsoft Graph.

Add Azure AD authentication

1. Create a new file in the ./src directory named Config.js and add the following code. Replace YOUR_CLIENT_ID_HERE with the application ID from the Application Registration Portal.

Implement sign-in

In this section you'll create an authentication provider and implement sign-in and sign-out.

• Initialize the authentication context by instantiating a UserAgentApplication with a configuration object. The minimum required configuration property is the clientID of your application, shown as the Application (client) ID on the Overview page of the app registration in the Azure portal.

• Now, we can integarte login flow. Your app must login the user with either the loginPopup or the loginRedirect method to establish user context. Here, I am explaining with loginPopup method.

Get an access token to call an API

• In MSAL, you can get access tokens for the APIs your app needs to call using the acquireTokenSilent method which makes a silent request (without prompting the user with UI) to Azure AD to obtain an access token. The Azure AD service then returns an access token containing the user consented scopes to allow your app to securely call the API.
• If you are using an interactive token call, it must match the login method used in your application. (loginPopup=> acquireTokenPopup, loginRedirect => acquireTokenRedirect)

• If the acquireTokenSilent call fails with an error of type InteractionRequiredAuthError you will need to initiate an interactive request. This could happen for many reasons including scopes that have been revoked, expired tokens, or password changes.

Save your changes and refresh the browser. Click the sign-in button and you should see a pop-up window that loads https://login.microsoftonline.com. Login with your Microsoft account and consent to the requested permissions. The app page should refresh, showing the token.

Get user details

In this section you will get the user's details from Microsoft Graph.

• Create a new file in the ./src directory called GraphService.js and add the following code.

• This implements the getUserDetails function, which uses the Microsoft Graph SDK to call the /me endpoint and return the result.
• Click the user avatar in the top right corner to access the Sign Out link. Clicking Sign Out resets the session and returns you to the home page.

Go and change the MSAL Configuration if you want to manipulate the authentication settings for MSAL.JS. You can find the configuration options of MSAL.JS under this link.

Storing and refreshing tokens

However, this token is short-lived. The token expires an hour after it is issued. This is where the refresh token becomes useful. The refresh token allows the app to request a new access token without requiring the user to sign in again.

Because the app is using the MSAL library, you do not have to implement any token storage or refresh logic. The UserAgentApplication caches the token in the browser session. The acquireTokenSilent method first checks the cached token, and if it is not expired, it returns it. If it is expired, it uses the cached refresh token to obtain a new one.

Summarizing

With this GitHub project I am showing you how to authenticate against Azure AD using React. I will improve the current code and provide more samples on that repository. Also Please provide any feedback on this tutorial in the GitHub repository.

Happy coding.

We are a team of expert developers, testers and business consultants who strive to deliver nothing but the best. Planning to build a completely secure and efficient React app? 'Hire ReactJS Developers'.