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 the URL and publishable key from Settings > API Keys
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 publishable key
3. Create .env.local with the credentials
4. Verify the dev server loads without errors

Implementation hints:

• The publishable key is safe to expose in the browser. Row Level Security decides what it can reach
• 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:

   • Click Connect at the top of the project dashboard and copy the Project URL (starts with https://)
   • Navigate to Settings > API Keys (in the left sidebar)
   • Copy the publishable key (starts with sb_publishable_)
   • Copy a secret key (starts with sb_secret_). The checkout flow in 2.3 uses it on the server

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_PUBLISHABLE_KEY=sb_publishable_...
   SUPABASE_SECRET_KEY=sb_secret_...

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_PUBLISHABLE_KEY and SUPABASE_SECRET_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 Connect at the top of the dashboard to find the Project URL
2. Click Settings in the left sidebar, then API Keys
3. Find these values:

Project URL: https://abcdefghijklmnop.supabase.co
Publishable key: sb_publishable_...
Secret key: sb_secret_...

If the API Keys page doesn't list a publishable key yet, create one there. Older projects start with only the legacy anon and service_role keys.

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_PUBLISHABLE_KEY=sb_publishable_...
SUPABASE_SECRET_KEY=sb_secret_...

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

This app uses two kinds of Supabase API key:

The NEXT_PUBLIC_ prefix makes variables available in browser code. Only use this prefix for the publishable key. Never expose the secret key.

Tutorials written before these keys existed use the legacy anon and service_role keys, which are long JWTs that start with eyJ. Supabase is retiring them (timeline), so this course uses the new keys.

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
• Verify NEXT_PUBLIC_SUPABASE_PUBLISHABLE_KEY holds the publishable key, not the secret key. Supabase rejects a secret key sent from a browser
• 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 keys are under Settings > API Keys
• 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 all three 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.