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, }, });
K
kapa.ai41d ago
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:
VITE_SUPABASE_URL=YOUR_SUPABASE_URL
VITE_SUPABASE_KEY=YOUR_SUPABASE_KEY
VITE_SUPABASE_URL=YOUR_SUPABASE_URL
VITE_SUPABASE_KEY=YOUR_SUPABASE_KEY
And in your supabaseClient.ts file, you should access these variables like this:
import { createClient } from "@refinedev/supabase";

const SUPABASE_URL = import.meta.env.VITE_SUPABASE_URL ?? "";
const SUPABASE_KEY = import.meta.env.VITE_SUPABASE_KEY ?? "";

export const supabaseClient = createClient(SUPABASE_URL, SUPABASE_KEY, {
db: {
schema: "public",
},
auth: {
persistSession: true,
},
});
import { createClient } from "@refinedev/supabase";

const SUPABASE_URL = import.meta.env.VITE_SUPABASE_URL ?? "";
const SUPABASE_KEY = import.meta.env.VITE_SUPABASE_KEY ?? "";

export const supabaseClient = createClient(SUPABASE_URL, SUPABASE_KEY, {
db: {
schema: "public",
},
auth: {
persistSession: true,
},
});
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: ----------------------
K
kapa.ai41d ago
<@308442563348791296> kapa.ai is still learning and improving, please let us know how it did by reacting below
V
vicious-gold41d 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
K
kapa.ai41d ago
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:
NEXT_PUBLIC_SUPABASE_URL=YOUR_SUPABASE_URL
NEXT_PUBLIC_SUPABASE_KEY=YOUR_SUPABASE_KEY
NEXT_PUBLIC_SUPABASE_URL=YOUR_SUPABASE_URL
NEXT_PUBLIC_SUPABASE_KEY=YOUR_SUPABASE_KEY
And in your supabaseClient.ts file, you should access these variables like this:
import { createClient } from "@refinedev/supabase";

const SUPABASE_URL = process.env.NEXT_PUBLIC_SUPABASE_URL!;
const SUPABASE_KEY = process.env.NEXT_PUBLIC_SUPABASE_KEY!;

export const supabaseClient = createClient(SUPABASE_URL, SUPABASE_KEY, {
db: {
schema: "public",
},
auth: {
persistSession: true,
},
});
import { createClient } from "@refinedev/supabase";

const SUPABASE_URL = process.env.NEXT_PUBLIC_SUPABASE_URL!;
const SUPABASE_KEY = process.env.NEXT_PUBLIC_SUPABASE_KEY!;

export const supabaseClient = createClient(SUPABASE_URL, SUPABASE_KEY, {
db: {
schema: "public",
},
auth: {
persistSession: true,
},
});
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: ----------------------
K
kapa.ai41d ago
<@308442563348791296> kapa.ai is still learning and improving, please let us know how it did by reacting below
V
vicious-gold41d ago
Solved
More Posts
Appwrite permissionsI use Refine with Appwrite as backend and Antd. I have seen how to add document permissions when creHow can I populate a resource before passing to Inferencer?Strapi v4 data by default doesn't even show relations/nested fields at all. When passing into inferLDAP AuthHi everyone, i am new in the domain, and i need to auth my users thanks to an existing active directwhy cant get data onsuccess?why cant get data onsuccess?Hello! I'm trying to be a good RefineHello! I'm trying to be a good Refine citizen and go through the proper channels. I had a refine-sRefine DevTools not workingHello! I've tried doing my homework before asking this question. But I can't seem to get the Refin@ant-design/pro-table not workingI added ProTable from ant-desing. The problem is with some features like fix columns which is not woHow can i use query params for fetching?I have this code: `import { NumberField, Show, TextField } from "@refinedev/antd"; import { useShowFiltering with between in SupabaseI'm trying to useList while filtering a date column. The format of the date in this column is YYYY-Muse refetch result in next lineWhen I use refetch functiom from useCustom, the data variable is not updated inmediatly, what can I upload file using antDI need to upload a file with specific format. Exist any hook to do it?uselist paramsHow can I use useList with params?Issues with remix and useGo with remix router`I have the following error: Cannot update a component (`RouterProvider`) while rendering a differenCreating multiple entries with AntD's Create and useForm with SupabaseI have 2 tables: brokerage_accounts and brokerage_reports. When creating a brokerage_reports entry, how to reset modal component state on close?this is in my modal component: ``` interface Props { modalProps: ModalProps formProps: FormPropRefine and Server ComponentsHello, is there any info regarding Refine and server components? I found this blog post: https://refrefine build --sourcemaprefine build --sourcemap misses mapping for src files the custom code and only includes nodemodulesREFINE GRAPHQL MOCK DATABASEHello, i have a question, does refine mock database in graphql resetted?