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
Request
Response
Internal
1

Authorization Request

ClientAuth Serverrequest

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.