OAuth / OIDC Flow Visualizer
See every OAuth grant type come alive — from PKCE to Client Credentials
100% Client-Side
Choose an OAuth Flow
Tap a flow below to see it animated
Authorization Code + PKCE
Most secure flow for mobile and SPA applications. Uses code verifier and challenge to prevent interception attacks.
Step 1 of 9
┌─────────────────┐ ┌─────────────────┐│ │ │ ││ Client (SPA) │ │ Auth Server ││ │ │ │└────────┬────────┘ └────────┬────────┘│ ││ (1) Authorization Request + code_challenge ││ GET /authorize?response_type=code&code_challenge=... ││──────────────────────────────────────────────────────────────>││ ││ (2) User Login & Consent ││ Present login form & scope approval ││<───────────────────────────────────────────────────────────────││ ││ (3) Authorization Code ││ Redirect: callback?code=AUTH_CODE ││<───────────────────────────────────────────────────────────────││ ││ (4) Token Exchange + code_verifier ││ POST /token (code + code_verifier) ││──────────────────────────────────────────────────────────────>││ ││ (5) Access Token + Refresh Token ││ {access_token, refresh_token, expires_in} ││<───────────────────────────────────────────────────────────────││ ││ ┌─────────────────┐ ││ (6) API Request + Bearer Token │ │ ││ Authorization: Bearer {token} │ Apigee Proxy │ ││─────────────────────────────────>│ │ ││ │ (7) VerifyJWT │ ││ │ Policy │ ││ │ │ ││ (8) API Response │ │ ││<─────────────────────────────────│ │ ││ └─────────────────┘ ││ │
1
Authorization Request
Client → Auth Server
client_id, redirect_uri, code_challenge
Apigee Policy Configuration
<!-- VerifyJWT Policy -->
<VerifyJWT name="VJ-VerifyAccessToken">
<Source>request.header.authorization</Source>
<IgnoreUnresolvedVariables>false</IgnoreUnresolvedVariables>
<Algorithm>RS256</Algorithm>
<PublicKey>
<JWKS uri="https://auth.example.com/.well-known/jwks.json"/>
</PublicKey>
<Subject>sub</Subject>
<Audience>api://your-api</Audience>
<Issuer>https://auth.example.com</Issuer>
</VerifyJWT>
<!-- RaiseFault on Invalid Token -->
<RaiseFault name="RF-InvalidToken">
<FaultResponse>
<Set>
<StatusCode>401</StatusCode>
<ReasonPhrase>Unauthorized</ReasonPhrase>
<Payload contentType="application/json">
{"error": "invalid_token", "error_description": "Token validation failed"}
</Payload>
</Set>
</FaultResponse>
</RaiseFault>
<!-- Flow Condition -->
<Condition>jwt.VJ-VerifyAccessToken.failed = true</Condition>About this Tool
Purpose
OAuth can be conceptually heavy and easy to mis-implement. This visualizer demystifies each flow and shows the corresponding Apigee policy stack.
Features
- •Choose flow: Auth Code PKCE, Client Credentials, Implicit, Refresh Token.
- •See animated token exchange between Client, Auth Server, Apigee, and Target.
- •Each step displays relevant Apigee policies (OAuthV2, AssignMessage, VerifyJWT).
- •Copy pre-generated XML snippets or sharedflow templates.
Why it matters
Understanding OAuth in motion prevents mis-configured token validation and improves security governance across your org.