Supabase Auth
Last updated December 18, 2025

Overview

Supabase Auth provides a complete authentication solution with email/password, magic links, OAuth providers, and user management. It's integrated with Supabase's database and real-time features.

Create Supabase Project

  1. Go to supabase.com and sign up
  2. Click "New Project"
  3. Fill in project details (name, database password, region)
  4. Click "Create new project"
  5. Wait for provisioning (2-3 minutes)

Get API Credentials

  1. In your Supabase project dashboard, go to "Settings" → "API"
  2. You'll find these values:
    • Project URL: https://xxx.supabase.co (this is your NEXT_PUBLIC_SUPABASE_URL)
    • anon public key: A long string starting with eyJ... (this is your NEXT_PUBLIC_SUPABASE_ANON_KEY)
    • service_role key: Another long string (this is your SUPABASE_SERVICE_ROLE_KEY - keep this secret!)
  3. Copy these values - you'll need them in the next step

Configure Auth Settings

  1. Go to "Authentication" → "Providers" in your Supabase dashboard
  2. Enable the providers you want (Email, Google, GitHub, etc.)
  3. For Email provider:
    • Enable "Enable email confirmations" if you want email verification
    • Configure email templates in "Email Templates"
  4. For OAuth providers (e.g., Google):
    • Enable the provider
    • Add your OAuth client ID and secret (from Google Cloud Console)
    • Add redirect URL: https://yourproject.supabase.co/auth/v1/callback
  5. Go to "Authentication" → "URL Configuration"
  6. Add your site URL: http://localhost:3000 (for development)
  7. Add redirect URLs:
    • http://localhost:3000/auth/callback
    • https://yourdomain.com/auth/callback (for production)

Environment Variables

Add these variables to your .env.local file:

# Supabase
NEXT_PUBLIC_SUPABASE_URL="https://xxx.supabase.co"
NEXT_PUBLIC_SUPABASE_ANON_KEY="eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9..."
SUPABASE_SERVICE_ROLE_KEY="eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9..." # Server-side only

Important:

  • NEXT_PUBLIC_SUPABASE_URL is your project URL from "Settings" → "API"
  • NEXT_PUBLIC_SUPABASE_ANON_KEY is the anon/public key (safe to expose in client)
  • SUPABASE_SERVICE_ROLE_KEY is the service role key (NEVER expose in client - server-side only)
  • All NEXT_PUBLIC_* variables are exposed to the browser

Testing

  1. Restart your dev server: npm run dev
  2. Navigate to http://localhost:3000/sign-up
  3. Try creating an account with email/password
  4. Check your email for the verification link (if enabled)
  5. Try signing in with OAuth provider (if configured)
  6. Verify user appears in Supabase dashboard → "Authentication" → "Users"

Troubleshooting:

  • If sign-up fails, check that email provider is enabled in Supabase dashboard
  • For OAuth, verify redirect URLs match exactly in both Supabase and OAuth provider
  • Check browser console and Supabase logs for error details
  • Ensure environment variables are correctly set