supabaseUrl is required sveltekit

Question

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

Answer 1

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:

• https://github.com/sveltejs/kit/discussions/5748
• https://github.com/sveltejs/kit/discussions/5875

---

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)