Single Sign-On with Microsoft Entra ID in .NET 10 and React Using MSAL v5

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Redirect</title>
</head>
<body>
    <p>Processing authentication...</p>
    <script type="module">
        import { broadcastResponseToMainFrame } from "@azure/msal-browser/redirect-bridge";

        broadcastResponseToMainFrame().catch((error) => {
            console.error("Error broadcasting response:", error);
        });
    </script>
</body>
</html>

Tell Vite to build it as a second page in vite.config.js:

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import { resolve } from "path";

export default defineConfig({
  plugins: [react()],
  server: { port: 3000 },
  build: {
    rollupOptions: {
      input: {
        main: resolve(__dirname, "index.html"),
        redirect: resolve(__dirname, "redirect.html"),
      },
    },
  },
});

Step 6: Configure MSAL

Create src/authConfig.js:

const tenantId = import.meta.env.VITE_ENTRA_TENANT_ID;

export const msalConfig = {
  auth: {
    clientId: import.meta.env.VITE_ENTRA_CLIENT_ID,
    authority: `https://login.microsoftonline.com/${tenantId}`,
    redirectUri: `${window.location.origin}/redirect.html`,
  },
  cache: {
    cacheLocation: "sessionStorage",
  },
};

export const apiRequest = {
  scopes: [import.meta.env.VITE_API_SCOPE],
};

Update src/main.jsx. MSAL must finish initializing before any other MSAL call, so we wait for it before rendering:

import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import { PublicClientApplication } from "@azure/msal-browser";
import { MsalProvider } from "@azure/msal-react";
import App from "./App";
import { msalConfig } from "./authConfig";

const msalInstance = new PublicClientApplication(msalConfig);

msalInstance.initialize().then(() => {
  createRoot(document.getElementById("root")).render(
    <StrictMode>
      <MsalProvider instance={msalInstance}>
        <App />
      </MsalProvider>
    </StrictMode>
  );
});

Step 7: Add Silent SSO

Here is the part users notice. If they already signed in to another app, ssoSilent uses the Entra session to sign them in here with no prompt.

Create src/useSilentSso.js:

import { useEffect, useRef } from "react";
import { InteractionStatus } from "@azure/msal-browser";
import { useMsal } from "@azure/msal-react";
import { apiRequest } from "./authConfig";

export function useSilentSso() {
  const { instance, accounts, inProgress } = useMsal();
  const attempted = useRef(false);

  useEffect(() => {
    const isBusy = inProgress !== InteractionStatus.None;

    if (attempted.current || accounts.length > 0 || isBusy) {
      return;
    }

    attempted.current = true;

    instance.ssoSilent(apiRequest).catch(() => {
      // No usable session. The Sign in button stays on screen.
    });
  }, [instance, accounts, inProgress]);
}

The attempted flag makes sure this runs once. A failure here is normal, so we simply leave the sign-in button visible.

Silent SSO isn't guaranteed. It runs in a hidden iframe, and it can fail when a browser blocks third-party cookies. Always keep a visible sign-in button as the fallback.

Step 8: Call the API with a Fresh Token

Don't store access tokens yourself. Call acquireTokenSilent before each API request, and MSAL will use its cache or renew the token as needed.

Create src/useApi.js:

import { useCallback } from "react";
import { InteractionRequiredAuthError } from "@azure/msal-browser";
import { useMsal } from "@azure/msal-react";
import { apiRequest } from "./authConfig";

const apiUrl = import.meta.env.VITE_API_URL;

export function useApi() {
  const { instance, accounts } = useMsal();
  const account = accounts[0];

  return useCallback(
    async (path) => {
      let result;

      try {
        result = await instance.acquireTokenSilent({ ...apiRequest, account });
      } catch (error) {
        if (error instanceof InteractionRequiredAuthError) {
          await instance.acquireTokenRedirect({ ...apiRequest, account });
          return null;
        }

        throw error;
      }

      const response = await fetch(`${apiUrl}${path}`, {
        headers: { Authorization: `Bearer ${result.accessToken}` },
      });

      if (!response.ok) {
        throw new Error(`Request failed with status ${response.status}`);
      }

      return response.json();
    },
    [instance, account]
  );
}

Step 9: Build the UI

Replace src/App.jsx:

import { useState } from "react";
import {
  AuthenticatedTemplate,
  UnauthenticatedTemplate,
  useMsal,
} from "@azure/msal-react";
import { apiRequest } from "./authConfig";
import { useApi } from "./useApi";
import { useSilentSso } from "./useSilentSso";

export default function App() {
  const { instance, accounts } = useMsal();
  const callApi = useApi();
  const [result, setResult] = useState(null);
  const [error, setError] = useState("");

  useSilentSso();

  async function load(path) {
    setError("");
    setResult(null);

    try {
      setResult(await callApi(path));
    } catch (err) {
      setError(err.message);
    }
  }

  return (
    <main>
      <h1>Order Portal</h1>

      <UnauthenticatedTemplate>
        <button onClick={() => instance.loginRedirect(apiRequest)}>
          Sign in with Microsoft
        </button>
      </UnauthenticatedTemplate>

      <AuthenticatedTemplate>
        <p>Signed in as {accounts[0]?.username}</p>
        <button onClick={() => load("/api/me")}>My profile</button>
        <button onClick={() => load("/api/admin/report")}>Admin report</button>
        <button
          onClick={() =>
            instance.logoutRedirect({
              postLogoutRedirectUri: window.location.origin,
            })
          }
        >
          Sign out
        </button>
      </AuthenticatedTemplate>

      {error && <p role="alert">{error}</p>}
      {result && <pre>{JSON.stringify(result, null, 2)}</pre>}
    </main>
  );
}

Step 10: Try It

Start both apps in separate terminals:

# In OrderPortal.Api
dotnet run --urls http://localhost:5080

# In order-portal
npm run dev

Then run through this checklist at http://localhost:3000:

Role change not showing? Roles are stored in the access token. Sign out and sign in again to get a new one.

Common Errors and Fixes

Where Should Tokens Be Stored?

MSAL gives you three cache options, and the choice is a trade-off between convenience and security:

Use localStorage if you want users signed in across tabs of the same app. Either way, your main protection is preventing cross-site scripting (XSS), because a script running on your page could also request tokens.

Production Checklist

• Register your real HTTPS URLs, and remove localhost from production registrations.
• Enforce access in the API. Hiding a button in React is good UX, but it isn't security.
• Prefer app roles over group IDs. Roles travel with your app and need no tenant-specific mapping.
• Define a baseline role, such as User, and handle tokens that contain no roles.
• Handle Conditional Access. A silent request can fail when policy requires user interaction, so keep the redirect fallback.
• Serve the bridge page without COOP headers, especially if you add security headers at your CDN or gateway.
• Request only the scopes you need, and split read and write scopes as your API grows.

Conclusion

A good SSO experience is almost invisible. Users open your app and they are simply in, while the API checks every request behind the scenes.

The setup comes down to a few clear decisions: use two app registrations, trust PKCE in the browser, add the MSAL v5 redirect bridge, and enforce scopes and roles in .NET. Get those right, and your apps can share one secure sign-in across your organization.