OAuth2 Flow Visualizer

OAuth2 is an authorization framework that lets users grant third-party applications limited access to their accounts without sharing credentials. Use it when you need to let users sign in with Google/GitHub, when your app needs to access user data from another service (calendar, repositories), or when building APIs that third-party developers will integrate with. OAuth2 handles authorization; add OpenID Connect (OIDC) on top for authentication and user identity.

Authorization Code + PKCE: for SPAs, mobile apps, and any public client — this is the modern standard. Authorization Code (with client secret): for server-side apps where the secret stays on the server. Client Credentials: for machine-to-machine (M2M) APIs, backend services, and cron jobs — no user involved. Device Code: for CLI tools, smart TVs, and IoT devices without a browser. Implicit flow is deprecated — never use it for new apps.

PKCE (Proof Key for Code Exchange) prevents authorization code interception attacks. In SPAs and mobile apps, you cannot safely store a client secret — the code is visible to users. PKCE replaces the client secret with a cryptographic challenge: the app generates a random verifier, hashes it (code_challenge), sends the hash with the auth request, then sends the verifier when exchanging the code for tokens. The server verifies the verifier matches the challenge — an intercepted code is useless without the verifier.

Access tokens are short-lived credentials (typically 15 minutes to 1 hour) sent with every API request as a Bearer token. Refresh tokens are long-lived (days to weeks) and used only to get new access tokens when they expire. Store access tokens in memory (not localStorage) to reduce XSS risk. Store refresh tokens in httpOnly cookies for web apps. When an access token expires, use the refresh token to get a new one without prompting the user to log in again.

Use next-auth (Auth.js) — it handles the OAuth2/OIDC flow, session management, and token refresh automatically for 50+ providers. Configure providers in route.ts under app/api/auth/[...nextauth]/route.ts. For custom OAuth: store the code_verifier in a server-side session during the redirect, exchange the code server-side in a route handler (never in client components), and store tokens securely in httpOnly cookies or your database.

OIDC is an identity layer built on top of OAuth2. OAuth2 handles authorization (can this app access this resource?), but says nothing about user identity. OIDC adds an ID token (JWT) containing user claims (sub, email, name, picture) and standardizes the /userinfo endpoint. When you add openid to the OAuth2 scope, you get both an access token (for API calls) and an ID token (for authentication). Most identity providers (Google, Microsoft, GitHub) support OIDC.