Nuxt•8mo ago

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)

27 Replies

pyplacca•8mo 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}

BloodBunnOP•8mo ago

Excuse my ignorance, but can you clarify the second point more? spoon feed me

BloodBunnOP•8mo ago

is this the way?

BloodBunnOP•8mo ago

If yes, still the same problem (I re-ran npm run dev)

LazyDali•8mo 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.

BloodBunnOP•8mo ago

I removed the quotes and still the same problem

LazyDali•8mo 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.

BloodBunnOP•8mo 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•8mo 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•8mo ago

I’m aware of this, but I’m not sure why the bite prefix suggestion wasn’t working for you

LazyDali•8mo 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•8mo 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

pyplacca•8mo ago

Ah right 👍

LazyDali•8mo 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.

BloodBunnOP•8mo 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?

BloodBunnOP•8mo ago

I followed Net Ninja https://www.youtube.com/watch?v=ydz7Dj5QHKY&list=PL4cUxeGkcC9hUb6sHthUEwG7r9VDPBMKO

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•8mo ago

Is useSupabasClient your custom composable?

BloodBunnOP•8mo ago

No, he said it is a provided composable by nuxt

LazyDali•8mo 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

Installing | Supabase

LazyDali•8mo 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.

BloodBunnOP•8mo ago

alright guys thanks both of you for your time, I will try more and see

LazyDali•8mo ago

The doc will show you how to async/await the fetch and how to extract the data or error from the response.

BloodBunnOP•8mo 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.

BloodBunnOP•8mo ago

This was very helpful https://youtu.be/yO-JMkjc4oo?si=j6pzdJBejuJ-bqYx

John Komarnicki

YouTube

Easily Add Authentication With Nuxt 3 + Supabase

📕 Vue 3 Crash Course: https://johnkomarnicki.gumroad.com/l/tqrmw 🤖 SaaS I'm Building (WebDevDaily): https://www.webdevdaily.io/ 🚀 Join the channel :https://www.youtube.com/channel/UCr0D7PVNOHqB3Td7lVl_LKw/join 🤖 Website: https://johnkomarnicki.com/ 🐦 Twitter: https://twitter.com/john_komarnicki Timestamps: 0:00 Introduction 0:59 Create Nuxt ...

pyplacca•8mo 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•8mo 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.

BloodBunnOP•8mo ago

Thank you ❤️ Thank you ❤️

Gaming

Programming

Supabase url is required