OAuth 2.0 Explained Simply (Without the RFC)
OAuth confuses most developers the first time because the terminology obscures simple concepts. Here's what's actually happening when you 'Sign in with Google.'
When you click 'Sign in with Google,' a lot happens in about two seconds. Understanding what's happening demystifies OAuth and makes implementing it (or debugging it) much less painful.
The Core Problem OAuth Solves
Before OAuth, if a third-party app needed access to your data (say, a calendar app needing your Google Calendar), you'd give it your Google password. The app could then do anything with your Google account. OAuth was designed to solve this: grant limited, revocable access without sharing passwords.
The Four Actors in OAuth
- Resource Owner: You (the user whose data is being accessed)
- Client: The app requesting access (the calendar app)
- Authorization Server: The entity that issues tokens (Google's auth server)
- Resource Server: Where the actual data lives (Google Calendar API)
The Authorization Code Flow (What Actually Happens)
Step 1: Your app redirects you to Google with a request for specific permissions (scopes) and a random state value. Step 2: You log into Google and approve the permissions. Step 3: Google redirects back to your app with an authorization code. Step 4: Your app's backend exchanges that code for an access token (and optionally a refresh token). Step 5: Your app uses the access token to make API requests to Google.
Why the code exchange step? The authorization code travels through the browser (visible in the URL). Exchanging it for tokens happens server-to-server, keeping the actual tokens out of the browser. This is why the Authorization Code flow is more secure than the older Implicit flow.
Access Tokens vs Refresh Tokens
Access tokens are short-lived (minutes to hours) — they're what you use to make API calls. Refresh tokens are long-lived (days to months) and can request new access tokens when they expire. This limits exposure: if an access token leaks, it expires quickly. Refresh tokens should be stored securely and never exposed to the browser.
PKCE for Single-Page Apps
Single-page apps (React, Vue, Angular) can't safely store a client secret. PKCE (Proof Key for Code Exchange, pronounced 'pixy') solves this: the app generates a random code verifier, hashes it into a code challenge, and sends the challenge with the authorization request. When exchanging the code for tokens, the app sends the original verifier. The server verifies the hash matches. No client secret needed.
Frequently Asked Questions
What's the difference between authentication and authorization?+
What's the difference between OAuth and JWT?+
Why should I use OAuth instead of building my own auth?+
Is OAuth secure? What are the common vulnerabilities?+
🔧 Free Tools Used in This Guide
FreeToolKit Team
FreeToolKit Team
We build free browser-based tools and write practical guides that skip the fluff.
Tags: