OAuth 2.0 / PKCE flow visualizer

← All tools

Walk through Authorization Code + PKCE step by step, then generate real code_verifier and S256 code_challenge values in your browser.

~~~

Flow walkthrough

Live PKCE generator
Generates a RFC 7636 code_verifier (64 unreserved chars) and S256 code_challenge via Web Crypto — nothing leaves your browser.
~~~
About this tool
PKCE (Proof Key for Code Exchange) replaces the implicit flow for public clients — SPAs and mobile apps that cannot keep a client secret. The authorization code alone is useless without the original code_verifier.
Always send a random state parameter and verify it on callback — it prevents CSRF on the redirect. nonce is an OpenID Connect addition for ID token replay protection; OAuth core uses state.
Store tokens in httpOnly Secure cookies when you control the backend; keeping access tokens in localStorage exposes them to any XSS on your origin.
~~~
Read more
~~~
Free books, courses, and software
Get my programming books, course editions, and complete software.
Get the download library →