Vite/React: VITE_SUPABASE_ANON_KEY not injecting correctly, causing 'Legacy API keys disabled' error

Support
, ,
1

Hi everyone,

I’m experiencing an annoying issue with my React/Vite application deployed on Netlify. Despite correct configuration, the VITE_SUPABASE_ANON_KEY environment variable is not injecting its correct value into the final JavaScript bundle, leading to a “Legacy API keys are disabled” error from Supabase.

My Site Name: angusashtonfilmrentals Deployed URL: https://angusashtonfilmrentals.netlify.app Repo https://github.com/awa750ui/Film-Equipment-Rental-Platform-8782

Problem: My deployed app shows “Error loading equipment: Legacy API keys are disabled”. My src/lib/supabase.js uses import.meta.env.VITE_SUPABASE_URL and VITE_SUPABASE_ANON_KEY .

Browser dev tools show the deployed JavaScript bundle (index-XXXX.js ) uses:

const GE = "sb_publishable_gSdvjxP3Y4gOuRFIKO8XKQ_7j6jTpRy"

This above deployed key is INCORRECT.

The correct, active “Publishable key” set in my Netlify environment variables (and verified in Supabase) is: sb_publishable_g5sdvjxP3YV4gDuRFiKO8XNQ_7j6jTpRy

There’s a clear mismatch between the configured Netlify value and the value embedded in the deployed bundle. No idea why this is happening…

I’ve taken the following steps already to try and fix:

  1. Confirmed src/lib/supabase.js code uses import.meta.env (local & GitHub).
  2. Confirmed Netlify environment variable naming (VITE_SUPABASE_URL , VITE_SUPABASE_ANON_KEY ).
  3. Repeatedly copied the latest, active “publishable key” from Supa base and pasted it into VITE_SUPABASE_ANON_KEY in Netlify.
  4. Consistently used “Clear cache and deploy site” for every deployment.
  5. Aggressively reset VITE_SUPABASE_ANON_KEY (deleted, saved, re-added) in Netlify, then redeployed one billion times ffs.
  6. Supabase confirms sb_publishable_g5sdvjxP3YV4gDuRFiKO8XNQ_7j6jTpRy is active and legacy keys are disabled.

Despite all efforts, the incorrect key (sb_publishable_gSdvjxP3Y4gOuRFIKO8XKQ_7j6jTpRy ) is persistently embedded. Does this suggest an issue within Netlify’s build environment or environment variable injection process for my site?

Could you please investigate why the VITE_SUPABASE_ANON_KEY is not being correctly injected into my Vite build on your platform?

Thanks so much

2

The issue has been resolved!

The problem was not with Netlify’s environment variable injection or Vite’s handling, but a duplicate Supabase client creation in my src/context/EquipmentContext.jsx file. This file was inadvertently hardcoding the old, disabled Supabase API key, overriding the correct import.meta.env usage in src/lib/supabase.js .

Resolution: I removed the redundant Supabase client creation from src/context/EquipmentContext.jsx and ensured it only imports the supabase instance from src/lib/supabase.js .

Thank you for your assistance and for providing the platform to debug this.