Implement Authentication Flows Using Azure Msal React

[reboottime]

About

This article is to track implementing Azure Ad b2c authentication flow in react application.

Content

• Core Elements in Msal React Library
• Common Practices
• References

Credits to Claude on helping me write more clearly

[reboottime]

Core Concepts

MSAL React Library

The MSAL React library (@azure/msal-react) is a wrapper around the Microsoft Authentication Library for JavaScript (@azure/msal-browser) that enables authentication in React Application, see 1. It allows developers to acquire security tokens from the Microsoft identity platform to authenticate users and access secured web APIs, see 2

Core Elements in MSAL React Library

Component	Description
MsalProvider	MSAL React is built on the React context API, and all parts of your app requiring authentication must be wrapped in the MsalProvider component. You first initialize a PublicClientApplication instance and pass it as a prop to MsalProvider.
AuthenticatedTemplate	A component that only renders its children if a user is authenticated.
UnauthenticatedTemplate	A component that only renders its children if a user is not authenticated.
MsalAuthenticationTemplate	A component that will render its children if a user is authenticated or attempt to sign a user in automatically. It accepts parameters for interaction type, authentication request, and custom error/loading components.
React Hooks	MSAL React provides hooks like useMsal and useMsalAuthentication to access authentication context and functionality within your components.

[reboottime]

Common Requirements and Solutions

This article assumes your familiarity with basic authentication related concepts and redirect URI configuration, so msalConfig setup details are not covered here

Setup Msal Provider for your React Single Page Application

import { PublicClientApplication } from "@azure/msal-browser";
import { MsalProvider } from "@azure/msal-react";
import { QueryClientProvider } from "@tanstack/react-query";
import { BrowserRouter } from "react-router-dom";

import { msalConfig } from "@app/config/auth";


const msalInstance = new PublicClientApplication(msalConfig);

export default function AppProviders({ children }: Props) {
  return (
    <MsalProvider instance={msalInstance}>
        <BrowserRouter basename="/">{children}</BrowserRouter>
    </MsalProvider>
  );
}

interface Props {
  children: React.ReactNode;
}

Configure the SPA Routes

Standard app architecture separates login screen from protected application content. This pattern is typically implemented with routes such as:

• /login for login in screen ( if you are not using the popup mode)
• /* for the dashboard after user has signed in

The solution route configuration solution could be expressed as below

import { EventType, type IdTokenClaims } from "@azure/msal-browser";
import {
  AuthenticatedTemplate,
  UnauthenticatedTemplate,
  useIsAuthenticated,
  useMsal,
} from "@azure/msal-react";
import { lazy, Suspense, useEffect } from 'react';
import { Navigate, Route, Routes } from "react-router-dom";
import FullPageLoading from "@ui/components/fullpage-loading";
import AppLayout from "@app/setup/AppLayout";

const DashboardRoute = lazy(() => import("./pages/dashboard"));
const LoginRoute = lazy(() => import("./pages/login"));
const ReportsRoute = lazy(() => import("./pages/reports"));


export default function App() {
  // logic on listening and updating app authentication status will be discussed later

  return (
    <Suspense fallback={<FullPageLoading />}>
      <UnauthenticatedTemplate>
        <Routes>
          <Route path="/" element={<Navigate to="/sign-in" />} />
          <Route path="/sign-in" element={<LoginRoute />} />
        </Routes>
      </UnauthenticatedTemplate>
      
      <AuthenticatedTemplate>
        <Routes>
          <Route  element={<AppLayout />} >
            <Route element={<Navigate to="/dashboard" />} path="/" />
            <Route element={<DashboardRoute />} path="/dashboard/*" />
            <Route element={<ReportsRoute />} path="/reports" />
            <Route element={<Navigate to="/dashboard" />} path="*" />
          </Route>
        </Routes>
      </AuthenticatedTemplate>
    </Suspense>
  );
}

This routing structure directs authenticated users to the dashboard while redirecting unauthenticated users to the login screen.

Setup Logic to listen app authentication status change

After configuring route UI based on authentication status, we need additional logic to manage MSAL events and maintain user context for proper API access and session persistence throughout the application.

// Constants for authentication events
const SUCCESS_EVENT_TYPES: EventType[] = [
  EventType.LOGIN_SUCCESS,
  EventType.ACQUIRE_TOKEN_SUCCESS,
  EventType.SSO_SILENT_SUCCESS,
];

const FAILURE_EVENT_TYPES: EventType[] = [
  EventType.LOGIN_FAILURE,
  EventType.ACQUIRE_TOKEN_FAILURE,
  EventType.SSO_SILENT_FAILURE,
  EventType.LOGOUT_FAILURE,
];

function App() {
  const { instance, inProgress } = useMsal();
  const isAuthenticated = useIsAuthenticated();

  useEffect(() => {
    // Set up event callback
    const callbackId = instance.addEventCallback(
      (event: { eventType: EventType } & any) => {
        if (SUCCESS_EVENT_TYPES.includes(event.eventType) && event.payload) {
          const { account, idTokenClaims } = event.payload;
          const idToken = idTokenClaims as IdTokenClaims & {
            acr?: string;
            tfp?: string;
          };
          if (
            account &&
            [idToken?.acr, idToken?.tfp].includes(
              b2cPolicies.names.signUpSignIn
            )
          ) {
            instance.setActiveAccount(account);
          }
        }
      }
    );

    // Handle account setup for authenticated users
    if (isAuthenticated && inProgress === "none") {
      const activeAccount = instance.getActiveAccount();
      const accounts = instance.getAllAccounts();
      if (!activeAccount && accounts.length) {
        instance.setActiveAccount(accounts[0]);
      }
    }

    // Cleanup function
    return () => {
      if (callbackId) {
        instance.removeEventCallback(callbackId);
      }
    };
  }, [instance, inProgress, isAuthenticated]);

  //  The UI logic described in Configure the SPA Routes  session
}

Login Screen Logic Design

While the previous sections establish the routing structure, users must manually initiate the authentication process from the /sign-in page.

import { useState } from "react";
import { useMsal } from "@azure/msal-react";
import { cn } from "@repo/ui/cn";
import { Button } from "@ui/components/button";
import { loginRequest } from "@setup/config/auth";

export default function LoginPage() {
  const { instance, inProgress } = useMsal();
  const [isLoading, setIsLoading] = useState(false);
  const isAuthenticating = isLoading || inProgress !== "none";

// where user initiates the login function
  const handleLogin = async () => {
    if (isAuthenticating) return;
    setIsLoading(true);
    try {
      await instance.loginRedirect(loginRequest);
    } catch (error) {
      console.error("Login failed:", error);
      setIsLoading(false);
    }
  };

  return (
    <div>
      {*other UIs*}
            <Button onClick={handleLogin} disabled={isAuthenticating}>
              Sign In {isAuthenticating && <Loader />}
            </Button>
            <p aria-label="polite" className="sr-only">
              Login Progress: {inProgress}
            </p>
    </div>
  );
}

[reboottime]

References

1. https://github.com/AzureAD/microsoft-authentication-library-for-js/tree/dev/lib/msal-react
2. https://learn.microsoft.com/en-us/entra/identity-platform/msal-overview
3. https://learn.microsoft.com/en-us/samples/azure-samples/ms-identity-ciam-javascript-tutorial/ms-identity-ciam-javascript-tutorial-1-sign-in-react/