☁️ SaaS & Cloud · Sequence
OAuth 2.0 / OpenID Connect Login
The authorization code flow with PKCE used by most modern web and mobile apps to log users in through an identity provider.
Drawing diagram…
What this diagram shows
- The app never sees the user's password
- PKCE protects the code exchange for public clients
- Access token is used to call the API; refresh token renews it
Prompt used
OAuth 2.0 authorization code flow with PKCE and OpenID Connect: the user clicks Log in, the app redirects the browser to the identity provider with a code challenge, the user signs in and consents, the identity provider redirects back with an authorization code, the app exchanges the code plus code verifier for ID, access and refresh tokens, validates the ID token and calls the API with the access token.
Mermaid code
sequenceDiagram actor U as User participant B as Browser participant App as Web App participant IdP as Identity Provider participant API as Resource API U->>App: Click Log in App->>B: Redirect to IdP with code challenge B->>IdP: Authorization request IdP->>U: Sign-in and consent page U->>IdP: Enter credentials IdP-->>B: Redirect with authorization code B->>App: Code App->>IdP: Exchange code + code verifier IdP-->>App: ID token, access token, refresh token App->>App: Validate ID token App->>API: Request with access token API-->>App: Protected data App-->>U: Logged in
Related templates
Kubernetes Microservices Deployment
How a microservices app runs on Kubernetes in the cloud: ingress, namespaces, services with multiple replicas, managed databases and monitoring.
CI/CD Pipeline Flowchart
A typical CI/CD pipeline from a pull request to production: build, tests, security scans, staging deploy, approval and a canary release.
Multi-Tenant SaaS Architecture
A B2B SaaS product serving many customer organisations from one platform: tenant-aware services, per-tenant data isolation, billing and admin.
AWS Three-Tier Web Application
The classic three-tier web app on AWS: CloudFront and a load balancer, an autoscaling app tier in private subnets, and a Multi-AZ database.
Event-Driven Architecture with Kafka
Services that talk through events instead of direct calls: an order service publishes events that inventory, payments, notifications and analytics react to.
SaaS Subscription Billing Lifecycle
The states of a SaaS customer's subscription: trial, active, past due with retries, paused, cancelled and expired.