How to Connect Supabase to Netlify

In the Supabase Dashboard, go to Settings > API (or Project Settings > API). You will find three values you need: the Project URL (e.g., https://abcdefgh.supabase.co), the anon public key (safe for client-side use, respects RLS), and the service role key (server-only, bypasses RLS). Copy these values — you will add them to Netlify in the next step. Never expose the service role key in client-side code.

Go to your Netlify site Dashboard, click Site Settings > Environment Variables (or Site Configuration > Environment Variables on newer Netlify UI). Click Add a Variable and add each Supabase credential. The variable names depend on your framework: Next.js uses NEXT_PUBLIC_ prefix, Vite uses VITE_ prefix, and plain JavaScript uses any name. Add the variables for all deploy contexts (production, deploy previews, branch deploys) unless you want different values per context.

1# For Next.js projects:
2NEXT_PUBLIC_SUPABASE_URL=https://abcdefgh.supabase.co
3NEXT_PUBLIC_SUPABASE_ANON_KEY=eyJhbGciOiJIUzI1NiIs...
4
5# For Vite projects (React, Vue, Svelte):
6VITE_SUPABASE_URL=https://abcdefgh.supabase.co
7VITE_SUPABASE_ANON_KEY=eyJhbGciOiJIUzI1NiIs...
8
9# For server-side only (Netlify Functions):
10SUPABASE_SERVICE_ROLE_KEY=eyJhbGciOiJIUzI1NiIs...

In Site Settings > Build & Deploy, verify your build command and publish directory match your framework. Netlify auto-detects most frameworks, but you may need to adjust settings. The build command compiles your app, and the publish directory is where the output goes. Make sure environment variables with the correct prefix are accessible during the build process.

1# Next.js
2# Build command: next build
3# Publish directory: .next
4
5# Vite (React, Vue, Svelte)
6# Build command: npm run build
7# Publish directory: dist
8
9# Create React App
10# Build command: npm run build
11# Publish directory: build
12
13# SvelteKit
14# Build command: npm run build
15# Publish directory: build

In your frontend code, create the Supabase client using the environment variables you configured. The exact variable name depends on your framework. For client-side code, always use the anon key — never the service role key. The Supabase client will automatically include the anon key in API requests, and your RLS policies will control access.

1// For Next.js
2import { createClient } from '@supabase/supabase-js'
3
4export const supabase = createClient(
5  process.env.NEXT_PUBLIC_SUPABASE_URL!,
6  process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!
7)
8
9// For Vite
10import { createClient } from '@supabase/supabase-js'
11
12export const supabase = createClient(
13  import.meta.env.VITE_SUPABASE_URL,
14  import.meta.env.VITE_SUPABASE_ANON_KEY
15)

For server-side operations that need to bypass RLS (like admin actions or webhook handlers), use Netlify Functions with the service role key. Create functions in the netlify/functions/ directory. Environment variables are automatically available in functions via process.env. Use the service role key to create a Supabase admin client that bypasses Row Level Security — but never expose this client or key to the browser.

1// netlify/functions/admin-action.ts
2import { createClient } from '@supabase/supabase-js'
3
4export default async function handler(event: any) {
5  // Service role client bypasses RLS
6  const supabaseAdmin = createClient(
7    process.env.NEXT_PUBLIC_SUPABASE_URL!,
8    process.env.SUPABASE_SERVICE_ROLE_KEY!
9  )
10
11  // This query bypasses all RLS policies
12  const { data, error } = await supabaseAdmin
13    .from('users_private')
14    .select('*')
15
16  if (error) {
17    return { statusCode: 500, body: JSON.stringify({ error: error.message }) }
18  }
19
20  return {
21    statusCode: 200,
22    body: JSON.stringify(data),
23  }
24}

If your app uses client-side routing (React Router, Vue Router), you need to configure Netlify redirects so that all routes serve your index.html file. Without this, refreshing the page on a deep link like /dashboard returns a 404 error. Create a _redirects file in your public directory or add a redirect rule to netlify.toml. This is especially important for Supabase auth callback URLs that redirect back to your app after OAuth or magic link login.

1# Option 1: public/_redirects
2/*    /index.html   200
3
4# Option 2: netlify.toml
5[[redirects]]
6  from = "/*"
7  to = "/index.html"
8  status = 200