OAuth2 Authorization Code + PKCE Flow: 2D Sequence Diagram

This simulator renders the OAuth 2.1 Authorization Code flow with PKCE as a live 2D message-sequence diagram between four real actors — the user's browser, the client application, the authorization server, and the protected resource server — computing the actual SHA-256 code_verifier/code_challenge pair with the browser's own WebCrypto API rather than faking it. Step through or auto-play every protocol message as arrows down the diagram, then flip on a stolen-authorization-code attack to see, message by message, exactly why PKCE's proof-of-possession check blocks token theft that would otherwise succeed against a bare Authorization Code flow — and why single-use codes mean a successful theft also locks the legitimate client out.