Nuxt•3mo ago

Supabase asking for env keys when adding server/api folders

Hi, I was correctly working with supabase until I created those endpoints, now I get this error Your project's URL and Key are required to create a Supabase client! Check your Supabase project's API settings to find these values https://supabase.com/dashboard/project/_/settings/api I have the .env files like this SUPABASE_URL= SUPABASE_ANON_KEY= this is my nuxt config export default defineNuxtConfig({ compatibilityDate: '2025-05-15', devtools: { enabled: true }, modules: [ '@nuxtjs/tailwindcss', '@pinia/nuxt', '@nuxtjs/color-mode', '@nuxtjs/i18n', '@nuxtjs/supabase' ], colorMode: { classSuffix: '' }, i18n: { locales: ['en'], defaultLocale: 'en' }, runtimeConfig: { public: { //stripeKey: process.env.STRIPE_PUBLIC_KEY, SUPABASE_URL: process.env.SUPABASE_URL, SUPABASE_ANON_KEY: process.env.SUPABASE_ANON_KEY, }, //stripeSecret: process.env.STRIPE_SECRET_KEY, } })

3 Replies

kapa.ai•3mo ago

Hi @diez. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- The error you're seeing—Supabase asking for env keys when adding server/api folders—typically means that the Supabase client cannot find the required environment variables (SUPABASE_URL and SUPABASE_ANON_KEY) at runtime. Here are the key points to check and resolve this issue, based on the official Nuxt documentation: 1. Environment Variable Naming for Nuxt Runtime Config: - For environment variables to be exposed to the client (and thus available in both server and client code), they must be prefixed with NUXT_PUBLIC_ in your .env file and referenced under the public key in runtimeConfig. - For example, your .env should look like:

     NUXT_PUBLIC_SUPABASE_URL=your_supabase_url
     NUXT_PUBLIC_SUPABASE_ANON_KEY=your_supabase_anon_key

     NUXT_PUBLIC_SUPABASE_URL=your_supabase_url
     NUXT_PUBLIC_SUPABASE_ANON_KEY=your_supabase_anon_key

- And your nuxt.config.ts:

     export default defineNuxtConfig({
       runtimeConfig: {
         public: {
           SUPABASE_URL: process.env.NUXT_PUBLIC_SUPABASE_URL,
           SUPABASE_ANON_KEY: process.env.NUXT_PUBLIC_SUPABASE_ANON_KEY,
         }
       }
     })

     export default defineNuxtConfig({
       runtimeConfig: {
         public: {
           SUPABASE_URL: process.env.NUXT_PUBLIC_SUPABASE_URL,
           SUPABASE_ANON_KEY: process.env.NUXT_PUBLIC_SUPABASE_ANON_KEY,
         }
       }
     })

- This ensures the variables are available both on the server and client side, and are properly injected at runtime. Using just SUPABASE_URL and SUPABASE_ANON_KEY (without the NUXT_PUBLIC_ prefix) will not expose them to the client, which is likely why the Supabase client cannot find them when used in API routes or client code.
See: Nuxt Runtime Config Environment Variables 2. .env File Loading in Production: - Nuxt only loads the .env file during development, build, and generate time. In production, you must set environment variables in your hosting environment (e.g., through your deployment platform's dashboard or CLI). The .env file is not read at runtime in production.
See: Nuxt .env File Usage 3. Supabase Module Configuration: - If you are using the @nuxtjs/supabase module, it will look for the Supabase URL and key in the runtime config. Make sure you are referencing the correct keys in your module configuration if you override them. Summary of what to do: - Rename your environment variables in .env to use the NUXT_PUBLIC_ prefix. - Update your nuxt.config.ts to reference these variables under runtimeConfig.public. - If deploying to production, set these environment variables in your deployment environment, not just in .env. Example: .env

NUXT_PUBLIC_SUPABASE_URL=your_supabase_url
NUXT_PUBLIC_SUPABASE_ANON_KEY=your_supabase_anon_key

NUXT_PUBLIC_SUPABASE_URL=your_supabase_url
NUXT_PUBLIC_SUPABASE_ANON_KEY=your_supabase_anon_key

nuxt.config.ts

export default defineNuxtConfig({
  runtimeConfig: {
    public: {
      SUPABASE_URL: process.env.NUXT_PUBLIC_SUPABASE_URL,
      SUPABASE_ANON_KEY: process.env.NUXT_PUBLIC_SUPABASE_ANON_KEY,
    }
  }
})

export default defineNuxtConfig({
  runtimeConfig: {
    public: {
      SUPABASE_URL: process.env.NUXT_PUBLIC_SUPABASE_URL,
      SUPABASE_ANON_KEY: process.env.NUXT_PUBLIC_SUPABASE_ANON_KEY,
    }
  }
})

This should resolve the error and allow the Supabase client to access the required keys in all parts of your Nuxt app, including server/api routes.
Reference: Nuxt Runtime Config Environment Variables ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•3mo ago

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

diezOP•3mo ago

it doesn't work

Gaming

Programming

Supabase asking for env keys when adding server/api folders

Did you find this page helpful?