Why Supabase Auth?
Supabase Auth gives you email/password authentication, social OAuth, magic links, phone auth, and multi-factor authentication — all backed by PostgreSQL row-level security. The Next.js integration via @supabase/ssr has matured significantly and is now the recommended approach.
Server vs Client Clients
The most confusing part of Supabase + Next.js is that you need different client instances for server components, route handlers, and client components. The @supabase/ssr package provides createServerClient and createBrowserClient for this purpose. Server components should always use createServerClient with the cookies() function.
Protecting Routes
The cleanest pattern for protecting routes in the App Router is a middleware function that checks for a valid session and redirects to the login page if none is found. For fine-grained access control, combine middleware-level authentication with Supabase's row-level security policies.
Common Mistakes
The most common mistake is using the browser client in server components, which silently fails. The second most common is forgetting to call supabase.auth.getSession() in middleware to refresh expired tokens — without this, users get logged out when their access token expires even if their refresh token is valid.