Rethinking Authentication in Modern Web Apps

Modern Auth Patterns for Next.js

Authentication has evolved significantly. Here's how we structure auth in our SaaS template.

The Problem

Traditional auth patterns don't work well with React Server Components. You can't use hooks in server components, and you need the user session available on the server for SSR.

The Solution: SSR Auth

Supabase's SSR package solves this elegantly:

1. Middleware: Checks session on every request and refreshes the cookie

1. Server Client: createClient() in server components reads cookies

1. Client Client: createClient() in browser components uses the same cookie

Data Flow

Request → Middleware (refresh session) → Server Component → Client Component
                              ↓
                        Cookie stored
                              ↓
                    Client reads cookie via createBrowserClient

Protected Routes

Middleware checks for protected routes and redirects unauthenticated users to the login page. Auth pages redirect authenticated users to the dashboard.

Why This Matters

This pattern gives us:

• No flash of unauthenticated content

• SEO-friendly pages

• Type-safe auth across server and client

• Minimal boilerplate