Stop 12 · AuthenticationTopics · 2/10

OAuth

In short

"Continue with Google" buttons save users from yet another password. OAuth is the set of rules that makes those buttons work without your app ever seeing the Google password.

An open standard that lets users grant a third-party app limited access to their account on another service (Google, GitHub) without sharing their password.

The jaadu receives a single key card at a hotel front desk, with only one room door glowing behind.

Think of it like this

The hotel key card

At a hotel, the front desk checks your ID once and hands you a key card. The card opens only your room, only until checkout. Your app is the guest: Google checks the user and hands your app a limited, expiring card, never the user's actual ID.

Watch it happen

Authorization code flow with PKCE

Your app

Browser

Google auth

Your server

make verifier + hash

1/7Your app creates a random code_verifier and its SHA-256 hash, the code_challenge.

The big ideas

What you need to know

Three players

The user, your app (the client) and the provider like Google, which runs the authorization server.

Scopes limit access

A scope says what your app may touch, like 'email' or 'read:user'. Ask for the smallest set you need.

Code first, token later

The browser gets a short one-time code. That code is swapped for tokens in a separate, safer request.

PKCE protects the swap

PKCE (say 'pixy') adds a secret only your app knows, so a stolen code is useless to anyone else.

See it in code

Walk through the code

1// Build the PKCE pair before redirecting the user2function base64url(bytes: Uint8Array) {3  return btoa(String.fromCharCode(...bytes))4    .replace(/\+/g, "-").replace(/\//g, "_").replace(/=+$/, "");5}6 7const verifier = base64url(crypto.getRandomValues(new Uint8Array(32)));8const hash = await crypto.subtle.digest("SHA-256", new TextEncoder().encode(verifier));9const challenge = base64url(new Uint8Array(hash));10 11// Save verifier (e.g. in an HttpOnly cookie), then send challenge:12// ...&code_challenge=${challenge}&code_challenge_method=S256&state=...

1/4base64url turns raw bytes into URL-safe text: plus becomes dash, slash becomes underscore, padding is removed.

Libraries like Auth.js do this for you, but seeing it once helps. The verifier never leaves your side until the token swap.

Save yourself the pain

Common mistakes

Oops

Thinking OAuth tells you who the user is.

Do this instead

OAuth is about permission. Identity comes from OpenID Connect, a layer on top that gives you an ID token.

Oops

Skipping the state parameter.

Do this instead

Send a random state and check it on the callback. It blocks attackers from forcing their login into your user's session.

Oops

Asking for every scope 'just in case'.

Do this instead

Request the minimum. Users trust a short consent screen more, and a leaked token can do less harm.

Your mission

Watch OAuth happen

~15 min

Quick check

Why does the OAuth code flow return a short code instead of the access token directly in the URL?

Go deeper

1Read through the OAuth 'authorization code' flow diagram step by step.
2Try 'Sign in with GitHub' on a demo project using a library like NextAuth.
3Learn the difference between OAuth (authorization) and OpenID Connect (authentication).