Working with MSAL and multiple Azure AD accounts in a React SPA

I came across an interesting scenario recently: I was working with a React SPA which used Azure AD for authenticating users, and it needed to work with multiple accounts logged in simultaneously. Specifically, we were building an Azure AD multi tenant application which needed to login to multiple M365 and Azure tenants and allow the user to manage all tenants at the same time.

The good thing was that MSAL v2 does support working with multiple accounts at the same time. So in this post, let's see how we are able to do that in a React SPA with MSAL js.

Before looking at the code, we would need to create a multi tenant Azure AD app which would be used to sign in to the different tenants. Step by step instructions can be found here: https://docs.microsoft.com/en-us/azure/active-directory/develop/tutorial-v2-javascript-spa#register-your-application

Once this is in place, we can start looking at the code itself. I have take the MSAL React tutorial as the starting point for this code and modified it to work with multiple accounts. If you want to build it from scratch, this would be a good starting point: https://docs.microsoft.com/en-us/azure/active-directory/develop/tutorial-v2-react

The very first thing we would need is to setup the configuration for our app: 

	export const msalConfig = {
	auth: {
	clientId: "<client-id-of-multi-tenant-aad-app>",
	authority: "https://login.microsoftonline.com/organizations",
	redirectUri: "http://localhost:3000",
	},
	cache: {
	cacheLocation: "sessionStorage", // This configures where your cache will be stored
	storeAuthStateInCookie: false, // Set this to "true" if you are having issues on IE11 or Edge
	}
	};
	// Add scopes here for ID token to be used at Microsoft identity platform endpoints.
	export const loginRequest = {
	scopes: ["User.Read"]
	};
	// Add the endpoints here for Microsoft Graph API services you'd like to use.
	export const graphConfig = {
	graphMeEndpoint: "https://graph.microsoft.com/v1.0/me"
	};

view raw msalConfig.ts hosted with ❤ by GitHub

You will notice the authority is set to the /organizations end point. This is because our app is a multi-tenant app which would be used to login to different tenants.

With the config, we will now initiate a PublicClientApplication in the index.tsx file:

	import React from 'react';
	import ReactDOM from 'react-dom';
	import App from './App';
	import { PublicClientApplication } from "@azure/msal-browser";
	import { MsalProvider } from "@azure/msal-react";
	import { msalConfig } from "./authConfig";
	const msalInstance = new PublicClientApplication(msalConfig);
	ReactDOM.render(
	<React.StrictMode>
	<MsalProvider instance={msalInstance}>
	<App />
	</MsalProvider>
	</React.StrictMode>,
	document.getElementById("root")
	);

view raw index.tsx hosted with ❤ by GitHub

Now lets get to the most important App.tsx file: 

	import React, { useEffect } from "react";
	import { AuthenticatedTemplate, UnauthenticatedTemplate, useMsal, useMsalAuthentication } from "@azure/msal-react";
	import Button from "react-bootstrap/Button";
	import { InteractionType } from '@azure/msal-browser';
	import ProfileContent from "./components/ProfileContent";
	const App: React.FunctionComponent = () => {
	const request = {
	scopes: ["User.Read"],
	prompt: 'select_account'
	}
	const { login, result, error } = useMsalAuthentication(InteractionType.Silent, request);
	useEffect(() => {
	if(result){
	console.log(result);
	}
	}, [result]);
	const { accounts } = useMsal();
	function handleLogin() {
	login(InteractionType.Redirect, request);
	}
	return (
	<React.Fragment>
	<AuthenticatedTemplate>
	{accounts.map((account) => {
	return <div key={account.homeAccountId}><ProfileContent homeId={account.homeAccountId} name={account.name as string} /></div>
	})}
	</AuthenticatedTemplate>
	<UnauthenticatedTemplate>
	<p>No users are signed in!</p>
	</UnauthenticatedTemplate>
	<Button variant="secondary" onClick={handleLogin}>Sign in new user</Button>
	</React.Fragment>
	);
	}
	export default App;

view raw App.tsx hosted with ❤ by GitHub

There are multiple things happening here. Let's unpack them one by one. 

First, we are using the MSAL react useMsalAuthentication hook to setup the authentication and get the login method which we will use later.

What is also important is the prompt: 'select_account' property in the request which would help us login with a new account when we are already signed in with one account.

The AuthenticatedTemplate and UnauthenticatedTemplate MSAL react components help us display different views when at least one user is logged in or no user is logged in respectively.

Next, lets look at the ProfileContent.tsx component:

	import React, { useState } from "react";
	import { useMsal } from "@azure/msal-react";
	import Button from "react-bootstrap/Button";
	import { ProfileData } from "./ProfileData";
	import { callMsGraph } from "../graph";
	import { AccountInfo } from "@azure/msal-common";
	import { IPublicClientApplication } from '@azure/msal-browser';
	interface IProfileContentProps {
	homeId: string;
	name: string;
	}
	const ProfileContent: React.FunctionComponent<IProfileContentProps> = (props: IProfileContentProps) => {
	const { instance } = useMsal();
	const [graphData, setGraphData] = useState(null);
	const account = instance.getAccountByHomeId(props.homeId);
	const request = {
	scopes: ["User.Read"],
	account: account as AccountInfo
	};
	// Silently acquires an access token which is then attached to a request for Microsoft Graph data
	instance.acquireTokenSilent(request).then((response) => {
	callMsGraph(response.accessToken).then(response => setGraphData(response));
	}).catch((e) => {
	instance.acquireTokenPopup(request).then((response) => {
	callMsGraph(response.accessToken).then(response => setGraphData(response));
	});
	});
	function handleLogout(instance: IPublicClientApplication, homeId: string) {
	const currentAccount = instance.getAccountByHomeId(homeId);
	instance.logoutRedirect({
	account: currentAccount
	});
	}
	return (
	<>
	<h5 className="card-title">Welcome {props.name}</h5>
	{graphData &&
	<ProfileData graphData={graphData} />}
	<Button variant="secondary" className="ml-auto" onClick={() => handleLogout(instance, props.homeId)}>Sign out</Button>
	</>
	);
	};
	export default ProfileContent;

view raw ProfileContent.ts hosted with ❤ by GitHub

Based on the homeId of passed in to this component as a property, we are using the PublicClientApplication.acquireTokenSilent method to first get the access token of the relevant user. 

Once the accessToken is fetched, we are making a call to the Microsoft Graph to get the basic details of the user. We are using the callMsGraph function for this.

The ProfileData component takes in all properties fetched from the graph and displays it.

The handleLogout function uses the PublicClientApplication.logoutRedirect function to log out the specific user.

So after everything is in place, we would be able to work with multiple users logged in simultaneously at the same time.

Hope this helps! 

As always, the code for this post can be found on GitHub: https://github.com/vman/ts-msal-react-tutorial