Menu
Microsoft Authentication Library (MSAL) patterns for React/SPA applications with Entra ID
The review-first prompt is selected by default. You can switch to a direct command or download a local copy.
Read SKILL.md and any companion files shown by SkillsMP before deciding whether to install.
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
A direct command skips the review prompt. Inspect the source before running it.
npx skills add https://github.com/fabioc-aloha/Alex_Plug_In --skill msal-authenticationThe command stays on one line. Scroll horizontally to inspect it before copying.
Prefer a local copy? Download the files currently available to SkillsMP.
Showing SKILL.md
Create and maintain ASCII visual dashboards for project tracking with parallel lane progress bars
Store and manage voice samples for TTS cloning — portable, version-controlled audio references
Clear documentation through visual excellence
Based on SOC occupation classification
| name | msal-authentication |
| description | Microsoft Authentication Library (MSAL) patterns for React/SPA applications with Entra ID |
| tier | standard |
| applyTo | **/*auth*,**/*msal*,**/*login*,**/*identity*,**/*entra* |
Microsoft Authentication Library patterns for React/SPA applications with Microsoft Entra ID.
Version: 1.0.0
Microsoft Authentication Library (MSAL) handles authentication with Microsoft Entra ID (formerly Microsoft Entra ID). It manages:
{
"@azure/msal-browser": "^5.0.0",
"@azure/msal-react": "^3.0.0"
}
import { , , } ;
: = {
: {
: ...,
: ,
: ..,
: ..,
: ,
},
: {
: ,
: ,
},
: {
: {
: ... ? . : .,
},
},
};
msalInstance = (msalConfig);
When using redirectUri: window.location.origin, you must register redirect URIs for every hostname the SPA is served from:
https://portal.example.com)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 | 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 |
import { MsalProvider } from '@azure/msal-react';
import { msalInstance } from './authConfig';
// Initialize MSAL before rendering
await msalInstance.initialize();
await msalInstance.handleRedirectPromise();
ReactDOM.createRoot(document.getElementById('root')!).render(
<MsalProvider instance={msalInstance}>
<App />
</MsalProvider>
);
import { useIsAuthenticated, useMsal, useAccount } from '@azure/msal-react';
function UserProfile() {
const isAuthenticated = useIsAuthenticated();
const { instance, accounts } = useMsal();
const account = useAccount(accounts[0] ?? {});
if (!isAuthenticated) return <LoginButton />;
return (
<div>
<p>Welcome, {account?.name}</p>
<p>Email: {account?.username}</p>
</div>
);
}
import { AuthenticatedTemplate, UnauthenticatedTemplate } from '@azure/msal-react';
function App() {
return (
<>
<AuthenticatedTemplate>
<Dashboard />
</AuthenticatedTemplate>
<UnauthenticatedTemplate>
<LandingPage />
</UnauthenticatedTemplate>
</>
);
}
export const scopes = {
graph: ['https://graph.microsoft.com/.default'],
graphUser: ['User.Read'],
graphReports: ['Reports.Read.All'],
arm: ['https://management.azure.com/.default'],
api: ['api://{api-client-id}/access_as_user'],
};
async function getAccessToken(
instance: IPublicClientApplication,
account: AccountInfo,
scopes: string[]
): Promise<string> {
try {
const response = await instance.acquireTokenSilent({ scopes, account });
return response.accessToken;
} catch (error) {
if (error instanceof InteractionRequiredAuthError) {
const response = await instance.acquireTokenPopup({ scopes });
return response.accessToken;
}
throw error;
}
}
function useAccessToken(scopes: string[]) {
const { instance, accounts } = useMsal();
const [token, setToken] = useState<string | null>(null);
const [error, setError] = useState<Error | null>(null);
useEffect(() => {
if (accounts.length === 0) return;
instance.acquireTokenSilent({ scopes, account: accounts[0] })
.then(response => setToken(response.accessToken))
.catch(setError);
}, [instance, accounts, scopes]);
return { token, error };
}
function getTenantFromAccount(account: AccountInfo): string {
return account.tenantId || 'unknown';
}
function getTenantName(account: AccountInfo): string {
const claims = account.idTokenClaims as { tenant_name?: string };
return claims?.tenant_name || account.tenantId || 'Personal Account';
}
export class AdminConsentRequiredError extends Error {
public tenantId: string;
public requiredScopes: string[];
constructor(tenantId: string, scopes: string[]) {
super('Admin consent required for this tenant.');
this.name = 'AdminConsentRequiredError';
this.tenantId = tenantId;
this.requiredScopes = scopes;
}
}
function getAdminConsentUrl(clientId: string, tenantId: string): string {
const params = new URLSearchParams({
client_id: clientId,
redirect_uri: window.location.origin,
scope: 'https://graph.microsoft.com/.default',
});
return `https://login.microsoftonline.com/${tenantId}/adminconsent?${params}`;
}
| Issue | Root Cause | Fix |
|---|---|---|
| Auth fails on SWA | Redirect URI not registered for SWA hostname | Register all hostnames in app registration |
| Token silently fails | Account not in cache | Fallback to interactive with acquireTokenPopup |
| CORS error on token | Wrong authority URL | Match authority to app registration tenant |
| Build-time placeholder | VITE_ env var not set in SWA config | Set in SWA Application Settings |
| Admin consent loop | Org policy blocks consent | Use admin consent URL flow |
| Trigger | Response |
|---|---|
| "MSAL", "Entra ID", "authentication" | Full skill activation |
| "redirect URI", "auth fails" | Configuration + Gotchas section |
| "token", "silent", "acquireToken" | Token Acquisition section |
| "multi-tenant", "admin consent" | Multi-Tenant Patterns section |
| "React auth", "MsalProvider" | React Integration section |