How to Set Environment Variables in Supabase

Go to the Supabase Dashboard, select your project, and navigate to Settings > API. You will see two sections: Project URL and Project API keys. The Project URL is your Supabase endpoint (e.g., https://abcdefgh.supabase.co). Under API keys, you have the anon (public) key and the service_role (secret) key. The anon key is safe to use in browser code because it respects RLS policies. The service role key bypasses all RLS and should never be exposed in client-side code.

1# Your Supabase environment variables:
2SUPABASE_URL=https://abcdefgh.supabase.co
3SUPABASE_ANON_KEY=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...
4SUPABASE_SERVICE_ROLE_KEY=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...

Next.js uses .env.local for local development environment variables. Variables prefixed with NEXT_PUBLIC_ are exposed to the browser. The Supabase URL and anon key need this prefix because the client runs in the browser. The service role key must NOT have the NEXT_PUBLIC_ prefix because it should only be available in server-side code (API routes, server components, middleware).

1# .env.local (Next.js)
2
3# Client-side (available in browser)
4NEXT_PUBLIC_SUPABASE_URL=https://abcdefgh.supabase.co
5NEXT_PUBLIC_SUPABASE_ANON_KEY=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...
6
7# Server-side only (NOT exposed to browser)
8SUPABASE_SERVICE_ROLE_KEY=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...

Vite-based projects (including Lovable and V0 exports) use the VITE_ prefix for client-side variables. Only variables starting with VITE_ are available in browser code via import.meta.env. For Lovable projects, set environment variables in the Cloud tab > Secrets section. For V0 projects, set them in the Vars panel. When deploying to Vercel, use the Supabase integration or manually add the variables in Vercel's Environment Variables settings.

1# .env.local (Vite / Lovable / V0)
2
3# Client-side (available in browser)
4VITE_SUPABASE_URL=https://abcdefgh.supabase.co
5VITE_SUPABASE_ANON_KEY=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...
6
7# Usage in code:
8# const supabase = createClient(
9#   import.meta.env.VITE_SUPABASE_URL,
10#   import.meta.env.VITE_SUPABASE_ANON_KEY
11# )

Edge Functions automatically have access to SUPABASE_URL, SUPABASE_ANON_KEY, SUPABASE_SERVICE_ROLE_KEY, and SUPABASE_DB_URL without any configuration. For additional secrets (like third-party API keys), use the supabase secrets set command. Secrets are encrypted and available via Deno.env.get() inside your functions. You do not need to redeploy functions after setting new secrets.

1# Set a secret for Edge Functions
2supabase secrets set STRIPE_SECRET_KEY=sk_live_abcdef123456
3
4# Set multiple secrets from a file
5supabase secrets set --env-file ./supabase/.env
6
7# List current secrets
8supabase secrets list
9
10# Unset a secret
11supabase secrets unset STRIPE_SECRET_KEY
12
13# Access in Edge Function code:
14# const stripeKey = Deno.env.get('STRIPE_SECRET_KEY')!

With environment variables configured, create your Supabase client. For client-side code, use the anon key. For server-side code that needs to bypass RLS (admin operations, webhooks, cron jobs), use the service role key. Always create separate client instances for each purpose so you do not accidentally use the service role key in browser code.

1import { createClient } from '@supabase/supabase-js'
2
3// Client-side: uses anon key, respects RLS
4export const supabase = createClient(
5  process.env.NEXT_PUBLIC_SUPABASE_URL!,
6  process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!
7)
8
9// Server-side only: uses service role key, bypasses RLS
10// NEVER import this in client-side code!
11export const supabaseAdmin = createClient(
12  process.env.NEXT_PUBLIC_SUPABASE_URL!,
13  process.env.SUPABASE_SERVICE_ROLE_KEY!,
14  {
15    auth: {
16      autoRefreshToken: false,
17      persistSession: false,
18    },
19  }
20)