If you need to get your Bolt project pointed to another Supabase project, or if Bolt keeps overwriting your .env file, read on!

If your goal is to migrate off Bolt and do not yet have a separate Supabase account set up, get in touch and we'll help - or stay tuned for another blog post that explains how to set that up!

NOTE: this method should only be used for secrets that are ok to be exposed publicly, such as your anon key and Supabase URL. You should NOT use this method for real secrets like your service role key or database password!

In summary, we'll be creating a new configuration file in your Bolt project that stores your desired Supabase project's anon key + URL, then making sure the rest of your code uses that instead of the values from Bolt secrets.

Create a new configuration file

In your code, create a new file at /src/supabaseConfig.ts and paste in this code:

export const supabaseConfig = {
  url: '',
  anonKey: ''
} as const;

Then update those empty strings with your actual Supabase URL and anon key. You can find those in your Supabase project:

• url: go to Project Settings > Data API > Project URL

• anon key: go to Project Settings > API Keys > grab the one called anon public

Find where your code uses Supabase

We need to find the places in the code where it reads from the secrets (the .env file) so that we can update it to read from our new supabaseConfig instead. Usually you'll find code in Bolt that looks something like this:

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

Take note of all places in your code that have import.meta.env.VITE_SUPABASE_URL or import.meta.env.VITE_SUPABASE_ANON_KEY.

Update to use your new configuration

Replace all the calls to import.meta.env.VITE_SUPABASE_xxx with this new code, which uses our new configuration:

import { supabaseConfig } from '../supabaseConfig';

const { url: supabaseUrl, anonKey: supabaseAnonKey } = supabaseConfig;

Note that the import line might need to change based on where you created the new file. For example, if the new supabaseConfig file is in the same folder as the code you're changing, that line will change to:

import { supabaseConfig } from './supabaseConfig';

Done - but keep an eye on it!

That's it! Your project will now reference your desired Supabase project, instead of using Bolt's secret values. However, you should keep an eye on Bolt moving forward, because it might try to change things back. You could add this prompt to your custom instructions to help:

For all Supabase connections, do NOT use environment variables for anon key or URL. Instead, use the supabaseConfig file.

Want to prompt the whole thing instead?

If the above looks daunting, don't worry - you can try prompting Bolt to set this all up for you (or give this prompt to Claude Code, Cursor, etc):

For all Supabase connections, I want to use a configuration file for my anon key and project URL, instead of the env file. Create a new file supabaseConfig that stores a url and anonKey, then update all existing code references to use these values instead of reading from .env.