N
Nuxt7mo ago
BloodBunn

Supabase url is required

Hello please help me, my project can't access the env variables, I have provided both the key and url and yet it tells me to provide them. I have put the screenshots of all my files (env, supabase.js file, index.vue, the error, nuxt config)
No description
No description
No description
No description
No description
No description
27 Replies
pyplacca
pyplacca7mo ago
If you want to access your env variables directly in your js files, you’d want to do the following 1. Prefix the env key with VITE_ 2. Access the variable from import.meta.env.{KEY}
BloodBunn
BloodBunnOP7mo ago
Excuse my ignorance, but can you clarify the second point more? spoon feed me
BloodBunn
BloodBunnOP7mo ago
is this the way?
No description
No description
BloodBunn
BloodBunnOP7mo ago
If yes, still the same problem (I re-ran npm run dev)
LazyDali
LazyDali7mo ago
Seems like it should work. Maybe remove the quotes from the env variables? They are not necessary when the value has no white space. I ran into a similar issue in the past and a plugin (don’t remember which one) didn’t like the quotes. Also, I use the @nuxtjs/supabase dependency and it just works great! You don’t even need to initialize it with createClient as it comes already as a composable (useSupabaseClient()). I don’t need to yet but I wonder if there’s a way to extend the Composable to set additional custom parameters. https://supabase.nuxtjs.org/
Nuxt x Supabase - Docs
Nuxt Supabase - Home
A supa simple wrapper around supabase-js to enable usage and integration within Nuxt.
BloodBunn
BloodBunnOP7mo ago
I removed the quotes and still the same problem
LazyDali
LazyDali7mo ago
Alright, sorry I was trying to support by memory but I just checked on my machine and here's what's working on my app: 1) in nuxt.config.ts, I declare the supabase module as..
modules: [
'@nuxtjs/supabase',
...
],
modules: [
'@nuxtjs/supabase',
...
],
2) also in nuxt.config.ts, I define the supabase module options as..
supabase: {
url: process.env.SUPABASE_URL,
key: process.env.SUPABASE_KEY,
redirect: false, // I don't need redirect for the moment ;)
},
supabase: {
url: process.env.SUPABASE_URL,
key: process.env.SUPABASE_KEY,
redirect: false, // I don't need redirect for the moment ;)
},
3) in my env file, I have the quotes and simply declared the variable as.. SUPABASE_URL="https://... (replace with your url) SUPABASE_KEY="abcdef123... (replace with your anon key) 4) then in my page/component, in the script setup, I directly use the supabase with the provided composable const supabase = useSupabaseClient(); I see you're also declaring the same module in your nuxt.config.ts but then when you created a supabaseClient, you're trying to initialize supabase as if it was the original supabase module (not the @nuxt/supabase module). I don't think you need to use a supabaseClient as the @nuxt/supabase module directly provides a composable as useSupabaseClient(). The @nuxt/supabase module does this magic for you. Pretty convenient.
BloodBunn
BloodBunnOP7mo ago
@lazyDali I think that's it, I'm at work now so will try it once I get home. But last night in bed I searched "how to use env variables in nuxt js files" and it mentioned exposing variables in the nuxt config just like you did. I will thank ye more properly later 😂
LazyDali
LazyDali7mo ago
For other variables (generally exposed / not in a module options), just be careful of what you expose and how (public vs private) ref https://nuxt.com/docs/guide/going-further/runtime-config And if you’re using Vite and want to use an env variable directly in your code (ex APP_URL, …), you can do as @pyplacca instructed.
Nuxt
Runtime Config · Nuxt Advanced
Nuxt provides a runtime config API to expose configuration and secrets within your application.
pyplacca
pyplacca7mo ago
I’m aware of this, but I’m not sure why the bite prefix suggestion wasn’t working for you
LazyDali
LazyDali7mo ago
Yes. VITE_ prefix would work but I only need these 2 variables in the module options in the nuxt.config.ts so I don’t even need to bother.
pyplacca
pyplacca7mo ago
I’ve recently used supabase via the same approach without issues. I’m guessing the scope might be a factor. Mine was in a plugin
No description
pyplacca
pyplacca7mo ago
Ah right 👍
LazyDali
LazyDali7mo ago
Yeah, I guess that @BloodBunn has setup both the original plugin and the nuxt one. Your way definitely works too but he would need to prefix and import the same way you did.
BloodBunn
BloodBunnOP7mo ago
so here it is what it looks like now, I"m sure i'm using the useSupabaseClient wrong here. it says title not defined. how do I use useSupabaseClient to access my 'smoothies' table in my supabase project?
No description
No description
BloodBunn
BloodBunnOP7mo ago
Net Ninja
YouTube
Supabase Tutorial #1 - What is Supabase?
Hey gang, in this first Supabase tutorial we'll take a look at what Supabase is & what we'll be making in the rest of the series. 🐱‍💻 Access the course files on GitHub: https://github.com/iamshaunjp/Supabase-Tutorial-for-Beginners 🐱‍💻 React Complete Tutorial (on Net Ninja Pro): https://netninja.dev/p/build-websites-with-react-firebase 🔥🔥🔥 Oth...
pyplacca
pyplacca7mo ago
Is useSupabasClient your custom composable?
BloodBunn
BloodBunnOP7mo ago
No, he said it is a provided composable by nuxt
LazyDali
LazyDali7mo ago
I also followed Net Ninja when I was trying to do similar with Firebase (before I knew about Supabase). It could work but you gotta be careful because often the stack versions are not the same or implementation, hence the syntax. I recommend you to follow the official Supabase from now as your setup is functional (you can connect): https://supabase.com/docs/reference/javascript/installing
LazyDali
LazyDali7mo ago
In my case, as I use @nuxt/supabase, I don’t have to import supabase-js nor use createClient. I just call useSupabaseClient() whenever I need it as the plugin provides the composable. And its options/params are set in the nuxt.config.ts module options.
BloodBunn
BloodBunnOP7mo ago
alright guys thanks both of you for your time, I will try more and see
LazyDali
LazyDali7mo ago
The doc will show you how to async/await the fetch and how to extract the data or error from the response.
BloodBunn
BloodBunnOP7mo ago
@LazyDali @pyplacca So I abandoned the project I made while following along Net Ninja and deleted it. I watched some other videos and read some docs, turns out you don't even need to use process.env to access the variables; when I use useSupabaseClient, it accesses those variables spontaneously. In my main project, I checked the server requests in the network while doing some auth and saw that it had accessed both the url and key.
BloodBunn
BloodBunnOP7mo ago
pyplacca
pyplacca7mo ago
Oh that’s cool. It’s unfortunate that you had to struggle through it, but I’m glad you’ve found a solution and made progress
LazyDali
LazyDali7mo ago
Yeah, normally the implementation is super easy. Maybe you didn't restart the server after adding variables in the env file? Anyway, glad it works for you now.
BloodBunn
BloodBunnOP7mo ago
Thank you ❤️ Thank you ❤️
Want results from more Discord servers?
Add your server