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

dotnet new web -n OrderPortal.Api
cd OrderPortal.Api
dotnet add package Microsoft.Identity.Web --version 4.18.0

"AzureAd": {
  "Instance": "https://login.microsoftonline.com/",
  "TenantId": "YOUR_TENANT_ID",
  "ClientId": "YOUR_API_CLIENT_ID"
},
"Spa": {
  "Origin": "http://localhost:3000"
}

using System.Security.Claims;
using Microsoft.AspNetCore.Authentication.JwtBearer;
using Microsoft.Identity.Web;

var builder = WebApplication.CreateBuilder(args);

builder.Services
    .AddAuthentication(JwtBearerDefaults.AuthenticationScheme)
    .AddMicrosoftIdentityWebApi(builder.Configuration.GetSection("AzureAd"));

builder.Services.AddAuthorizationBuilder()
    .AddPolicy("ApiUser", policy =>
    {
        policy.RequireScope("access_as_user");
    })
    .AddPolicy("ApiAdmin", policy =>
    {
        policy.RequireScope("access_as_user");
        policy.RequireRole("Admin");
    });

builder.Services.AddCors(options =>
{
    options.AddPolicy("Spa", policy =>
    {
        policy.WithOrigins(builder.Configuration["Spa:Origin"]!)
            .AllowAnyHeader()
            .AllowAnyMethod();
    });
});

var app = builder.Build();

app.UseCors("Spa");
app.UseAuthentication();
app.UseAuthorization();

app.MapGet("/api/me", (ClaimsPrincipal user) => Results.Ok(new
{
    Username = user.GetDisplayName(),
    ObjectId = user.GetObjectId(),
    TenantId = user.GetTenantId(),
    IsAdmin = user.IsInRole("Admin")
}))
.RequireAuthorization("ApiUser");

app.MapGet("/api/admin/report", () => Results.Ok(new
{
    Message = "Only admins can read this report."
}))
.RequireAuthorization("ApiAdmin");

app.Run();

npm create vite@latest order-portal -- --template react
cd order-portal
npm install
npm install react@^19.2.1 react-dom@^19.2.1
npm install @azure/msal-browser@^5 @azure/msal-react@^5

VITE_ENTRA_CLIENT_ID=YOUR_SPA_CLIENT_ID
VITE_ENTRA_TENANT_ID=YOUR_TENANT_ID
VITE_API_SCOPE=api://YOUR_API_CLIENT_ID/access_as_user
VITE_API_URL=http://localhost:5080

<!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>

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"),
      },
    },
  },
});

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],
};

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>
  );
});

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]);
}

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]
  );
}

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>
  );
}

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

# In order-portal
npm run dev