Supabase Project Setup

Supabase handles authentication so you don't have to build password hashing, session management, and email verification from scratch. Creating a project takes two minutes and gives you production-ready auth infrastructure.

Outcome

Create a Supabase project and configure environment variables so your app can authenticate users.

Fast Track

1. Create a project at supabase.com/dashboard
2. Copy URL and anon key from Settings > API
3. Add to .env.local and restart dev server

Hands-on Exercise 1.2

Set up Supabase authentication for your project:

Requirements:

1. Create a new Supabase project
2. Locate the project URL and anon key
3. Create .env.local with the credentials
4. Verify the dev server loads without errors

Implementation hints:

• The anon key is safe to expose in the browser - it's designed for client-side use
• Never commit .env.local to git (it's already in .gitignore)
• Restart the dev server after adding environment variables

Try It

1. Create Supabase project:

   • Go to supabase.com/dashboard
   • Click New Project
   • Enter a project name (e.g., "subscription-storefront")
   • Set a database password (save this somewhere secure)
   • Select a region close to your users
   • Click Create new project

2. Wait for provisioning:

   • Takes about 2 minutes
   • You'll see a spinning indicator while resources are created

3. Get your API credentials:

   • Navigate to Settings > API (in the left sidebar)
   • Copy the Project URL (starts with https://)
   • Copy the anon public key under "Project API keys"

4. Create .env.local:

   # In your project root
   cp .env.example .env.local

5. Add credentials:

   .env.local

   NEXT_PUBLIC_SUPABASE_URL=https://your-project-id.supabase.co
   NEXT_PUBLIC_SUPABASE_ANON_KEY=eyJhbGciOiJIUzI1NiIs...

6. Restart dev server:

   # Stop the server (Ctrl+C) and restart
   pnpm dev

7. Verify:

   ▲ Next.js 16.0.10
   - Local: http://localhost:3000
   - Environments: .env.local
   
   ✓ Starting...
   ✓ Ready in 1.2s
   

   No errors about missing environment variables means you're configured correctly.

Commit

git add -A
git commit -m "feat(auth): add Supabase environment configuration"

Done-When

• Supabase project created and provisioned
• .env.local file created with NEXT_PUBLIC_SUPABASE_URL
• .env.local file contains NEXT_PUBLIC_SUPABASE_ANON_KEY
• Dev server starts without environment variable errors
• .env.local is NOT committed to git

Solution

Step 1: Create Supabase Project

1. Visit supabase.com/dashboard and sign in
2. Click New Project
3. Fill in the details:
   • Name: subscription-storefront
   • Database Password: Generate a strong password and save it
   • Region: Choose the closest to your users
4. Click Create new project and wait for provisioning

Step 2: Get API Credentials

Once provisioning completes:

1. Click Settings in the left sidebar
2. Click API under Configuration
3. Find these values:

Project URL: https://abcdefghijklmnop.supabase.co
anon public: eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...

Step 3: Configure Environment

Create .env.local from the example:

cp .env.example .env.local

Edit .env.local:

NEXT_PUBLIC_SUPABASE_URL=https://abcdefghijklmnop.supabase.co
NEXT_PUBLIC_SUPABASE_ANON_KEY=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6ImFiY2RlZmdoaWprbG1ub3AiLCJyb2xlIjoiYW5vbiIsImlhdCI6MTYwMDAwMDAwMCwiZXhwIjoxOTAwMDAwMDAwfQ.xxxxx

Step 4: Verify

Restart the dev server:

pnpm dev

The server should start without errors. If you see warnings about missing environment variables, double-check your .env.local file.

Understanding the Keys

Supabase provides two API keys:

The NEXT_PUBLIC_ prefix makes variables available in browser code. Only use this prefix for the anon key - never expose the service role key.

Troubleshooting

"Missing environment variables" error:

• Verify .env.local exists in project root (not in a subdirectory)
• Check for typos in variable names
• Restart the dev server after changes

"Invalid API key" error:

• Make sure you copied the entire key (they're long)
• Verify you're using the anon key, not the service role key
• Check the Supabase dashboard to confirm the project is active

Can't find API settings:

• In the Supabase dashboard, look for the gear icon (Settings)
• API settings are under Settings > API
• Make sure you're in the correct project

Advanced: Environment Variables in Vercel

Once your local setup works, add the same variables to Vercel:

1. Go to your project in vercel.com/dashboard
2. Click Settings > Environment Variables
3. Add both variables for all environments (Production, Preview, Development)
4. Redeploy to pick up the new variables

This makes your deployed app work with Supabase. You'll do a full production deploy in Section 4.