OAuth2 PKCE Flow Demo

Creates a cryptographically random code_verifier (43–128 base64url chars) and derives the code_challenge = BASE64URL(SHA-256(verifier)) using the browser's crypto.subtle API. The verifier stays in memory only — the challenge is what gets sent to the authorization endpoint.

Redirects the browser to Azure Entra ID with these parameters (MSAL.js handles PKCE internally):

• response_type=code
• client_id, redirect_uri, scope
• code_challenge, code_challenge_method=S256
• state, nonce (MSAL generates)

After authentication, Azure redirects back with ?code=…&state=…. MSAL processes the redirect automatically.

Identity provider: Email one-time passcode — you will receive a one-time code at your email address to authenticate.

Note: After registration, your email address is stored in Azure Entra ID for authentication purposes. Nowhere else. Use the contact form to request deletion.

After the redirect MSAL performs the token exchange automatically:

Azure validates that SHA-256(code_verifier) == code_challenge sent earlier. On success it returns access_token, id_token, and refresh_token.

JWTs are Base64URL-encoded JSON. Decoding the header and payload reveals algorithm, issuer, audience, scopes, subject, and expiry. No signature verification is done client-side — the backend validates the signature against Azure's JWKS endpoint.

Sends the access token in the HTTP Authorization: Bearer <token> header. The backend validates the JWT (signature via JWKS, audience, issuer, scope demo.read) and echoes the claims back so you can inspect what the API sees.