OAuth2 / OIDC Authorization Flow

What this diagram shows

This diagram maps the complete OAuth2 authorization code flow with PKCE (Proof Key for Code Exchange), beginning when a user clicks 'Log in' and ending when the client application holds a validated access token and refresh token. It shows the round-trip between the client application, the user's browser, the authorization server, and the resource server, including the critical code-challenge generation, authorization code exchange, and token validation steps that prevent token interception and ensure secure credential handling.

Key components

• Resource Owner (User) — Initiates login and grants permission to the client application to access their data.
• Client Application — Generates code verifier and code challenge, receives the authorization code, exchanges it for tokens, and stores the access and refresh tokens.
• Authorization Server — Authenticates the user, validates the PKCE challenge against the code verifier, and issues access tokens and refresh tokens.
• Authorization Endpoint — Accepts login requests from the client, prompts the user for credentials and consent, then issues an authorization code.
• Token Endpoint — Validates the authorization code and code verifier pair, then returns an access token (JWT) and refresh token to the client.
• Resource Server — Validates incoming access tokens and returns protected resources only if the token is valid and in scope.
• Refresh Token Flow — Allows the client to obtain a new access token when the current one expires, without requiring the user to log in again.

When to use it

Use this diagram when documenting third-party integrations, mobile app authentication, single-page application security, or any scenario where user credentials must not be shared directly with the client. It is essential for explaining how PKCE prevents authorization code interception attacks in public clients and how token rotation maintains long-lived sessions securely.

Common mistakes

• Omitting the code verifier and code challenge steps, which defeats PKCE's protection against authorization code interception attacks.
• Showing the refresh token flowing directly from the authorization endpoint instead of only from the token endpoint after successful code exchange.
• Failing to distinguish between the access token (short-lived JWT) and refresh token (long-lived, opaque) or not showing token rotation on refresh.

Adapting it to your system

Replace the generic Authorization Server and Token Endpoint labels with your actual provider (Auth0, Keycloak, AWS Cognito, or internal IdP). Add specific scopes your application requests (email, profile, custom claims). Show any additional validation steps such as multi-factor authentication checks or custom claim enrichment in the authorization server. Adjust token lifetimes and refresh rotation policies to match your security requirements. Include error paths for invalid codes or expired refresh tokens.