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 byBecome a sponsor
BitriseAtomsizedDigitalOceanDevDojoSMTPfastQuizAPI

// 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.

Overview

OAuth 2.0 lets an application act on your behalf without ever seeing your password, and OpenID Connect adds a standard way to learn who you are. This simulator steps through the flows between the browser, the client application, the authorization server, the token endpoint and the API. The first flow is the authorization code flow with PKCE: the client builds an authorize URL, redirects you to log in and consent, receives a short-lived code and exchanges it, together with the PKCE verifier, for tokens. The second looks at what comes back: an ID token the client validates to create a session, an access token for calling the API or the UserInfo endpoint, and the claims inside them. The third covers scopes and refresh: asking for an API scope, an access token expiring and a refresh token getting a new one. The last shows failure modes, a mismatched redirect URI and a request for broader scopes than needed, and how to fix each. You come away knowing which token is for what.

Try this

  1. Step through "Auth Code + PKCE" and watch the code being exchanged for tokens at the token endpoint.
  2. Open "Tokens & Claims" and compare what the ID token and the access token are used for.
  3. In "Failure Modes", break the redirect URI and see the authorization server refuse it, then fix it.

Frequently asked questions

What is the difference between OAuth and OpenID Connect?
OAuth 2.0 is about authorization: getting an access token to call an API. OpenID Connect builds on it for authentication, adding an ID token that tells the client who the user is.
What is PKCE and why is it needed?
Proof Key for Code Exchange. The client sends a hash of a random secret with the authorize request and the secret itself when exchanging the code, so an intercepted authorization code is useless to anyone else. It is recommended for all clients, not only mobile apps.
Should an API accept the ID token?
No. The ID token is meant for the client to learn who logged in. APIs should require an access token issued for them, with the right audience and scopes.

Try next

Sponsored
Carbon Ads
$ cd /games
// share