supabase-setup

Supabase Setup

Initialize and configure Supabase for a project. If target is provided, focus on that area (auth, storage, schema). Default to "all" if omitted.

Step 1: Install and Initialize

pnpm add @supabase/supabase-js
pnpm add -D supabase
npx supabase init

This creates a supabase/ directory with config and a migrations/ folder.

Link to a remote project (ask the user for their project ref if not provided):

npx supabase link --project-ref <project-ref>

Step 2: Environment Variables

Add to .env.local:

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

Variable	Exposure	Purpose
NEXT_PUBLIC_SUPABASE_URL	Client + Server	API endpoint
NEXT_PUBLIC_SUPABASE_ANON_KEY	Client + Server	Public key for RLS-protected access
SUPABASE_SERVICE_ROLE_KEY	Server only	Bypasses RLS. Never expose to client.

Step 3: Create the Supabase Client

Create src/lib/supabase/client.ts (browser client):

import { createBrowserClient } from '@supabase/ssr'

export function createClient() {
  return createBrowserClient(
    process.env.NEXT_PUBLIC_SUPABASE_URL!,
    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
  )
}

Create src/lib/supabase/server.ts (server client):

import { createServerClient } from '@supabase/ssr'
import { cookies } from 'next/headers'

export async function createClient() {
  const cookieStore = await cookies()
  return createServerClient(
    process.env.NEXT_PUBLIC_SUPABASE_URL!,
    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
    {
      cookies: {
        getAll() {
          return cookieStore.getAll()
        },
        setAll(cookiesToSet) {
          cookiesToSet.forEach(({ name, value, options }) =>
            cookieStore.set(name, value, options),
          )
        },
      },
    },
  )
}

Install the SSR helper: