1. Discovery. The app reads /.well-known/openid-configuration on the issuer to find the authorize, token, UserInfo, revocation and JWKS endpoints. Nothing is hardcoded.
2. PKCE, state and nonce. It generates a random code_verifier and sends only its SHA-256 hash (code_challenge, S256). A random state protects against CSRF, and a random nonce ties the ID token to this sign-in. All three stay in this tab's sessionStorage.
3. Authorize. The browser goes to Protecto's authorize endpoint. You sign in on Protecto and approve access. TaskFlow Pro never sees your password.
4. Callback. Protecto sends the browser back to /callback.html with a one-time code and the same state. The app checks that state matches, then deletes the stored values.
5. Token exchange. The app POSTs the code and the original code_verifier to the token endpoint. It's a public client, so there is no client secret. PKCE proves it is the same app that started the flow.
6. ID token verification. The app fetches the JWKS, picks the key by kid, verifies the RS256 signature with WebCrypto, and checks iss, aud, exp, iat and nonce.
7. UserInfo. The app calls the UserInfo endpoint with Authorization: Bearer <access token>. The sub it returns must match the ID token's.
8. Refresh and sign out. A refresh gets new tokens, and the refresh token rotates, so the old one stops working. Sign out revokes both tokens (RFC 7009) and clears storage.

Log for this tab

Nothing yet. Sign in to see each step here.