OAuth 2.0 Login Flow diagram template
Authorization code flow with PKCE between a client, an identity provider and an API.
About this design
Most modern sign-in buttons are the OAuth 2.0 authorization code flow with PKCE, and the diagram makes its three parties explicit. The client app sends the user to the identity provider with a code challenge; the user authenticates there, never on the client, and the provider redirects back with a short-lived authorization code. The client exchanges that code, along with the original verifier, for an access token and a refresh token, so an intercepted code is useless on its own. The client then calls the API with the access token, and the API validates its signature and scopes before answering. Use this template to discuss why the implicit flow is deprecated, where tokens should be stored in a browser, rotating refresh tokens, short access token lifetimes, scope design, and the difference between authentication and authorisation.
Diagram as text
This is the source of the diagram, in the ArchBoard diagram DSL. Paste it into Tools, Diagram from text to rebuild or change it.
title "OAuth 2.0 with PKCE"
direction LR
browser "Client app" -[1. authorize + challenge]-> auth auth0 "Identity provider"
identity-provider -[2. code]-> client-app
client-app -[3. code + verifier]-> identity-provider
identity-provider -[4. tokens]-> client-app
client-app -[5. bearer token]-> service api "Resource API" -> db postgres "Data"
api -[6. validate]-> identity-provider