fix guide
supabaseUrl is required: blank page on your live site
Harjot · · updated
The app works in the builder's preview. On your own domain it shows a blank white page. Open the browser console and you see a red line: supabaseUrl is required.
This means the app started without knowing your Supabase address. The code calls createClient with the URL from an environment variable, and on the live site that variable is empty. The fix is almost always in your host's settings, not your code. Check these four in order.
1. The variable isn't set on your host
Your Supabase URL and public key usually live in a .env file. That file stays on your machine or in the builder. It's normally kept out of git, so Vercel or Netlify never sees it.
Open your project on the host. In Vercel it's Settings, then Environment Variables. In Netlify it's Site configuration, then Environment variables. Add the Supabase URL and the anon (public) key there, for the Production environment. Both are in Supabase under Project Settings, then API.
Only the anon key belongs here. Never put the service_role key in a variable the browser can read.
signs The host's variable list has no Supabase entries, or they're set only for Preview.
2. The name has the wrong prefix
Build tools only pass variables to the browser if the name starts with the right prefix. Anything else is dropped without a warning.
Vite apps (Lovable, Bolt) need VITE_SUPABASE_URL and VITE_SUPABASE_ANON_KEY. Next.js apps need NEXT_PUBLIC_SUPABASE_URL and NEXT_PUBLIC_SUPABASE_ANON_KEY. Compare the names on your host with the names in your code, letter by letter.
signs The variable is on the host as SUPABASE_URL with no prefix, or with the other framework's prefix.
3. You added the variable after the last deploy
These values are baked into the JavaScript when the site builds. Adding or changing a variable does nothing to the site that's already live.
Redeploy after every change. In Vercel, open Deployments, pick the latest one and choose Redeploy. In Netlify, trigger a new deploy with the cache cleared.
signs The variables look right on the host, and the live deploy is older than the last change to them.
4. The code reads the variable the wrong way
Vite apps read variables with import.meta.env.VITE_SUPABASE_URL. Code that uses process.env.VITE_SUPABASE_URL gets undefined in the browser, even when the host has the value. Next.js uses process.env.NEXT_PUBLIC_SUPABASE_URL.
Search your code for createClient and look at the two values passed in. If you're not sure, ask your builder to show you the file and to log a clear message when either value is missing.
signs The host settings are right and redeployed, and the error still shows.
Test it like a new user
- Open the live site in a private window and check the page loads.
- Open the console and check there's no supabaseUrl error.
- Sign in, or load a page that reads from Supabase, and check real data shows.
- Open the Network tab and check requests go to your own project's .supabase.co address.
Common questions
Why does supabaseUrl is required show on my live site?
Your host doesn't have the Supabase values. The .env file stays on your machine or in the builder, so Vercel or Netlify never sees it. Add the Supabase URL and anon (public) key in the host's environment variables for Production. Never add the service_role key.
Why is my Supabase variable undefined even though I added it to Vercel?
The name probably lacks the right prefix. Build tools only pass a variable to the browser when its name starts with that prefix, and drop any other name without a warning. Vite apps need VITE_SUPABASE_URL and VITE_SUPABASE_ANON_KEY. Next.js apps need NEXT_PUBLIC_SUPABASE_URL and NEXT_PUBLIC_SUPABASE_ANON_KEY.
Why does my live site still show the error after I added the variable?
The live deploy was built before you changed the variable, and values are baked in at build time. Redeploy after every change. In Vercel, open Deployments, pick the latest one and choose Redeploy.
Still stuck?
Not sure this is the cause? Paste your app's link into the free scan. It lists what a visitor's browser can see, like leaked keys and exposed files, worst first. The score is free; every fix as a prompt for your builder is $9, one-time.
Want a person to look inside? See the diagnosis