OAuth2 PKCE Flow Demo

Configuration

Tenant ID SPA Client ID Authority Redirect URI API Scope API Base URL

No secrets stored here — this is a public client (PKCE, no client secret).

Not signed in

Step 1

Generate PKCE Parameters

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.

code_challenge = BASE64URL( SHA-256( code_verifier ) )
code_challenge_method = S256

Step 2

Authorization Request (Login)

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.

Step 3

Token Acquisition (Code Exchange)

After the redirect MSAL performs the token exchange automatically:

POST /token
grant_type=authorization_code
code=<auth_code>
code_verifier=<verifier>
client_id, redirect_uri

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

Step 4

Decode JWTs

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.

Step 5

Call Protected Backend API

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.