OAuth 2.0 / OIDC Authorization Code with PKCE Flow Visualizer

OAuth 2.0 / OIDC Authorization Code with PKCE Flow Visualizer | Online Free Tool | Elysia Tools

Tool usage guide

Learn when to use this tool, what it supports, and how real users apply it.

Key facts

Category: Development
Input types: select, text, checkbox
Output type: html
Sample coverage: 4
API ready: Yes

Overview

The OAuth 2.0 / OIDC Authorization Code with PKCE Flow Visualizer is a spec-compliant offline simulator designed to demonstrate modern authentication and authorization workflows. It models every step of the RFC 7636 and OpenID Connect protocols—from code verifier and challenge derivation to authorization URL generation, back-channel token exchange, complete ID Token validation (§3.1.3.7), and optional front-channel interception attack scenarios.

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

1Derives the code challenge from the provided or generated code_verifier using SHA-256 (S256), plain, or none modes.
2Constructs the front-channel authorization request URL and simulates callback parameters with state and authorization code values.
3Simulates the back-channel token exchange POST request and decodes an authentic HS256-signed ID Token containing claim bindings.
4Evaluates 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.

Examples

1. PKCE S256 Standard Authorization Flow

Frontend Security Engineer

Background

Configuring a single-page application to authenticate users against an OpenID Connect identity provider using the recommended S256 PKCE flow.

Problem

Needs to inspect the generated S256 challenge, request URL, and the resulting OIDC ID Token claims checklist.

How to use

Select 'PKCE S256' as the flow variant, input the issuer URL and client ID, specify scopes including 'openid profile email', and run the simulator.

Flow Variant: s256
code_verifier: dBjftJeZ4CVP-mB92K27uhbUJU1p1r_wW1gFWFOEjXk
Issuer: http://127.0.0.1:8443
Client ID: spa-demo-client
Redirect URI: http://127.0.0.1:8080/callback
Scope: openid profile email
Simulate Attack: false

Outcome

Generates the exact RFC 7636 challenge E9Melhoa2OwvFrEMTJguCHaoeK1t8URWbuGJSstw-cM, a complete authorization URL, and a 9/9 passing OIDC ID Token validation report.

2. Front-Channel Code Interception Attack Demo

Application Security Trainer

Background

Demonstrating the security risks of public clients using standard authorization code flow without PKCE protection.

Problem

Needs an interactive visual to show students how an intercepted authorization code can be redeemed by an attacker without a verifier.

FAQ

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.

Flow Variant: none
Issuer: http://127.0.0.1:8443
Client ID: spa-demo-client
Redirect URI: http://127.0.0.1:8080/callback
Scope: openid
State: st-attack-demo
Nonce: n-attack-demo
Simulate Attack: true

What this tool helps you do

Run this tool

Examples that match this tool

Continue with connected tools and hubs

Learn when to use this tool, what it supports, and how real users apply it.

Key facts

Overview

When to use

How it works

Use cases

Examples

1. PKCE S256 Standard Authorization Flow

2. Front-Channel Code Interception Attack Demo

FAQ

Code Comment Samples

OAuth 2.0 & OpenID Connect Samples

QR Code Samples

OAuth 2.0 Samples

PKCE Code Verifier & Challenge Generator

BIP39 Mnemonic Phrase Generator

Hash Algorithm Comparator

Kakuro / Fillomino / Masyu / Yajilin / Hashiwokakero / Nurikabe / Slitherlink / Star Battle Puzzle Generator with Uniqueness Prover