If you've tried to add Google OAuth to a SPA or a Next.js app, you've probably run into the same friction: Google's documentation is comprehensive but dense, most tutorials are incomplete, and the parts that matter most — like exactly why you need PKCE, or what access_type=offline actually does — are buried.

This is the walkthrough I wish had existed when I built the auth layer for OvertimeIQ .

By the end you'll understand:

Why PKCE exists and why it's the correct flow for SPAs

How to implement the full code exchange from scratch (no OAuth libraries)

How to get a refresh_token (most tutorials quietly skip this)

How to do silent token refresh mid-session without any UI

How to feed the Google id_token into Supabase for a second independent auth session

Why PKCE, and why not the alternatives

The implicit flow (the original OAuth approach for SPAs) returned the access token directly in the URL fragment after redirect.…