supabaseUrl is required

The deployed app created its Supabase client with an empty URL, because the environment variable holding it never made it into the build.

Browser console
Uncaught Error: supabaseUrl is required.

Also appears as

  • Uncaught Error: supabaseKey is required.
  • Error: @supabase/ssr: Your project's URL and API key are required to create a Supabase client! Check your Supabase project's API settings to find these values https://supabase.com/dashboard/project/_/settings/api
  • Error: Invalid supabaseUrl: Must be a valid HTTP or HTTPS URL.

Prompt to fix it

My deployed app crashes with "supabaseUrl is required." but works locally. Find where the Supabase client is created and which environment variables it reads. Check that the names use the prefix our bundler exposes to the browser (VITE_ for Vite, NEXT_PUBLIC_ for Next.js) and are read the right way (import.meta.env or process.env). List the exact variable names I need to set on our host, and remind me to redeploy afterward. Add a clear error if they’re missing. Don’t hardcode the values in source, and never expose the service_role key to the browser.

Paste into Layerwise or any AI coding tool.

What it means

Supabase’s JavaScript client needs your project URL and a public key. This error means the URL arrived empty. It works locally because the values sit in .env, but .env is usually kept out of git, so the host builds your app without them.

Vite only exposes variables whose names start with VITE_ to browser code, through import.meta.env. Next.js does the same with NEXT_PUBLIC_ and process.env. Both copy the values into your JavaScript at build time, so after adding the variables in Vercel or Netlify, you have to redeploy for the build to pick them up.

The project URL and the anon or publishable key are meant to ship to the browser; row-level security is what protects your data. Keep the service_role or secret key out of any VITE_ or NEXT_PUBLIC_ variable, because anyone who opens your site can read those.

Common causes

  • The variables live only in your local .env, which isn’t committed, so the host never received them.
  • The name lacks the required prefix, such as SUPABASE_URL in place of VITE_SUPABASE_URL, so the bundler leaves it out.
  • The variables were added on the host after the last build, and the app wasn’t redeployed.
  • The variables are set for one environment only, such as Production, and the failing deploy is a Preview.
  • The name on the host doesn’t match the code exactly, such as VITE_SUPABASE_ANON_KEY versus VITE_SUPABASE_PUBLISHABLE_KEY.

How to fix it

  1. Find where the client is created, often src/lib/supabase.ts or src/integrations/supabase/client.ts, and note the exact variable names it reads.
  2. Copy the project URL and the anon or publishable key from the API settings in your Supabase dashboard.
  3. Add them on your host under those exact names, for every environment you deploy (Vercel: Project → Settings → Environment Variables; Netlify: Site configuration → Environment variables).
  4. Redeploy so the build runs again with the new values.
  5. Add a check where the client is created so a missing value names the variable that’s missing.

Example fix

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

const supabaseUrl = import.meta.env.VITE_SUPABASE_URL;
const supabaseKey = import.meta.env.VITE_SUPABASE_ANON_KEY;

// Vite inlines these at build time, so set them on the host
// and rebuild after any change.
if (!supabaseUrl || !supabaseKey) {
  throw new Error('Set VITE_SUPABASE_URL and VITE_SUPABASE_ANON_KEY, then rebuild.');
}

export const supabase = createClient(supabaseUrl, supabaseKey);

Related errors

All errors
ReferenceError: useState is not defined

X is not defined

The code used a name JavaScript can’t find anywhere, usually because of a missing import, a typo, or a Node-only global like process in the browser.

Error: Command "npm run build" exited with 1

Command "npm run build" exited with 1

Your build script failed on the host. This line only reports the failure; the actual error is printed earlier in the build log.

new row violates row-level security policy for table "todos"

New row violates row-level security policy

Postgres refused to save a row because no row-level security policy on that table lets the current user write it.

This page isn’t working my-app.com redirected you too many times. Try deleting your cookies. ERR_TOO_MANY_REDIRECTS

ERR_TOO_MANY_REDIRECTS

The site keeps redirecting the browser in a circle, usually between HTTP and HTTPS or between two domains, so the browser stops trying.

Build with an agent that checks its work

The Layerwise agent clicks through the live preview and reads the console, so it catches errors before you do.

DownloadRead the docs