Cursorcursorintermediate

Add Supabase Auth to Next.js (Cursor Prompt)

Cursor prompt to add Supabase authentication with middleware, protected routes, and profile sync.

What you'll get

Complete Supabase Auth integration with middleware, protected routes, profile sync, and auth UI components.

The Prompt

Add Supabase Auth to this Next.js App Router project.

FILES TO CREATE:
- src/lib/supabase/client.ts — Browser Supabase client using createBrowserClient
- src/lib/supabase/server.ts — Server Supabase client using createServerClient with cookies
- src/middleware.ts — Auth middleware that refreshes sessions and protects routes
- src/app/auth/signin/page.tsx — Sign in with email/password and OAuth buttons
- src/app/auth/signup/page.tsx — Sign up with email, password, confirm password
- src/app/auth/callback/route.ts — OAuth callback handler
- src/app/auth/reset-password/page.tsx — Request password reset
- src/app/auth/update-password/page.tsx — Set new password
- src/components/auth/AuthButton.tsx — Navbar auth button (sign in / user menu)

DATABASE:
- Create "profiles" table: id (uuid, FK to auth.users), email, full_name, avatar_url, created_at, updated_at
- Create trigger: on auth.users INSERT, auto-create profile row
- RLS: Users can read/update own profile only

IMPLEMENTATION:
1. Use @supabase/ssr for cookie-based auth (NOT @supabase/auth-helpers-nextjs which is deprecated).
2. Middleware must refresh the session on every request and redirect unauthenticated users from protected routes to /auth/signin.
3. Protected routes: /dashboard/*, /profile/*, /settings/*. Public routes: /, /auth/*, /pricing.
4. After signup, redirect to /auth/callback to exchange code for session.
5. AuthButton shows "Sign In" when logged out, user avatar + dropdown when logged in.

DO NOT CHANGE:
- Existing page layouts or styles
- Existing API routes
- tailwind.config.ts

ENVIRONMENT VARIABLES:
- NEXT_PUBLIC_SUPABASE_URL
- NEXT_PUBLIC_SUPABASE_ANON_KEY

Replace these variables

VariableReplace with
[PROTECTED_ROUTES]Routes that require authentication
[OAUTH_PROVIDERS]OAuth providers to enable (e.g., google, github)

Tips for best results

Use @supabase/ssr (not the deprecated auth-helpers) — it handles cookies correctly with App Router.

Always refresh the session in middleware to prevent stale tokens and unexpected logouts.

Follow-up prompts

Add role-based access

Add a role column to the profiles table and create a withRole() middleware wrapper that checks roles before granting access to admin routes.

Related prompts