Development

OAuth 2.0 / OIDC Authorization Code with PKCE Flow Visualizer

Simulate the Authorization Code flow with PKCE end to end: verifier/challenge generation, authorization URL, token exchange, ID Token validation checklist and an interception-attack demo.

html· HTML resultOpen tool

Quick start

Call this tool from your code in three languages.

cURL

curl -X POST 'https://api.elysiatools.com/en/api/tools/oauth-oidc-authorization-code-pkce-flow-visualizer' \
  -H 'Content-Type: application/json' \
  -d '{"flowVariant":"s256","codeVerifier":"dBjftJeZ4CVP-mB92K27uhbUJU1p1r_wW1gFWFOEjXk","issuer":"http://127.0.0.1:8443","clientId":"spa-demo-client","redirectUri":"http://127.0.0.1:8080/callback","scope":"openid profile email","clientSecret":"demo-secret-not-for-production","state":"","nonce":"","simulateAttack":false}'

API reference

Send a POST request with your inputs as JSON. File parameters require a separate upload first.

Endpoint

HTTP

POST https://api.elysiatools.com/en/api/tools/oauth-oidc-authorization-code-pkce-flow-visualizer

Parameters

Name	Type	Required	Description
flowVariant	select	Yes	—
codeVerifier	text	No	—
issuer	text	No	—
clientId	text	No	—
redirectUri	text	No	—
scope

MCP integration

Add this tool to your Model Context Protocol server so AI agents can list and call it.

Server configuration

Add this block to your MCP client configuration:

mcp.json

{
  "mcpServers": {
    "elysiatools-oauth-oidc-authorization-code-pkce-flow-visualizer": {
      "name": "oauth-oidc-authorization-code-pkce-flow-visualizer",
      "description": "Simulate the Authorization Code flow with PKCE end to end: verifier/challenge generation, authorization URL, token exchange, ID Token validation checklist and an interception-attack demo.",
      "baseUrl": "https://api.elysiatools.com/mcp/sse?toolId=oauth-oidc-authorization-code-pkce-flow-visualizer",
      "command": "",
      "args": [],
      "env": {},
      "isActive": true,
      "type": "sse"
    }
  }
}

List available tools

After connecting to the SSE endpoint, list the exposed tools:

tools/list

{
  "jsonrpc": "2.0",
  "id": 1,
  "method": "tools/list"
}

Call this tool

Invoke the tool by its id, passing arguments built from its parameters:

tools/call

{
  "jsonrpc": "2.0",
  "id": 2,
  "method": "tools/call",
  "params": {
    "name": "oauth-oidc-authorization-code-pkce-flow-visualizer",
    "arguments": {
  "flowVariant": "s256",
  "codeVerifier": "dBjftJeZ4CVP-mB92K27uhbUJU1p1r_wW1gFWFOEjXk",
  "issuer": "http://127.0.0.1:8443",
  "clientId": "spa-demo-client",
  "redirectUri": "http://127.0.0.1:8080/callback",
  "scope": "openid profile email",
  "clientSecret": "demo-secret-not-for-production",
  "state": "",
  "nonce": "",
  "simulateAttack": false
}
  }
}

Browse tools Open tool