msal-authentication

MSAL Authentication

Microsoft Authentication Library patterns for React/SPA applications with Microsoft Entra ID. Staleness Watch: See EXTERNAL-API-REGISTRY.md for source URLs and recheck cadence

Version: 1.0.0

---

Core Concepts

Microsoft Authentication Library (MSAL) handles authentication with Microsoft Entra ID (formerly Azure Active Directory). It manages:

• Token acquisition and caching
• Silent token renewal
• Redirect/popup authentication flows
• Multi-tenant and B2B scenarios

Package Versions

{
  "@azure/msal-browser": "^5.0.0",
  "@azure/msal-react": "^3.0.0"
}

---

Configuration

Basic MSAL Configuration

import { Configuration, PublicClientApplication, LogLevel } from '@azure/msal-browser';

export const msalConfig: Configuration = {
  auth: {
    clientId: import.meta.env.VITE_ENTRA_CLIENT_ID,
    authority: 'https://login.microsoftonline.com/common', // Multi-tenant
    redirectUri: window.location.origin,
    postLogoutRedirectUri: window.location.origin,
    navigateToLoginRequestUrl: true,
  },
  cache: {
    cacheLocation: 'localStorage', // Persist across tabs
    storeAuthStateInCookie: false, // Not needed for modern browsers
  },
  system: {
    loggerOptions: {
      logLevel: import.meta.env.DEV ? LogLevel.Verbose : LogLevel.Warning,
    },
  },
};

export const msalInstance = new PublicClientApplication(msalConfig);

Redirect URI Gotchas (Azure Static Web Apps)

When using redirectUri: window.location.origin, you must register redirect URIs for every hostname the SPA is served from:

• Custom domains (e.g., https://portal.example.com)
• The SWA default hostname (e.g., https://<app>.<region>.azurestaticapps.net)

If the app loads (HTTP 200) but auth fails, verify the deployed bundle contains the real client ID (not a build-time placeholder).

Authority Patterns

Authority	Use Case
https://login.microsoftonline.com/{tenant-id}	Single-tenant
https://login.microsoftonline.com/common	Multi-tenant (any Entra ID)
https://login.microsoftonline.com/organizations	Work/school accounts only
https://login.microsoftonline.com/consumers	Personal accounts only