Understanding OAuth 2.0 Authorization Code Flow

Published on: 2023-02-21

Securing APIs and handling user authentication have become central to how we build modern apps. One of the most widely used standards today is OAuth 2.0 — particularly the Authorization Code Flow, often used by web apps that communicate with third-party services like Google, GitHub, or Microsoft.

Let’s break it down in plain language — and then visualize how it works using a sequence diagram.

❓ The Problem

Imagine your web app wants to let users sign in using Google. You don’t want to ask for their Google password directly (nor should you). Instead, you want to redirect them to Google to approve access and then get back a token you can use — securely.

This is where OAuth 2.0’s Authorization Code Flow comes in.

📊 Sequence Diagram (Mermaid)

Here’s what the interaction looks like using a Mermaid.js sequence diagram:

🔍 Key Steps Explained

• Authorization Request: Your app redirects the user to the provider’s /authorize endpoint.
• Consent Prompt: The user logs in and agrees to grant access.
• Authorization Code: The provider sends a short-lived code to your redirect URI.
• Token Exchange: Your server securely exchanges that code for an access token (and optionally, a refresh token).
• Access Resource: You use that access token to request protected resources on the user’s behalf.

🔐 Why It’s Secure

This flow separates the user interaction from your server’s token handling. Since the access token is only exchanged on the backend, it can’t be intercepted by malicious scripts running in the browser.

🌐 Real-World Uses

• A React front-end that logs in via GitHub
• A Node.js server accessing Google Calendar API
• A CLI tool that authenticates using a web browser popup

🧾 Summary

OAuth 2.0 can feel intimidating at first, but when visualized, the logic becomes clearer. The sequence diagram above shows how each party plays a role — and why this method remains a secure, standards-based approach to third-party login.

If you’re building something that involves user identity, it’s worth getting comfortable with this flow.