demo-api: OAuth 2.0 / OIDC walkthrough

Public SPA client spa, Authorization Code + PKCE (S256), tokens kept only in JavaScript memory. Log in with your demo account. For free-form queries use the playground, which logs you in the same way and adds the token for you.

How the flow works (one line per step)

  1. Discovery: GET /realms/demo/.well-known/openid-configuration tells us the authorization, token and logout endpoints.
  2. PKCE: generate a random code_verifier, hash it with SHA-256 into code_challenge; only the hash leaves the browser now.
  3. Redirect: send the browser to the authorization endpoint with response_type=code, client_id=spa, redirect_uri, state, code_challenge.
  4. Login: Keycloak authenticates the user and redirects back to <this page>?code=...&state=....
  5. Exchange: POST the code plus the original code_verifier to the token endpoint; Keycloak hashes the verifier and compares it to the challenge, then returns tokens.
  6. Use: send Authorization: Bearer <access_token> to /graphql; the API validates signature, issuer, audience (demo-api), expiry and typ=Bearer.
  7. Refresh: the access token lives 5 minutes; 30 s before expiry the page swaps the refresh token for a new access token (the refresh token rotates too).
  8. Logout: redirect to the end-session endpoint with id_token_hint; Keycloak ends the session and sends you back here; the page clears its memory.

Session

Status: not logged in

Access token header (decoded)

-

Access token payload (decoded)

-

GraphQL

Raw request header sent:
-
Response:
-

Also available: /playground (GraphiQL with login) and /healthz.