OIDC Login Demo (Real Flow)
Below is a real, clickable OpenID Connect login demo, with the backend being this site's Mock OIDC OP. After clicking the button:
- Browser generates PKCE (
code_verifier/code_challenge) andstate,nonce, redirects to Mock OP's authorization endpoint; - Select a test user (alice / bob) from Mock OP—it has no password, click anyone to become them;
- Mock OP redirects back to this page with
code; - This page automatically exchanges the
code(+code_verifier) forid_token/access_tokenat the token endpoint, callsuserinfo, and displays the parsing results and validation at each step.
What This Demo Shows
- Authorization Code Flow + PKCE: Authorization code is passed back via browser,
code_verifieris only shown in the token request, so even if the code leaks, it cannot be exchanged for a token. statevalidation: Comparestateon callback to prevent CSRF.noncevalidation: Compare thenoncein ID Token with the value sent, preventing ID Token replay.audvalidation: Confirm the ID Token'saudis this client.- Token and identity separation:
access_tokenis used to calluserinfo,id_tokenis used to confirm "who is the user."
Want to operate manually step-by-step, or integrate into your own application? See OIDC Mock Endpoints and Call Sequence; want to parse any JWT? Use JWT Parser.