---
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-04-11T11:39:33.045Z"
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 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](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:**
   - 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`:**
   ```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_ANON_KEY=eyJhbGciOiJIUzI1NiIs...
   ```

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_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](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 **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:

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

Edit `.env.local`:

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

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

Supabase provides two API keys:

| Key             | Purpose                                      | Safe for Browser? |
| --------------- | -------------------------------------------- | ----------------- |
| `anon` (public) | Client-side requests with Row Level Security | Yes               |
| `service_role`  | Server-side admin operations, bypasses RLS   | **No**            |

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


---

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