Getting Started with Supabase

Why Supabase?

Supabase combines auth, Postgres, storage, and real-time APIs with a simple client and a solid free tier. This starter uses Supabase for user accounts and server-side data so you can skip building your own auth stack.

1) Create a project

Go to supabase.com and create a new project. Copy your URL and anon/service keys from Project Settings → API.

2) Add environment variables

Add your credentials to .env.local:

NEXT_PUBLIC_SUPABASE_URL=https://your-project.supabase.co
NEXT_PUBLIC_SUPABASE_ANON_KEY=your-anon-key
SUPABASE_SERVICE_ROLE_KEY=your-service-role-key

The anon key is safe for the browser and powers the client provider. The service role key stays server-side for webhooks and admin tasks.

3) Seed the database

Use the included seed to create minimal tables and RLS policies:

npm run seed:supabase

This sets up profiles (auth users + billing access) and leads (marketing capture) with sensible defaults.

4) Configure auth redirect URLs

In Supabase → Authentication → URL Configuration, set:

• Site URL: http://localhost:3000 for local dev, your domain for production.
• Redirect URLs: http://localhost:3000/auth/callback (and your prod domain). The login page sends users here after magic links or OAuth.

5) Enable providers

Turn on Email (magic links) and any OAuth providers you need (e.g. Google). The starter uses signInWithOtp and signInWithOAuth with the redirect above.

6) Test locally

Run npm run dev, request a magic link, and confirm you land on /auth/callback then your dashboard. Check the profiles table to see the user row; Stripe webhooks will flip has_access when billing is wired.

Common gotchas

• Redirect URLs must match exactly (protocol + path).
• Keep the service role key server-only.
• If you swap price IDs in config.ts, webhooks will upsert the profile with the correct ID automatically.