4

I'm having this problem for quite a while and want to solve this: According to supbase documentation you create a .env file

VITE_SUPABASE_URL="YOUR_SUPABASE_URL"
VITE_SUPABASE_ANON_KEY="YOUR_SUPABASE_KEY"

then you call them in 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)

However this doesnt work,I get supabaseUrl is required. and the env variables are not getting exported.

Does anyone know why and how to solve it?

Do I need to install any additional lib?

Thank you in advance

equi
  • 164
  • 1
  • 10

1 Answers1

6

SvelteKit recently added new stores to import env variables, like $env/static/private. To use:

# .env file
PUBLIC_SUPABASE_URL="YOUR_SUPABASE_URL"
PUBLIC_SUPABASE_ANON_KEY="YOUR_SUPABASE_KEY"

// supabaseClient.js

import { createClient } from '@supabase/supabase-js'   
import {PUBLIC_SUPABASE_URL, PUBLIC_SUPABASE_ANON_KEY} from '$env/static/public'

export const supabase = createClient(PUBLIC_SUPABASE_URL, PUBLIC_SUPABASE_ANON_KEY)

This should work, however note your secrets are being exposed in publicly accessible JS files (thus the PUBLIC_ prefix). So it is better to only access supabase from SvelteKit endpoints (which that tutorial doesn't do.) To do this, you should use the $env/static/private store and env variables without the PUBLIC_ prefix. (You will also have to refactor your supabase code to be in a Svelte endpoint, not a Svelte page/component.)

Warning: The SvelteKit API is in flux, and the final v1.0 way to do this may be quite different. The latest SvelteKit already introduced major breaking changes:

I have used the old VITE_SUPABASE_URL + import.meta.env.VITE_SUPABASE_URL method before, so it should work. I'm not sure if SvelteKit disabled this method as they introduced the new env variable stores.

update: If you would like to continue using the old import.meta.env.VITE_SUPABASE_URL method, it may be possible by setting envPrefix in your vite.config.js (Source: https://kit.svelte.dev/docs/configuration#env)

Leftium
  • 16,497
  • 6
  • 64
  • 99
  • the PUBLIC_ is not something to be taken in consideration, although it is a solution to importing variables. I just tested them and again something might be wrong from my side. If I go to my .env file I do have `VITE_SUPABASE_URL & VITE_SUPABASE_ANON_KEY&PRIVATE_SUPABASE_URL` and I call them at supabaseclient.js like this `import { createClient } from '@supabase/supabase-js' import { PRIVATE_SUPABASE_URL } from '$env/static/private'; const supabaseUr = env.PRIVATE_SUPABASE_URL console.log(supabaseUr)` **env is not defined** Please let me know what I doing wrong – equi Aug 16 '22 at 16:17
  • @equi: Your env variables names need to match. Right now, you're using `VITE_SUPABASE_URL` in your .env file but trying to import `PRIVATE_SUPABASE_URL`. Also `env.PRIVATE_SUPABASE_URL` is for dynamic env variables. For static env variables you import them directly like my example in my answer. I suggest you first get my PUBLIC_ example working, then modify the working project to use private env variables. – Leftium Aug 16 '22 at 22:08
  • so I figured out where the problem is....the .env should not be inside src/ directory but in your main project directory...this fixes everything.thank you for your help.please add one more line to your answer – equi Aug 18 '22 at 07:12