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()?

[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

[Sahil4883]

I faced the same issue and indeed it was due to the .env.local variable and i just copied the env variable names and pasted it into my main code and it worked like a charm

[ajhous44]

Also have the same issue when using .env.local

[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.

[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

[Oms-343]

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.

thanks man for the clutch

[chaosprint]

lol same here

[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)

[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.

[zillBoy]

Hi, this does work but this way your SUPABASE_URL & ANON_KEY are going to be publically available.
You can check your: browser developer console > Sources > webpack_internal:// -> now we got access to the whole codebase and can see the URL.

So, this is a security issue, I'm looking for this solutions at the moment.

[zillBoy]

FYI, I found this. What we need to do is, set up the RSL Policy properly. SUPABASE_URL & ANON_KEY can be exposed publically.
https://github.com/orgs/supabase/discussions/6877#discussioncomment-4907344

[yuxxeun]

i faced the same thing 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]

Yeah finally, I'm find a solution for this case.

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)

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.

[zillBoy]

Hi @redpwilliams, true. Where you able to solve this security issue.
Is there a way other than using the NEXT_PUBLIC_ prefix

[zillBoy]

FYI, I found this. What we need to do is, set up the RSL Policy properly.
https://github.com/orgs/supabase/discussions/6877#discussioncomment-4907344

[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.

[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!

[kotesh-arya]

is this a random key right? Please, if it is your real api key I recomend that you don’t share here or in any where else on the internet. If your database contains valuable information, the data can be access by other people with this api key that shows in the image! 🤙 Be aware that your api key is a way to acess you database!!

Don't worry, i just changed few characters while sniping this shot 😜

[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 .

[vinicius33]

Thanks for this, it helped me a lot 🙇🏼 . This error is so misleading.

[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.

[Serginyo90]

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.

Did you find the answer? Looks like it is not safe

[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.

Did you find the answer? Looks like it is not safe

Nah mate, I just shifted back to my MonogDB, it's best for me. BTW currently learning AWS DynamoDB too.

Note: Not confirmed, but there is no issue in making the key public cuz you have to set the bucket policy which will make it 200% safe. (As per my knowledge.)

[mostafahamedbesher]

this problem happened to me although i was correctly named the environment variable file(.env.local) and also correctly named the variables in this file correctly
and the problem happened because i was importing server component in a client component which is forbidden as i read that in nextjs docs
see this link:
https://nextjs.org/docs/app/building-your-application/rendering/composition-patterns#unsupported-pattern-importing-server-components-into-client-components

so when i fixed this , this works well and that error disappeared
and you can fix this in this way in this link :
https://nextjs.org/docs/app/building-your-application/rendering/composition-patterns#supported-pattern-passing-server-components-to-client-components-as-props

[ajbspinhope]

Very helpful comments here. Thanks for the contributions. I have got similar error and finally managed to resolved it. Here are my settings.

I am using Next.js framework.

Created .env file. This is placed under the root of your project.

NEXT_PUBLIC_SUPABASE_URL=https://yourdb.supabase.co
NEXT_PUBLIC_SUPABASE_ANON_KEY="Here place your anonymous key"
NEXT_PUBLIC_SUPABASE_SERVICE_ROLE_KEY="Here place your service role key"

Next I have created a directory called lib

1. Created a file called supabase.ts

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

export const supabase = createClient(
process.env.NEXT_PUBLIC_SUPABASE_URL!,
process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!
);

export const supabaseAdmin = createClient(
process.env.NEXT_PUBLIC_SUPABASE_URL!,
process.env.NEXT_PUBLIC_SUPABASE_SERVICE_ROLE_KEY!
);

2. Created a file called supabaseClient.ts

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

const supabaseUrl = process.env.PUBLIC_SUPABASE_URL as string;
const supabaseAnonKey = process.env.PUBLIC_SUPABASE_ANON_KEY as string;

console.log("Supabase URL:", supabaseUrl); // Check if this prints the correct value
console.log("Supabase AnonKey:", supabaseAnonKey ); // Check if this prints the correct value

if (!supabaseUrl || !supabaseAnonKey) {
throw new Error("Supabase URL or Anon Key not set in environment variables");
}

const supabase = createClient(supabaseUrl, supabaseAnonKey);

export default supabase;

3. Created a file called supabaseAdmin.ts file
   // lib/supabaseAdmin.js

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

const supabaseUrl = process.env.PUBLIC_SUPABASE_URL as string;
const supabaseServiceRoleKey = process.env.SUPABASE_SERVICE_ROLE_KEY as string;

console.log("Supabase URL:", supabaseUrl); // Check if this prints the correct value
console.log("Supabase Service Role Key:", supabaseServiceRoleKey); // Check if this prints the correct value

if (!supabaseUrl || !supabaseServiceRoleKey) {
throw new Error("Supabase URL or Service Role Key not set in environment variables");
}

export const supabase = createClient(supabaseUrl, supabaseServiceRoleKey);

So all the above three files are placed under the lib directory.

Finally under the the page where you want to insert

const insertNewUser = async () => {
const { data, error } = await supabaseAdmin.from('Users').insert({
name: 'Sanjay',
email: '[email protected]',
address: 'UK',
// Include other fields as required
})

if (data) {
  console.log('Supabase User data', data)
}

if (error) {
  console.log('Supabase Error', error)
}

}

insertNewUser();

Create auth policies for your table.

Thanks

[CodingReaper1]

This doesn't resolve issue that key is unsafe even with row level security someone can still upload or access images