msal-react: Automatically sign in users and get App Roles

The msal-react library was released earlier this year for production use, providing a great set of tools for authenticating users with Azure AD. msal-react is based on the well-known msal-browser library and reduces boilerplate code by providing some valuable hooks. In this article, we will see how users already signed into an Azure AD account can be authenticated automatically when entering your React application. Further, we will see an example of how to acquire and provide access tokens with all API calls using axios. Finally, we’ll create an admin role for our application and provide the role with the access token. Typescript is used throughout this article, but the concepts would of course apply to JavaScript as well.

Automatically sign in users

The current Microsoft provided tutorial for the msal-react library describes how to manually sign in users using Azure AD with “Sign In” and “Sign Out” buttons: https://docs.microsoft.com/en-us/azure/active-directory/develop/tutorial-v2-react. However, as many businesses use SSO, it would be great to automatically sign in users when entering your application. Assuming you have already followed the Microsoft tutorial, automatic sign-in can be achieved by using the useMsalAuthentication hook.

In App.tsx simply import useMsalAuthentication:

Inside the App function, call useMsalAuthentication:

Users will now be authenticated automatically when entering the application. The user is redirected to a sign-in page if not already logged into an account.

Add access token to all API calls using axios

Typically, you want to send the access token acquired in the front-end application to your back-end services. As the token will eventually expire, it would not be a good idea to temporarily store the token locally before sending it with each API call. This can be solved by intercepting the API calls, getting a valid token on the fly, and assigning it to the Authorization header. In order to minimize duplication, a component intercepting axios API calls can be wrapped around the application’s root component.

Create a component named RequestInterceptor.tsx and add the following code:

In App.tsx, wrap your root component inside the AuthenticatedTemplate in the newly created RequestInterceptor component:

Now all API calls in any child component will be intercepted, a token will be acquired and added to the Authorization header.

Adding an App Role and providing it with the Access Token

Commonly you want to create roles for authorization within your application. We’ll quickly see how you can create a new role (Admin in this case) and provide it inside the access token to be processed by your back-end service.

Navigate to Azure AD. First, we will create a new role:

1. Open the App Registration for your Back-end service.
2. Navigate to App Roles
3. Add Role:
   Display Name: Admin
   Description: <Your description>
   Allowed member types: User/Groups, Applications
   Value: AppName.Admin

Now we will need to add an RBAC group to our newly created role:

1. Open the Enterprise Application of your Back-end service
2. Navigate to Users and groups
3. Add user/group:
   Display Name: <Your Admin RBAC Group>
   Object Name: Group
   Role Assigned: Admin

Finally, we need to add an API permission in the front-end application:

1. Open the App Registration for your Front-end application
2. Navigate to API permissions
3. Add permission:
   API / Permission name: AppName.Admin
   Type: Application
   Description: Admin
   Grant admin consent

Navigate back to the source code for your front-end application and modify the loginRequest object in authConfig.ts:

Roles should now be added to the access token:

I hope you enjoyed this short guide. Good luck with your upcoming projects!