WARN Missing supabase ***, set it either in nuxt.config.js or via env variable

[sdr0x07b6]

I am using @nuxtjs/supabase and this package expects the .env file in the project root directory to define SUPABASE_URL and SUPABASE_KEY.

However, since my project defines different environment variables for the production and staging environments, I put the respective .env files together in the env/ directory as a management method, and there is no .env file in the project root directory.

Therefore, I get the following warning.

WARN  Missing supabase url, set it either in nuxt.config.js or via env variable                              
WARN  Missing supabase anon key, set it either in nuxt.config.js or via env variable

It seems that you can define it in nuxt.config file, but I don't think you can define it in nuxt.config file because SUPABASE_URL and SUPABASE_KEY are different in each environment.

The use of @nuxtjs/supabase itself is working fine.
However, the warning points out that "the definitions of SUPABASE_URL and SUPABASE_KEY do not physically exist in the .env , file in the project root or in the nuxt.config file," and I don't think that resolving the environment variables to be loaded at run-time will fix the display.

What can I do to avoid the warning?

[BusinessOfTechnology]

I am having the same warning, but with the variables in the .env file in the project root. They do not seem to be showing up. It seems like none of the env vars are coming through.

[DAOUD-Nadjem-eddine]

I have encountered the same problem, i've created the env file but the warning persiste.

[Alex-L3]

Same. If I use .env.local file I get the 2 warns:

WARN Missing supabase url, set it either in nuxt.config.js or via env variable
WARN Missing supabase anon key, set it either in nuxt.config.js or via env variable

but if I use .env file warn about url disappears, but about anon key is still here:

WARN Missing supabase anon key, set it either in nuxt.config.js or via env variable

upd. solved. this helps:
*ENVs that Supabase described in docs: SUPABASE_ANON_KEY
*ENVs that the Supabase Nuxt Module uses: SUPABASE_KEY

also make sure that the values ​​are wrapped in quotes ":
SUPABASE_URL="https://yoursupabaseurlhere.com/"
SUPABASE_KEY="yourkeyhere"

[PhE]

In our case, we generate the app once and use it for the production and staging environments.
The .env values are freezed at build time and we can't change them at deploy time (since it's only a static payload).

For other settings we use this workaround:
the deploy step injects a public/conf.json the app can fetch to get specific environments values.
But we did not find how to feed those values to nuxt/supabase instead of the env variables.

[robinslange]

Apologies if I'm necroing this thread. For anyone who Googles this like I did - I found by surrounding the variables with double quotes and using a .env file instead of .env.local resolved on my end. My nuxt.config.ts file looks like this:

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  devtools: { enabled: true },
  modules: ["@nuxtjs/supabase"],
  supabase: {
    url: process.env.SUPABASE_URL,
    key: process.env.SUPABASE_KEY,
    redirect: false,
  }
})

[sdr0x07b6]

I see, so I decided to give it a try.
I thought.... Now I see that there are no warnings already?
Maybe @nuxtjs/supabase has been improved somehow?

[Bukharee]

After hours of debugging i noticed my vscode wasnt on auto save, it was a secondary pc

[RayJason]

I followed the documentation and ran into the same problem.

nuxt.config.ts

export default defineNuxtConfig({
  compatibilityDate: '2024-11-01',
  devtools: { enabled: true },
  modules: [
    '@nuxtjs/supabase',
  ],
  supabase: {
    url: process.env.SUPABASE_URL,
    key: process.env.SUPABASE_KEY,
    redirect: true,
    redirectOptions: {
      login: '/auth',
      callback: '/',
      include: undefined,
      exclude: [],
      cookieRedirect: false,
    },
  },
})

.env

SUPABASE_URL="https://xxxx.supabase.co"
SUPABASE_KEY="xxxxxxxx"

The current solution is to write directly into the nuxt.config.ts configuration. 💔 I'd prefer it to be in .env.

---

Sorry, I found the cause of the problem. The reason is that I am a monorepo project. .env should be in the package directory instead of the root directory 💗