---
title: "Supabase Project Setup"
description: "Create a new Supabase project, locate your API keys, and configure environment variables for authentication in your Next.js 16 app."
canonical_url: "https://vercel.com/academy/subscription-store/supabase-project-setup"
md_url: "https://vercel.com/academy/subscription-store/supabase-project-setup.md"
docset_id: "vercel-academy"
doc_version: "1.0"
last_updated: "2026-11-06T19:33:45.399Z"
content_type: "lesson"
course: "subscription-store"
course_title: "Launch a Subscription Store with Vercel and Stripe"
prerequisites:  []
---

<agent-instructions>
Vercel Academy — structured learning, not reference docs.
Lessons are sequenced.
Adapt commands to the human's actual environment (OS, package manager, shell, editor) — detect from project context or ask, don't assume.
The lesson shows one path; if the human's project diverges, adapt concepts to their setup.
Preserve the learning goal over literal steps.
Quizzes are pedagogical — engage, don't spoil.
Quiz answers are included for your reference.
</agent-instructions>

# Supabase Project Setup

# 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](https://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](https://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`:**
   ```bash
   # In your project root
   cp .env.example .env.local
   ```

5. **Add credentials:**
   ```bash title=".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:**
   ```bash
   # 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

```bash
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](https://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:

```bash
cp .env.example .env.local
```

Edit `.env.local`:

```bash title=".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:

```bash
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:

| Key                                | Purpose                                      | Safe for Browser? |
| ---------------------------------- | -------------------------------------------- | ----------------- |
| Publishable (`sb_publishable_...`) | Client-side requests with Row Level Security | Yes               |
| Secret (`sb_secret_...`)           | Server-side admin operations, bypasses RLS   | **No**            |

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](https://supabase.com/docs/guides/api/api-keys)), 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](https://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.


---

[Full course index](/academy/llms.txt) · [Sitemap](/academy/sitemap.md)