Try It Yourself - SyntaxStudy Editor

HTML / CSS / JS

# OAuth 2.0 Authorization Code + PKCE flow

# Step 1: Generate PKCE values (client-side)
# code_verifier = crypto.randomBytes(32).toString('base64url')  // 43-128 chars
# code_challenge = base64url(sha256(code_verifier))

# Step 2: Redirect user to authorization server
GET https://auth.example.com/oauth/authorize?
  response_type=code
  &client_id=my-app
  &redirect_uri=https%3A%2F%2Fapp.example.com%2Fcallback
  &scope=openid%20profile%20email%20read%3Aposts
  &state=xyz_random_csrf_token
  &code_challenge=E9Melhoa2OwvFrEMTJguCHaoeK1t8URWbuGJSstw-cM
  &code_challenge_method=S256

# Step 3: User authorizes → auth server redirects back
# https://app.example.com/callback?code=AUTH_CODE&state=xyz_random_csrf_token

# Step 4: Exchange code for tokens (server-to-server)
POST https://auth.example.com/oauth/token HTTP/1.1
Content-Type: application/x-www-form-urlencoded

grant_type=authorization_code
&code=AUTH_CODE
&redirect_uri=https://app.example.com/callback
&client_id=my-app
&code_verifier=dBjftJeZ4CVP-mB92K27uhbUJU1p1r_wW1gFWFOEjXk

# Token response
HTTP/1.1 200 OK
{
  "access_token":  "eyJ...",
  "token_type":    "Bearer",
  "expires_in":    3600,
  "refresh_token": "eyJ...",
  "scope":         "openid profile email read:posts",
  "id_token":      "eyJ..."
}