sequenceDiagram autonumber participant B as Browser participant A as App / BFF participant I as Identity Provider participant R as Resource API B->>A: GET /protected A-->>B: 302 to IdP (PKCE challenge, state, nonce) B->>I: authorise request I->>B: authenticate + MFA I-->>B: 302 back with authorisation code B->>A: code + state Note over A,I: back channel — browser never sees these A->>I: exchange code + PKCE verifier + client secret I-->>A: access token (10 min), refresh token, id token A->>A: store tokens server-side<br/>set HttpOnly SameSite cookie A-->>B: session cookie only B->>A: subsequent request + cookie A->>R: call with access token (Bearer) R->>I: fetch/refresh signing keys (JWKS, cached) R->>R: verify signature, issuer, audience,<br/>expiry, scope R-->>A: 200 A-->>B: rendered response Note over A,I: on expiry the BFF refreshes<br/>with rotating refresh token
Authentication Flow Diagram
The exact token exchange between browser, application, authorisation server and API — including what is short-lived, what is bound and what never touches the browser.