# How to Connect Supabase to Netlify

- Tool: Supabase
- Difficulty: Beginner
- Time required: 10-15 min
- Compatibility: Supabase (all plans), Netlify (all plans), any JavaScript framework
- Last updated: March 2026

## TL;DR

To connect Supabase to Netlify, add your Supabase environment variables (SUPABASE_URL and SUPABASE_ANON_KEY) in the Netlify Dashboard under Site Settings > Environment Variables. Configure your build command and publish directory. For serverless functions that need the service role key, add SUPABASE_SERVICE_ROLE_KEY as a server-only variable. Netlify does not have an official Supabase integration like Vercel, so you configure environment variables manually.

## Connecting Supabase to a Netlify Deployment

Netlify is a popular deployment platform for static sites and serverless applications. Unlike Vercel, Netlify does not have a built-in Supabase integration that auto-syncs environment variables. Instead, you manually add your Supabase API URL and keys as environment variables in the Netlify Dashboard. This tutorial covers the full setup including client-side configuration, serverless functions, and framework-specific build settings.

## Before you start

- A Supabase project with API keys (found in Dashboard > Settings > API)
- A Netlify account with a deployed site or a site ready to deploy
- A frontend project using @supabase/supabase-js
- Your project's Git repository connected to Netlify

## Step-by-step guide

### 1. Find your Supabase API credentials

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.

**Expected result:** You have your Supabase Project URL, anon key, and service role key copied and ready to add to Netlify.

### 2. Add environment variables in the Netlify Dashboard

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.

```
# For Next.js projects:
NEXT_PUBLIC_SUPABASE_URL=https://abcdefgh.supabase.co
NEXT_PUBLIC_SUPABASE_ANON_KEY=eyJhbGciOiJIUzI1NiIs...

# For Vite projects (React, Vue, Svelte):
VITE_SUPABASE_URL=https://abcdefgh.supabase.co
VITE_SUPABASE_ANON_KEY=eyJhbGciOiJIUzI1NiIs...

# For server-side only (Netlify Functions):
SUPABASE_SERVICE_ROLE_KEY=eyJhbGciOiJIUzI1NiIs...
```

**Expected result:** Environment variables are saved in Netlify and will be available at build time and in serverless functions.

### 3. Configure your build settings for the framework

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.

```
# Next.js
# Build command: next build
# Publish directory: .next

# Vite (React, Vue, Svelte)
# Build command: npm run build
# Publish directory: dist

# Create React App
# Build command: npm run build
# Publish directory: build

# SvelteKit
# Build command: npm run build
# Publish directory: build
```

**Expected result:** Your site builds successfully on Netlify with Supabase environment variables available during the build.

### 4. Initialize the Supabase client in your application code

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.

```
// For Next.js
import { createClient } from '@supabase/supabase-js'

export const supabase = createClient(
  process.env.NEXT_PUBLIC_SUPABASE_URL!,
  process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!
)

// For Vite
import { createClient } from '@supabase/supabase-js'

export const supabase = createClient(
  import.meta.env.VITE_SUPABASE_URL,
  import.meta.env.VITE_SUPABASE_ANON_KEY
)
```

**Expected result:** The Supabase client connects to your project and can perform queries, authentication, and storage operations.

### 5. Access Supabase from Netlify serverless functions

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.

```
// netlify/functions/admin-action.ts
import { createClient } from '@supabase/supabase-js'

export default async function handler(event: any) {
  // Service role client bypasses RLS
  const supabaseAdmin = createClient(
    process.env.NEXT_PUBLIC_SUPABASE_URL!,
    process.env.SUPABASE_SERVICE_ROLE_KEY!
  )

  // This query bypasses all RLS policies
  const { data, error } = await supabaseAdmin
    .from('users_private')
    .select('*')

  if (error) {
    return { statusCode: 500, body: JSON.stringify({ error: error.message }) }
  }

  return {
    statusCode: 200,
    body: JSON.stringify(data),
  }
}
```

**Expected result:** The serverless function connects to Supabase using the service role key and can perform privileged operations.

### 6. Configure redirect rules for SPA routing

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.

```
# Option 1: public/_redirects
/*    /index.html   200

# Option 2: netlify.toml
[[redirects]]
  from = "/*"
  to = "/index.html"
  status = 200
```

**Expected result:** All routes serve the SPA correctly, and auth callback URLs redirect properly after login.

## Complete code example

File: `netlify-supabase-setup.ts`

```typescript
// Complete Supabase client configuration for a Netlify deployment
// Works with Vite-based projects (React, Vue, Svelte)

import { createClient } from '@supabase/supabase-js'

// Client-side Supabase client (uses anon key, respects RLS)
const supabaseUrl = import.meta.env.VITE_SUPABASE_URL
const supabaseAnonKey = import.meta.env.VITE_SUPABASE_ANON_KEY

if (!supabaseUrl || !supabaseAnonKey) {
  throw new Error(
    'Missing Supabase environment variables. ' +
    'Add VITE_SUPABASE_URL and VITE_SUPABASE_ANON_KEY ' +
    'in Netlify Site Settings > Environment Variables.'
  )
}

export const supabase = createClient(supabaseUrl, supabaseAnonKey)

// ======================================
// Example: Netlify serverless function
// File: netlify/functions/get-stats.ts
// ======================================
// import { createClient } from '@supabase/supabase-js'
//
// export default async function handler() {
//   const supabaseAdmin = createClient(
//     process.env.VITE_SUPABASE_URL!,
//     process.env.SUPABASE_SERVICE_ROLE_KEY!
//   )
//
//   const { count } = await supabaseAdmin
//     .from('projects')
//     .select('*', { count: 'exact', head: true })
//
//   return {
//     statusCode: 200,
//     headers: { 'Content-Type': 'application/json' },
//     body: JSON.stringify({ totalProjects: count }),
//   }
// }

// ======================================
// netlify.toml configuration
// ======================================
// [build]
//   command = "npm run build"
//   publish = "dist"
//
// [[redirects]]
//   from = "/*"
//   to = "/index.html"
//   status = 200
```

## Common mistakes

- **Using the wrong environment variable prefix for the framework (e.g., VITE_ in a Next.js project)** — undefined Fix: Next.js requires NEXT_PUBLIC_ prefix for client-side variables. Vite requires VITE_ prefix. Plain Node.js has no prefix requirement. Match the prefix to your build tool.
- **Exposing the SUPABASE_SERVICE_ROLE_KEY in client-side code** — undefined Fix: Only use the service role key in Netlify Functions (server-side). For client-side code, use the anon key which is safe because RLS policies control access.
- **Not triggering a redeploy after adding environment variables in Netlify** — undefined Fix: Environment variables are injected at build time. After adding or changing variables, trigger a new deploy from the Netlify Dashboard or push a new commit.
- **Forgetting to update the Supabase auth redirect URL from localhost to the Netlify domain** — undefined Fix: In Supabase Dashboard > Authentication > URL Configuration, add your Netlify domain (e.g., https://your-site.netlify.app) to the Redirect URLs list.

## Best practices

- Always use the anon key for client-side code and the service role key only in Netlify Functions
- Set environment variables for all deploy contexts (production, deploy previews) to ensure previews work correctly
- Add SPA redirect rules in _redirects or netlify.toml for client-side routing to work after page refresh
- Update Supabase auth redirect URLs when your Netlify domain changes or when adding custom domains
- Use Netlify's context-specific environment variables to point deploy previews at a staging Supabase project
- Add a build check that verifies Supabase environment variables are set before building

## Frequently asked questions

### Does Netlify have a built-in Supabase integration like Vercel?

No. Unlike Vercel, Netlify does not have an official Supabase integration that auto-syncs environment variables. You need to add Supabase credentials manually in the Netlify Dashboard under Environment Variables.

### Can I use different Supabase projects for production and deploy previews?

Yes. In Netlify, you can set context-specific environment variables. Set production variables pointing to your production Supabase project and deploy preview variables pointing to a staging project.

### Why is my Supabase connection failing after deploying to Netlify?

Check that your environment variables are set correctly in Netlify and that you triggered a redeploy after adding them. Verify the variable prefix matches your framework (NEXT_PUBLIC_ for Next.js, VITE_ for Vite).

### Can I use Supabase Edge Functions with Netlify?

Yes. Supabase Edge Functions run on Supabase's infrastructure, not Netlify's. Deploy them with the Supabase CLI (supabase functions deploy) and call them from your Netlify-hosted frontend using supabase.functions.invoke().

### How do I handle OAuth callbacks on Netlify?

Add your Netlify domain to the Redirect URLs in Supabase Dashboard > Authentication > URL Configuration. For example, add https://your-site.netlify.app and https://your-site.netlify.app/auth/callback.

### Do Netlify Functions support the Supabase JS client?

Yes. Install @supabase/supabase-js as a dependency and import it in your Netlify Functions. Environment variables set in the Netlify Dashboard are available via process.env in functions.

### Can RapidDev help me deploy my Supabase app to Netlify?

Yes. RapidDev can configure your Netlify deployment, set up environment variables, create serverless functions, and ensure your Supabase integration works correctly across all deploy contexts.

---

Source: https://www.rapidevelopers.com/supabase-tutorial/how-to-connect-supabase-to-netlify
© RapidDev — https://www.rapidevelopers.com/supabase-tutorial/how-to-connect-supabase-to-netlify