OAuth 2.0 / OpenID Connect login flow (authorization code)

OAuth login flow diagram

A worked example to adapt. Rename steps, add branches and owners to match how your team actually works.

flowchart TD
  s(["User clicks Sign in with provider"])
  pk["App creates state, nonce and PKCE verifier"]
  red["Redirect to provider with state, nonce and code challenge"]
  d1{"User signs in and consents?"}
  den(["Show sign-in cancelled"])
  cb["Provider redirects back with code"]
  d2{"State matches?"}
  rej(["Reject request"])
  tok["Exchange code and verifier for tokens"]
  idt{"ID token valid (signature, issuer, audience, expiry, nonce)?"}
  ses["Create app session for verified user"]
  e(["User signed in"])
  s --> pk
  pk --> red
  red --> d1
  d1 -->|Yes| cb
  d1 -->|No| den
  cb --> d2
  d2 -->|Yes| tok
  d2 -->|No| rej
  tok --> idt
  idt -->|Yes| ses
  idt -->|No| rej
  ses --> e

About this oauth login flow diagram

The authorization code flow is the standard way web and mobile apps let users sign in with an identity provider. Drawn as a flowchart, the security checks are easy to see: the app verifies the state value on the callback, exchanges the code with the PKCE verifier, and validates the OpenID Connect ID token before trusting who the user is. OAuth alone grants access; the ID token is what identifies the user.

This diagram shows the flow from the app's point of view. Use a sequence diagram if you need every message between browser, app and provider.

Step by step

1. Prepare. The app generates and stores a random state value, a nonce, and a PKCE code verifier and challenge.
2. Redirect. The browser is sent to the provider with the client ID, scopes (including openid), state, nonce and code challenge.
3. Consent. The user signs in at the provider and approves access, or cancels.
4. Callback. The provider redirects back with an authorization code; the app checks the state matches.
5. Exchange and verify. The app exchanges the code and verifier for tokens, validates the ID token's signature, issuer, audience, expiry and nonce, then creates its own session.

How to make it in flow-chart.io

1. Start from the example. Edit the text in the generator box above so it names your own identity provider and app, then press Generate. The free preview needs no sign-up.
2. Add the branches. Add the decision points that matter for you, for example token refresh? or account linking for an existing email?. Each decision becomes a diamond with labeled outcomes.
3. Assign owners. Save the diagram to the editor (free account) and rename steps to show who does what: browser, app server and identity provider.
4. Share or export. Share a read-only view link: people with the link can view the diagram but not edit it. Downloads as PNG, SVG or PDF are part of Flow Pro (see pricing).

Tips

• Always check the state parameter on the callback.
• Use PKCE for public clients such as mobile and single-page apps.
• Validate the ID token before creating a session; an access token alone does not identify the user.

Frequently asked questions

What is PKCE?

Proof Key for Code Exchange: the app sends a hashed challenge at the start and the original verifier at token exchange, so an intercepted code can't be used on its own.

Is OAuth the same as OpenID Connect?

OpenID Connect is an identity layer on top of OAuth 2.0 that adds an ID token describing the signed-in user.

Can I generate a sequence diagram instead?

Yes. Ask the generator for a sequence diagram of the same flow.

Related