Skip to main content

OAuth/OIDC Flow Simulator

Visualize OAuth 2.0 and OpenID Connect flows with an interactive simulator. Learn authorization code + PKCE, state, nonce, redirect URI checks, ID tokens, access tokens, refresh tokens, scopes, UserInfo, and common auth failure modes.

Category: Security

Topics covered: oauth, oidc, openid-connect, authentication, authorization, pkce, jwt, tokens, security, educational, interactive

// simulator

OAuth/OIDC Flow Simulator

Visualize OAuth 2.0 and OpenID Connect flows with an interactive simulator. Learn authorization code + PKCE, state, nonce, redirect URI checks, ID tokens, access tokens, refresh tokens, scopes, UserInfo, and common auth failure modes.

Supported byDigitalOceanDevDojoSMTPfastQuizAPIBecome a sponsor

// oauth oidc lab

OAuth/OIDC Flow Simulator

Visualize authorization code + PKCE, OIDC ID tokens, access tokens, refresh tokens, scopes, callbacks, and the mistakes that break real login flows.

Progress0/15

0

Tokens

5%

Risk

Least

Scopes

Lessons
Lesson 1 / 4
Step 1 / 5

The app creates state, nonce, code_verifier, and code_challenge.

Protocol Flow

Browser

User agent

Client App

Relying party

Authorization Server

Login + consent

Token Endpoint

Back channel

API / UserInfo

Resource server

Run the next action to animate the current OAuth/OIDC message.

oauth-message.log
No message selected yet.
Run the current flow action to inspect request and response details.
Token Set

ID Token

missing

For the client app. Proves authentication.

Access Token

missing

For APIs. Carries authorization context.

Refresh Token

missing

For the token endpoint. Rotated on use.

Security Checks
Risk score5%
Exact redirect URI
Least-privilege scopes
Fresh access token
PKCE S256 required
State + nonce verified
Event Log

Lab initialized. The client is registered with redirect_uri=https://app.example/callback and PKCE required.

About this OAuth/OIDC simulator

What you'll learn

  • How authorization code + PKCE moves through browser and back-channel requests
  • Why state, nonce, redirect URI matching, and PKCE are separate protections
  • The difference between ID tokens, access tokens, and refresh tokens
  • How APIs validate audience, issuer, expiry, and scope
  • Why refresh token rotation matters
  • How common OAuth mistakes show up in real debugging sessions

Flows covered

  • Login: authorize URL, redirect, login, consent, callback
  • Tokens: code exchange, ID token validation, UserInfo/API calls
  • Sessions: secure app session cookies and token storage boundaries
  • Failure modes: bad redirect URIs, broad scopes, expired access tokens

OAuth vs OIDC

OAuth delegates API access. OpenID Connect layers identity on top of OAuth by adding the openid scope, ID tokens, and standardized user identity claims.

Browser-safe by design

This simulator does not contact a real identity provider. It models the messages and validation decisions in the browser so you can reason about the flow before wiring a real provider like Auth0, Okta, Entra ID, Cognito, Keycloak, or Clerk.

Try next

Sponsored
Carbon Ads
$ cd /games
// share