Nuxt•5mo ago

[SOLVED] Your project's URL and Key are required to create a Supabase client!

Hey, So I made a Nuxt App with Supabase as backend. It works totally fine when using bun run dev Now I dockerized that App and set the Environment Variables as following

NODE_ENV=production
SUPABASE_URL=(selfhosted url)
SUPABASE_KEY=(anon key)

NODE_ENV=production
SUPABASE_URL=(selfhosted url)
SUPABASE_KEY=(anon key)

In my nuxt.config.ts I set following:

supabase: {
    url: process.env.SUPABASE_URL,
    key: process.env.SUPABASE_KEY,
    redirect: false
  },

supabase: {
    url: process.env.SUPABASE_URL,
    key: process.env.SUPABASE_KEY,
    redirect: false
  },

I verified that the Nuxt App does see the process.env.supabase (via console.log in the nuxt app and "env" command in shell of the container) Any other idea why it is stil lsaying that I need to set the url?

6 Replies

kapa.ai•5mo ago

Hi @claas.sh. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- The issue likely stems from how Nuxt handles environment variables and runtime configuration, especially in production and Dockerized environments. Key points from the knowledge sources: - In production, Nuxt does not read from your .env file. You must set environment variables directly in your hosting environment or Docker container (Nuxt .env docs). - For environment variables to be available in your Nuxt app (including modules like Supabase), you should use the runtimeConfig property in your nuxt.config.ts, and the environment variables should be prefixed with NUXT_ (e.g., NUXT_SUPABASE_URL) to be picked up at runtime (Runtime Config Guide). - Setting process.env.SUPABASE_URL directly in nuxt.config.ts only works at build time, not at runtime in production. For runtime overrides, you must use the runtimeConfig and the correct environment variable prefix (Runtime Config Migration). How to fix: 1. Update your Docker environment variables:

   NUXT_SUPABASE_URL=(selfhosted url)
   NUXT_SUPABASE_KEY=(anon key)

   NUXT_SUPABASE_URL=(selfhosted url)
   NUXT_SUPABASE_KEY=(anon key)

2. Update your nuxt.config.ts:

   export default defineNuxtConfig({
     runtimeConfig: {
       public: {
         supabaseUrl: '', // will be overridden by NUXT_SUPABASE_URL
         supabaseKey: '', // will be overridden by NUXT_SUPABASE_KEY
       }
     },
     supabase: {
       url: process.env.NUXT_SUPABASE_URL,
       key: process.env.NUXT_SUPABASE_KEY,
       redirect: false
     }
   })

   export default defineNuxtConfig({
     runtimeConfig: {
       public: {
         supabaseUrl: '', // will be overridden by NUXT_SUPABASE_URL
         supabaseKey: '', // will be overridden by NUXT_SUPABASE_KEY
       }
     },
     supabase: {
       url: process.env.NUXT_SUPABASE_URL,
       key: process.env.NUXT_SUPABASE_KEY,
       redirect: false
     }
   })

Or, if the Supabase module supports reading from runtimeConfig, use:

   supabase: {
     url: process.env.NUXT_SUPABASE_URL,
     key: process.env.NUXT_SUPABASE_KEY,
     redirect: false
   }

   supabase: {
     url: process.env.NUXT_SUPABASE_URL,
     key: process.env.NUXT_SUPABASE_KEY,
     redirect: false
   }

3. Access the config in your app using useRuntimeConfig():

   const config = useRuntimeConfig()
   const supabaseUrl = config.public.supabaseUrl
   const supabaseKey = config.public.supabaseKey

   const config = useRuntimeConfig()
   const supabaseUrl = config.public.supabaseUrl
   const supabaseKey = config.public.supabaseKey

Summary:
You need to use the NUXT_ prefix for your environment variables in production, and ensure your nuxt.config.ts is set up to use runtimeConfig for these values. Setting SUPABASE_URL and SUPABASE_KEY without the prefix will not work in production Docker environments with Nuxt 3+ (.env and production docs). If you follow these steps, your Supabase client should receive the correct URL and key at runtime. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•5mo ago

<@1115326727099527168> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

dmarr•5mo ago

I remember needing to set the NUXTSUPABASE and the plain SUPABASE_ variables for that warning to go away

claas.shOP•5mo ago

Oh ill try that. Thank you! Also do I use nuxtjs/supabase or supabase/supabase-js? 😄

dmarr•5mo ago

I think the nuxtjs/supabase module is your best bet

claas.shOP•4mo ago

okey I did try that but sadly it still shows it I also tried really putting the .env file in the container but also no luck I really wonder why it does that. I mean node has the ENV variable aswell I tried console.log(process.env) and it shows SUPABASE_URL etc etc maybe it has to do with the connection or wrong supabase setup. although it works locally with bun run dev okey I had to set the NUXT_PUBLIC_SUPABASE_URL fyi 😄

Gaming

Programming

[SOLVED] Your project's URL and Key are required to create a Supabase client!

Did you find this page helpful?