🔐

OAuth2 Client

Interactive Flow Demo Auth Vault

OAuth2 Authorization Flow Visualizer

Walk through the complete OAuth2 Authorization Code flow step by step — see every URL, parameter, and token exchange in real time.

1. Configure Your OAuth2 App

🔵
Google
GitHub
🟣
Discord
🐦
Twitter/X
🟦
Microsoft
⚙️
Custom

2. Step-by-Step Authorization Flow

1

Build Authorization URL

Construct the URL to redirect the user to the provider's login page with response_type=code, scope, and a random state parameter for CSRF protection.

2

User Authenticates & Authorizes

User logs in at the provider and grants permission to your app's requested scopes. Provider redirects back to your redirect_uri with an authorization code.

3

Validate State & Extract Code

Verify the returned state matches the one you sent (CSRF check). Extract the code from the callback URL query parameters.

4

Exchange Code for Tokens

POST to the token endpoint with your client_secret, code, and redirect_uri. Receive access_token and optionally a refresh_token.

5

Fetch User Profile

Use the access_token in an Authorization: Bearer header to call the provider's userinfo endpoint and retrieve the authenticated user's data.

Full version includes PKCE support, token refresh logic, multiple provider configs, session storage, and production-ready error handling.

Buy Full Version — $14.99