How to Add Google Login to Next.js with Authon in 5 Minutes

Most auth tutorials take 30 minutes and leave you with a half-working setup. This one takes 5. We're going to add Google login to a Next.js 15 app using Authon — a self-hosted authentication platform with 15 SDKs. By the end, you'll have a working sign-in flow with a themed modal, protected routes, and server-side session verification. What You'll Build A Next.js app with Google OAuth sign-in A ShadowDOM login modal (no CSS conflicts) Middleware that protects private routes Server-side user verification in API routes Prerequisites Node.js 18+ An Authon account (free, self-hosted) or access to a hosted Authon instance A Google OAuth client ID and secret (from Google Cloud Console) Step 1: Create a Next.js App npx create-next-app@latest my-app --typescript --tailwind --app cd my-app Or use the Authon CLI scaffolding tool: npx create-authon-app my-app --framework nextjs Step 2: Install the Authon SDK npm install @authon/nextjs @authon/js The @authon/nextjs package includes React component