# OAuth 2.0 / OIDC Authorization Code with PKCE Flow Visualizer

Simulate the Authorization Code flow with PKCE end to end: verifier/challenge generation, authorization URL, token exchange, ID Token validation checklist and an interception-attack demo.

> Canonical page: https://elysiatools.com/en/tools/oauth-oidc-authorization-code-pkce-flow-visualizer

- **Category:** Development

- **Keywords:** oauth flow visualizer, pkce s256 generator, id token validation, at_hash check, authorization code flow demo, openid connect simulator

## Overview

A spec-faithful offline simulator: RFC 7636 S256 challenge derivation, the full OIDC Core §3.1.3.7 ID Token checklist with a real HS256 token and at_hash, an attacker lane, and an annotated parameter matrix. No network calls; a fixed demo clock keeps outputs reproducible.

## Inputs

- **Flow variant** (select)
- **code_verifier (43-128 unreserved chars, blank = RFC example)** (text): leave blank to use the RFC 7636 Appendix B example (43 chars)
- **Issuer URL** (text): https://auth.example.com
- **client_id** (text): spa-demo-client
- **redirect_uri (must match registration exactly)** (text): http://127.0.0.1:8080/callback
- **scope (openid enables OIDC)** (text): openid profile email
- **client_secret (demo HS256 signing key)** (text): demo-secret-not-for-production
- **state (blank = deterministic demo value)** (text): opaque CSRF token, echoed back on the callback
- **nonce (blank = deterministic demo value)** (text): binds the ID Token to this authentication session
- **Simulate a code-interception attack** (checkbox)

## When to use

- When learning or teaching OAuth 2.0 and OpenID Connect Authorization Code flows with PKCE.
- When debugging authorization URL parameters, S256 code challenges, and token exchange payloads offline.
- When verifying how PKCE mitigates authorization code interception attacks compared to flows without PKCE.

## How it works

- Derives the code challenge from the provided or generated code_verifier using SHA-256 (S256), plain, or none modes.
- Constructs the front-channel authorization request URL and simulates callback parameters with state and authorization code values.
- Simulates the back-channel token exchange POST request and decodes an authentic HS256-signed ID Token containing claim bindings.
- Evaluates the complete OIDC Core §3.1.3.7 validation checklist (including iss, aud, nonce, and at_hash) and presents an annotated parameter matrix alongside optional attack simulation results.

## Use cases

- Educational walkthroughs illustrating why single-page applications and native apps require PKCE.
- Validating client-side parameter construction before integrating with production OpenID Connect identity providers.
- Security analysis showing how missing PKCE validation exposes authorization codes to front-channel interception.

## Frequently asked questions

### Does this tool make actual network requests to identity providers?

No. The simulator runs completely offline using a deterministic clock to ensure reproducible protocol artifacts.

### What is the difference between PKCE S256 and plain?

S256 hashes the code_verifier with SHA-256 and Base64URL-encodes it, whereas plain sends the verifier unchanged as the challenge.

### Why is the at_hash check important in OIDC ID Tokens?

The at_hash claim binds the access token to the ID Token, ensuring that the issued access token has not been substituted.

### What happens when the interception attack simulation is enabled?

The visualizer simulates an attacker intercepting the authorization code to demonstrate whether token redemption succeeds based on the chosen PKCE mode.

### Can I provide custom client credentials and URLs?

Yes. You can supply custom values for issuer URL, client_id, client_secret, redirect_uri, scope, state, nonce, and code_verifier.

## Related tools

- [PKCE Code Verifier & Challenge Generator](https://elysiatools.com/en/tools/pkce-code-verifier-generator): Generate, validate and verify OAuth2 / OIDC PKCE (RFC 7636) code_verifier and S256 code_challenge pairs. Three modes: (1) generate a fresh verifier + challenge from cryptographically secure random bytes at 256/384/512/768-bit entropy, (2) audit a verifier you already have against the RFC — length (43–128), charset \[A-Za-z0-9-._~\] and ≥256-bit entropy, and (3) verify a verifier/challenge pair by recomputing BASE64URL(SHA256(verifier)). Optionally build the full authorization-request URL and token-exchange body. Complements the generic nonce-generator (which only emits a verifier+challenge pair) with RFC-compliance auditing and pair verification.
- [BIP39 Mnemonic Phrase Generator](https://elysiatools.com/en/tools/mnemonic-bip39-generator): Generate or validate 12 to 24 word BIP39 mnemonic phrases with entropy and PBKDF2-HMAC-SHA512 seed output
- [Hash Algorithm Comparator](https://elysiatools.com/en/tools/hash-algorithm-comparator): Hash the same input with MD5, SHA-1, SHA-256, SHA-512, BLAKE2b, and BLAKE3 at the same time and compare them side by side: output length, hex/Base64 digest, security status (broken / modern), and a relative speed benchmark. Great for teaching, choosing a hashing algorithm, or sanity-checking checksums.
- [Kakuro / Fillomino / Masyu / Yajilin / Hashiwokakero / Nurikabe / Slitherlink / Star Battle Puzzle Generator with Uniqueness Prover](https://elysiatools.com/en/tools/kakuro-fillomino-masyu-yajilin-hashiwokakero-nurikabe-slitherlink-and-star-battle-puzzle-generator-with-uniqueness-prover): Deterministically seeded generator for eight Nikoli logic-puzzle families — each board is grown solution-first, rendered as puzzle + solution SVGs, and verified by an exhaustive backtracking solver that counts solutions to two, so “unique” is a proof (and an exhausted budget is reported as unproven, never guessed).
- [Tailwind Color Palette Sync](https://elysiatools.com/en/tools/tailwind-color-palette-sync): Generate theme.extend.colors for tailwind.config.ts from HEX colors, with WCAG contrast levels and optional dark mode.
- [TOTP / HOTP Offline Code Generator](https://elysiatools.com/en/tools/totp-hotp-offline-generator): Generate RFC 6238 TOTP (time-based, 6/8 digits, 30/60s step) and RFC 4226 HOTP (counter-based) one-time passwords from a base32 shared secret, fully offline with HMAC-SHA1/256/512, plus an otpauth:// URI for importing into Google Authenticator / Authy
- [Thyroid Index (TSH/FT4/FT3 Interpretation)](https://elysiatools.com/en/tools/thyroid-index): Interpret the thyroid axis by pattern-reading TSH with FT4 and (optionally) FT3. Adult reference ranges: TSH 0.4–4.0 mIU/L, FT4 0.8–1.8 ng/dL (≈10–23 pmol/L), FT3 2.3–4.2 pg/mL (≈3.5–6.5 pmol/L). High TSH + low FT4 → overt primary hypothyroidism; high TSH + normal FT4 → subclinical hypothyroidism; low TSH + high FT4/FT3 → overt primary hyperthyroidism; low TSH + normal FT4 → subclinical hyperthyroidism, exogenous hormone, or resolving thyroiditis (check FT3 for T3 toxicosis); low/normal TSH + low FT4 → central hypothyroidism; high TSH + high FT4 → TSH-secreting adenoma or thyroid hormone resistance. Low FT3 with normal TSH/FT4 indicates low-T3 (non-thyroidal illness) syndrome. Units selectable for TSH, FT4, FT3. Derived from ATA 2014/2016, NACB 2002, Garber 2012, and MDCalc. Not medical advice.
- [Text Hash Generator](https://elysiatools.com/en/tools/text-hash-generator): Compute MD5, SHA-1, SHA-256, SHA-512, and CRC-32 hashes of any text in one shot. Get both hex and Base64 digests over the UTF-8 encoding.

## Samples

- [Code Comment Samples](https://elysiatools.com/en/samples/code-comment-samples): Sample code files with various comment styles for testing comment removal
- [OAuth 2.0 & OpenID Connect Samples](https://elysiatools.com/en/samples/oauth-openid-connect): OAuth 2.0 authorization framework and OpenID Connect authentication protocol examples
- [QR Code Samples](https://elysiatools.com/en/samples/qrcode-samples): Sample QR code images for testing QR code reading and generation tools
- [OAuth 2.0 Samples](https://elysiatools.com/en/samples/oauth2-samples): OAuth 2.0 implementation examples including authorization flows, client configurations, and security best practices