supabaseUrl or supabaseKey required

[CaseyG5]

1. Error: supabaseUrl is required.
2. Error: supabaseKey is required.

SupabaseClient.ts:
51 | this.storageUrl =${supabaseUrl}/storage/v1;
> 52 | this.schema = settings.schema;

These two errors I'm getting in my React project (one at a time, not both together) are rather frustrating since my supabaseUrl and supabaseKey are, and have always been, provided to the createClient() function or SupabaseClient() constructor. For the first error, Supabase complains about line 51 in it's own file. For the second, line 52 is a problem.

I updated @supabase/supabase-js from version 1.22.5 to 1.22.6 and the URL error disappeared temporarily but then I switched to using my Service key instead of my Anon key and now the KEY error has taken its place. Is this a Supabase bug that is plaguing anyone else? Thanks for any tips you might have.

Casey

[dshukertjr]

Hi @CaseyG5!

I am sorry that you are having some trouble. I just upgraded one of my Next.js project to use both v1.22.5 and v1.22.6 of supabase-js, and was not able to reproduce this issue with both annon key and service key. Do you know if this issue happened on earlier versions of supabase-js?

Could you share your code where you are calling createClient()?

[gdickison]

Thanks @SmithJohnTaylor. I do have that file named correctly. Still getting the error. I just started another project from scratch - same thing.

[gdickison]

Well, on my new project I was getting the same error. Then I went back through this thread and tried (again) what others have suggested:

• assigned the environment variables to constants before passing them to createClient
• shutting down and restarting the server by running npm run dev again

Now it all works. Go figure.

[Prudence97]

@gdickison Make sure your env file has a period in front of it .env.local not env.local
Just ran into this issue myself

This was the first mistake I made. Bow I'm trying to get both Anon Key and Url defined

[Bianxzy20]

what do you guys mean by shutting down the server?

[Felix-Okeyo]

like run a "ctrl + c" command in the bash/zsh terminal window the server is running at and then running "npm run dev" again to work on the just-installed dependencies

[MildTomato]

Is it possible there’s a trailing slash in the URL?

[CaseyG5]

Didn't have any trailing slash. Thanks for the thought though.

[daniellaera]

having the same issue

[Ramoncarden]

Hello just wanted to chime in here. I had this same problem and realized my mistake was that I accidentally put my .env.local file in my src folder instead of project route. Just in case anyone is having this issue.

[nahanez22]

me paso exactamente igual

[oozkanneray]

oh thanks

[buntaga]

I had the exact same issue, thanks!

[andreihuyoa]

thanks!

[Felix-Okeyo]

In my case, I even restarted the supabase installation, restarted the project, got the typescript sql file again. Even redid the .env.local file as well. All along, I had my .env.local file inside of my public folder instead of root folder

[Qikta]

Hello.
I was able to get it to work by setting the ENV file as follows.
I have added 'NEXT_PUBLIC_'. I hope this helps someone else.

.env.local

NEXT_PUBLIC_SUPABASE_URL=*****
NEXT_PUBLIC_SUPABASE_ANON_KEY=*****

utils/supabaseClient.ts

const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL as string
const supabaseAnonKey = process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY as string
export const supabase = createClient(supabaseUrl, supabaseAnonKey)

[joedeluca]

helped me! thanks Qikta.

[DragutinDjokovic]

Thanks.

[richewinqred]

Thanks, worked for me.

import { createClient } from "@supabase/supabase-js";

const supabaseUrl = import.meta.env.VITE_REACT_APP_SUPABASE_URL as string;
const supabaseAnonKey = import.meta.env.VITE_REACT_APP_ANON_KEY as string;

export const supabase = createClient(supabaseUrl, supabaseAnonKey);

export default supabase;

[meshackm]

I was facing same issue, Thanks a lot.

[kimutai-alex]

when I almost gave up on my project, I thought let me try this, and it worked.

[yuxxeun]

i faced the same thing when after deploying, but in my case i was using SvelteKit and i read some related articles that in the .env file for svelte using VITE_SUPABASE_URL and VITE_SUPABASE_ANON_KEY but still error

[yuxxeun]

i faced the same thing when after deploying, but in my case i was using SvelteKit and i read some related articles that in the .env file for svelte using VITE_SUPABASE_URL and VITE_SUPABASE_ANON_KEY but still error

and this code in the lib/supabaseClient.js :

import { createClient } from '@supabase/supabase-js'

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

export const supabase = createClient(supabaseUrl, supabaseAnonKey)

[Gilgahex]

I have the same issue, did you find a solution?

[yuxxeun]

it solved!

i just using

import { createClient } from '@supabase/supabase-js'

const supabaseUrl = import.meta.env.PUBLIC_SUPABASE_URL
const supabaseKey = import.meta.env.PUBLIC_SUPABASE_KEY

export const supabase = createClient(supabaseUrl, supabaseKey)

and in .env file:

PUBLIC_SUPABASE_URL=your_public_url
PUBLIC_SUPABASE_KEY=your_key

[psnwd]

Hello, IDK why but just add prefix

PUBLIC_SUPABASE_URL = the_url
PUBLIC_SUPABASE_ANON_KEY = long_key

to

NEXT_PUBLIC_SUPABASE_URL = the_url
NEXT_PUBLIC_SUPABASE_ANON_KEY = long_key

BlackCAT

[redpwilliams]

Working primarily with Next.js, prefixing NEXT_PUBLIC_ to an environment variable makes it accessible to the browser rather than just the server:

By default environment variables are only available in the Node.js environment, meaning they won't be exposed to the browser.

In order to expose a variable to the browser you have to prefix the variable with NEXT_PUBLIC_. For example:

NEXT_PUBLIC_ANALYTICS_ID=abcdefghijk

This loads process.env.NEXT_PUBLIC_ANALYTICS_ID into the Node.js environment automatically, allowing you to use it anywhere in your code. The value will be inlined into JavaScript sent to the browser because of the NEXT_PUBLIC_ prefix. This inlining occurs at build time, so your various NEXT_PUBLIC_ envs need to be set when the project is built.

From https://nextjs.org/docs/basic-features/environment-variables

I imagine it is quite similar for the React case.

The only issue is security; By exposing the secrets to the browser, anyone using your site would be able to see the javascript code - specifically where you use this environment variable - and get the actual value of the secret.

[Capta1nRaj]

That's what I was looking for, so I need to ask, is it safe to expose the Supabase keys? I think their docs are not that good in terms of security.

[landmann]

Btw - if anyone is working with Vercel, make sure to add your environment variables to the Vercel dashboard! Spent so much time trying to fix it locally...

[DavidSabine]

What names did you use? I'm using PUBLIC_SUPABASE_URL and PUBLIC_SUPABASE_ANON_KEY but my site (on Vercel) isn't getting those values at runtime.

[landmann]

Gotta do NEXT_PUBLIC_SUPABASE_URL and NEXT_PUBLIC_SUPABASE_ANON_KEY 😉
Make sure to change them in your code as well...

[istir]

If you're using Vercel you might've set environmental variables only for production environment and are building in for example in Preview environment (as a branch normally would build first)

[guylepage3]

I'm assuming one should change the SUPABASE_URL and not the NEXT_PUBLIC_SUPABASE_URL. Correct?

[Capta1nRaj]

I think there are bucket's policies which makes it useless for others to use our keys.

[Bumboobee]

I was facing the same issue, in one React project. After spend like half of the day, doing some research, I just realease that every modify that you make in your .env file, you just restart the server. I you change one letter, restart the server, no matter how small your change was, YOU MUST restart you dev build. And of course, check in your .env file is in the root of the project!

Good code to everyone!

[ivanosquis10]

Tenia el mismo problema, use vercel para el deploy, solo tuve que colocar en la configuracion del proyecto las variables de entorno del proyecto y se quita el error

I had the same problem, I used vercel for the deploy, I only had to put in the project configuration the project environment variables and the error is removed.

[yuxxeun]

can i see your .env files and supabase configuration file?
and tell me what is your project framework? because different framework have different name variabel

[kotesh-arya]

Hello there 👋🏻

I have encountered the same issue and resolved it by wrapping the REACT_APP_ANON_KEY inside the double quotes as a string and placing the .env file in the root level, not in the src folder.

🚨 Whenever you do changes in the .env file, please restart the server, or else it will not detect the latest changes in the file.

[Bumboobee]

@MatousAc How are you?
In your case, I see no problem not "hiding" your API information. This might be a different scenario if the user can access all the datastore in the database. If the user is a little more programming savvy, he can access his data and simply delete all the data of all users within it.

But as you apply the RLS rule, this can no longer be done. The user will only be able, if he so wishes, to delete his own data, therefore, it is his responsibility...

If you are working with a page, static or not, and you make the deploy in, for example netlify service, the offer a set enviroment variables option. Thats basic hide you enviroment variables right into the deploy of your application.

🗽 see this here

I don't know if you can do this with your package in npm, but it's worth taking a look if the service you are using to store your app, there is an option to set your environment variables, in your case, PUBLIC_SUPABASE_URL and PUBLIC_SUPABASE_ANON_KEY

[MatousAc]

@Bumboobee for offering your expertise. Yes, if a user really wishes to delete all their data, I don't care if they do that. I will offer an option to delete their account anyways . . .

I've never used Netlify before. I'll see if that can help. I'm writing a SvelteKit package. They say they offer ways to include .env variables in the build . . . but I can't figure out how to do it.

Thanks again.

[MatousAc]

@Bumboobee Update: So I was demonstrating how to use CompletableFutures in Java for another class and I fetched the html to the front page of my app. Lo and behold, it returned:

... html ...
<script>
{
	__sveltekit_1bohu6o = {
		env: {"PUBLIC_SUPABASE_ANON_KEY":"my_anon_key","PUBLIC_SUPABASE_URL":"my_url"},
		base: new URL(".", location).pathname.slice(0, -1),
		element: document.currentScript.parentElement
	};

...
}
</script>

I followed the default SvelteKit way of handling environment variables, $env/static/public, documented here. I thought the environment variables would be hidden, but instead they're extremely easy to get.
So unless I'm seriously screwing up somewhere else, it seems that these "public" environment variables are truly public. Anyone can see them easily. So, at this point, I really don't see a need to hide my environment variables at all. I still see why they are useful for deploying in different environments, but I don't see any reason whatsoever to try to hide them.

[Bumboobee]

How's going @MatousAc? sorry for the delay to reply :/

So I enter in the link that you provider on how to set a enviroment variable... I don't know Svelt verry well, but looks like the correct way to set your secrets key is using $env/dynamic/private, as the showing in this section of Svelt documentation.

And that make sense, the prefix public in $env/static/public really is gonna make your secret key, not secret anymore, looks like using the public prefix, the client can access your secret without any trouble.

Worth give a look at it 🤙
This stack overflow discussion may help too,

++ I don't know if you are usign Vite in your project, but look like he can make your work a lot of easier.

The import should look like this:

import { API_KEY } from '$env/static/private';

Best regards 🤠!!

[MatousAc]

Thanks. Yeah . . . boy is this confusing. All the tutorials and directions I looked at used the public prefix, so I assumed I was supposed to do that too. Maybe that was my issue. Anyways, doing that would bring me back to other problems, so at this point I think I will just leave things public I guess.

Thanks for all the input!

[ghost]

When I build with next.js13.4.2, I get "Error: supabaseUrl is required." However, in the local environment, such an error does not occur and it works properly. Has anyone had a similar issue and resolved it?
.env.local exists in the root directory

(.env.local)
NEXT_PUBLIC_SUPABASE_URL= https://jhpcnxpbqfqeociocoan.supabase.co
NEXT_PUBLIC_SUPABASE_ANON_KEY= Projectkey

(supabase.ts)
import { createClient } from '@supabase/supabase-js'
const supabase = createClient(
process.env.NEXT_PUBLIC_SUPABASE_URL as string,
process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY as string,
);
export default supabase

[Bumboobee]

Hey, since it's working properly in your local environment, what service are you exactly using to deploy your production application?

Some deploy Services have a especif way to configure enviroment variables, such Vercel and Netlify

The error you are getting may be because these environment variables are not set in the service you are using to deploy you application.

[ghost]

It's vercel!

[Bumboobee]

See if you have configured the enviroments viriables correctly here.

[ghost]

thank you. i will try

[ghost]

I was able to build successfully! thank you very much!

[swyxio]

in my case the error was Error: supabaseKey is required. but the cause/fix was the SUPABASE_SERVICE_ROLE_KEY was empty. misleading error name.

[Tholkappiar]

Hey could you help me here in this issue . Thanks in Advance .

[DAOUD-Nadjem-eddine]

just create a project in supabase and you will get the anon key ad url,put them in the create client
if you are in nuxt just follow the doc here with a demo project you will get what i said: https://supabase.com/docs/guides/getting-started/quickstarts/nuxtjs

[Tholkappiar]

yeah figured that out lately ! thanks !

[Felix-Okeyo]

remove the " " from your environment variables.

…

On Sun, Dec 10, 2023 at 10:00 AM Piyush ***@***.***> wrote: I am creating a spotify clone app for personal project and i am facing this error can anyone please help me out with what is wrong going on with the code? This is the error I'm facing. ⨯ ***@***.***\auth-helpers-nextjs\dist\index.js (47:10) @ createClientComponentClient ⨯ Error: either NEXT_PUBLIC_SUPABASE_URL and NEXT_PUBLIC_SUPABASE_ANON_KEY env variables or supabaseUrl and supabaseKey are required! at eval (./providers/SupabaseProvider.tsx:18:172) at SupabaseProvider (./providers/SupabaseProvider.tsx:18:77) null Screenshot.36.png (view on web) <https://github.com/supabase/supabase/assets/87450143/d89b7a00-f946-4685-9d90-765270fa051e> Screenshot.37.png (view on web) <https://github.com/supabase/supabase/assets/87450143/d7020888-e7dc-4234-bc73-4c1cce98857c> Screenshot.38.png (view on web) <https://github.com/supabase/supabase/assets/87450143/0c6f89a7-5c69-4fb2-aeeb-995c001d7957> — Reply to this email directly, view it on GitHub <#3218 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/BAF733STUXK4VTO2V2CG5V3YIVMXJAVCNFSM5ECZ3FW2U5DIOJSWCZC7NNSXTOKENFZWG5LTONUW63SDN5WW2ZLOOQ5TOOBRGAZTGMQ> . You are receiving this because you commented.Message ID: ***@***.***>

[Capta1nRaj]

Is it safe to expose the Supabase keys? Because NEXT_PUBLIC expose the keys in public, I think their docs are not that good in terms of security.