Supabase Environment Variables will not work
I am trying to change the default Supabase client code in Refine to use environment variables stored in either .env or .env.local and no matter how I try, they always remain undefined. Even though this is a recommended change on the Refine docs.
"You can also use environment variables to store your Supabase URL and key. This is a good practice to keep your sensitive information safe."
Code is below. Ran using "npm run dev". File is: supabase-client.ts
import { createClient } from "@refinedev/supabase";
const SUPABASE_URL = process.env.SUPABASE_URL!;
const SUPABASE_KEY = process.env.SUPABASE_KEY!;
export const supabaseClient = createClient(SUPABASE_URL, SUPABASE_KEY, {
db: {
schema: "public",
},
auth: {
persistSession: true,
},
});
6 Replies
Hi @Jacob. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
----------------------
It seems like you're trying to access environment variables using
process.env in a Refine project. However, Refine uses Vite as a build tool, and Vite has a specific way of handling environment variables.
In Vite, any environment variables that should be accessible in your client-side code should be prefixed with VITE_. This is a security feature to prevent accidental exposure of server-side environment variables to the client-side.
So, in your .env or .env.local file, you should have something like this:
And in your supabaseClient.ts file, you should access these variables like this:
This way, Vite will replace import.meta.env.VITE_SUPABASE_URL and import.meta.env.VITE_SUPABASE_KEY with the actual values of the environment variables at build time.
You can find more information about this in the Vite documentation (https://vitejs.dev/guide/env-and-mode.html) and in the Refine documentation (https://refine.dev/blog/refine-pixels-3#3-set-up-supabaseclient-for-refine--providers).
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@308442563348791296> kapa.ai is still learning and improving, please let us know how it did by reacting below
multiple-amethyst•5mo ago
@kapa.ai I am getting this error now. Property 'env' does not exist on type 'ImportMeta'.
Keep in mind, I am using NextJS for my project
Let me check the knowledge base for you. One moment! :books:
----------------------
In a Next.js project, you can access environment variables directly using
process.env. However, Next.js has a specific way of exposing environment variables to the browser.
You need to prefix your environment variables with NEXT_PUBLIC_ in your .env or .env.local file. This tells Next.js to embed the variable into the JavaScript bundle, which is then accessible from browser code.
So, in your .env or .env.local file, you should have something like this:
And in your supabaseClient.ts file, you should access these variables like this:
This way, Next.js will replace process.env.NEXT_PUBLIC_SUPABASE_URL and process.env.NEXT_PUBLIC_SUPABASE_KEY with the actual values of the environment variables at build time.
You can find more information about this in the Next.js documentation (https://nextjs.org/docs/basic-features/environment-variables).
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@308442563348791296> kapa.ai is still learning and improving, please let us know how it did by reacting below
multiple-amethyst•5mo ago
Solved