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
| Variable | Replace 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.