repository·dev·Indexed 26 days ago
https://github.com/azuread/microsoft-authentication-library-for-jsMSAL.js provides authentication and token acquisition capabilities for browser-based and Node.js applications using Microsoft Identity platforms. It includes packages such as @azure/msal-browser for SPAs, @azure/msal-angular for Angular applications using OAuth 2.0 Authorization Code Flow with PKCE, and @azure/msal-node-extensions for advanced Node.js features like cross-platform cache persistence and native token brokering.
The @azure/msal-browser package enables client-side JavaScript applications to authenticate users using:
It allows your application to acquire tokens to access Microsoft Cloud services like Microsoft Graph. This library uses the OAuth 2.0 Authorization Code Flow with PKCE and does NOT support the implicit flow.
MSAL Angular enables Angular web applications to authenticate users using Azure AD (AAD) work and school accounts, Microsoft personal accounts (MSA), and social identity providers (e.g., Facebook, Google, LinkedIn) via Azure AD B2C. It also facilitates obtaining tokens to access Microsoft Cloud services like Microsoft Graph.
Key technical details:
@azure/msal-browser package.@azure/msal-angular does NOT support the implicit flow. For implicit flow support, you must use the legacy MSAL Angular v1 library.MSAL.js uses a scope-centric model for accessing resources.
Crucial Rule: Access Token requests are per-resource-per-scope(s). An Access Token requested for Resource A with scope scp1 cannot be used for Resource A with scp2, nor can it be used for Resource B. The recipient is validated via the aud (audience) claim, and permissions are validated via the scp (scope) claim.
The sample demonstrates several key MSAL React patterns:
MsalProvider: Wraps the application in ./src/App.js to provide context, hooks, and components to all children.PublicClientApplication Initialization: Performed in ./src/index.js and passed to the provider.AuthenticatedTemplate and UnauthenticatedTemplate (e.g., in ./src/pages/Home.jsx) to show different content based on auth state.MsalAuthenticationTemplate (e.g., in ./src/pages/Profile.jsx) to automatically trigger sign-in for unauthenticated users.useIsAuthenticated: Used to conditionally render UI elements like Sign In/Sign Out buttons.useMsal: Used to access the PublicClientApplication instance to invoke login or logout functions.INavigationClient in ./src/utils/NavigationClient.js to override default MSAL.js navigation behavior.The sample demonstrates several key MSAL.js patterns for React/Next.js applications:
./pages/_app.js implements MsalProvider, allowing all child components to access @azure/msal-react context, hooks, and components../pages/index.js uses AuthenticatedTemplate and UnauthenticatedTemplate to show different content based on the user's sign-in state../pages/profile.js uses MsalAuthenticationTemplate to protect a route. It automatically invokes sign-in if the user is unauthenticated and acquires an access token to call MS Graph if they are authenticated.useIsAuthenticated: Used in ./src/ui-components/SignInSignOutButton.jsx to conditionally render Sign In or Sign Out buttons.useMsal: Used in ./src/ui-components/SignInButton.jsx and ./src/ui-components/SignOutButton.jsx to access the PublicClientApplication instance and invoke login or logout functions../src/authConfig.js contains the PublicClientApplication configuration and token request parameters../src/utils/MsGraphApiCall.js demonstrates making calls to the MS Graph API using an acquired access token../src/utils/NavigationClient.js shows an implementation of INavigationClient to override default MSAL.js navigation behavior.MSAL Node is designed to support the following application scenarios:
node-redis to persist tokens.The authority parameter in MSAL configuration specifies the URL of the Identity Provider (IdP) or Security Token Service (STS) from which the application acquires tokens. MSAL uses this URL to perform endpoint discovery, gathering necessary metadata (like supported scopes and signing keys) to facilitate token requests.
A standard authority URL follows this structure:
https://<domain-of-the-service>/<tenant-identifier>MSAL uses the authority to locate three critical endpoints:
| Endpoint | Path Segment | Description |
|---|---|---|
| OpenID Configuration | /.well-known/openid-configuration | Contains metadata required for token requests (scopes, claims, signing keys, etc.). |
| Authorize | /oauth2/v2.0/authorize | The endpoint used to return an authorization code via the redirect URI, typically prompting user interaction. |
| Token | /oauth2/v2.0/token | The endpoint where the client app exchanges an authorization code for access and ID tokens via a POST request. |
MSAL supports acquiring and caching tokens across multiple tenants using multi-tenant accounts.
AccountInfo objects that contain tenant-specific data and a Map<string, TenantProfile> called tenantProfiles. The keys in this map are tenant IDs, and the values are the corresponding TenantProfile objects.TenantProfile is a subset of AccountInfo properties that vary by tenant, created from the claims in the ID token issued by each specific tenant.Important Constraints:
The script saves the decoded logs to a new file in the same directory as the input file, appending a -decoded suffix before the extension.
/path/to/debug.log becomes /path/to/debug-decoded.logmodule@version found in the log.msal-browser, msal-common) and multiple versions in one file.temp/log-mappings/ for 24 hours.This sample demonstrates how to integrate @azure/msal-react with React 18 and MUI v5. Key implementation patterns include:
PublicClientApplication in index.jsx and providing it via MsalProvider in App.jsx.AuthenticatedTemplate and UnauthenticatedTemplate to show/hide UI based on auth state.MsalAuthenticationTemplate to automatically trigger sign-in for specific routes.useIsAuthenticated: To conditionally render Sign In/Sign Out buttons.useMsal: To access the PublicClientApplication instance for calling .loginPopup(), .loginRedirect(), or .logout().