Ordering: a correct OAuth Authorization Code + PKCE login Intermediate

Estimated reading time: 1 min read

Every step of an Authorization Code + PKCE login exists to stop one specific attack. Move one step too early or drop it, and a stolen code, a planted callback or a token for the wrong audience gets through.

Order the steps below, from the click on Log in to the orders API answering 200. Press Check to see which steps are out of place and what breaks when they are.

The shop SPA has a backend-for-frontend (BFF) registered at id.shop.example as client_id = shop-web with redirect URI https://shop.example/auth/callback. A user clicks Log in, then opens "My orders", which calls the NestJS orders API at api.shop.example.

Order the steps of a correct Authorization Code + PKCE login, from the click to the API answering 200.

Use ▲▼ to move each step, or tap a step’s ⠿ and then tap its new position. On a computer you can drag and drop.

Orders API picks the key by kid from the IdP JWKS, checks signature, typ = at+jwt, iss, aud, exp, then checks that sub owns the order
BFF generates a random code_verifier (32 bytes), state and nonce, and stores them in a pre-login session
On /auth/callback, compare state (and iss) with the stored values and discard them; abort on mismatch
Validate the ID token (signature, iss, aud = shop-web, exp, nonce), then create a fresh session and set a __Host- HttpOnly cookie
SPA calls the BFF with the cookie; the BFF forwards the request with Authorization: Bearer <access_token>
User signs in at the IdP (system browser, not an embedded WebView); IdP issues a short-lived, single-use code bound to the challenge
BFF POSTs to /token over the back channel: code, code_verifier, the same redirect_uri, and its client credentials
Redirect the browser to /authorize with code_challenge = S256(verifier), code_challenge_method=S256, state, nonce and the exact registered redirect_uri

Flow, token storage and API-side validation in detail: OAuth 2.0, OIDC and PKCE.

#playground #security #oauth2 #oidc #pkce