Errant warnings when configuring with NUXT_PUBLIC_SUPABASE_KEY and NUXT_PUBLIC_SUPABASE_URL

[MichaelJCole]

Version

"@nuxtjs/supabase": "^1.5.0",
"nuxt": "^3.16.0",

Reproduction Link

https://github.com/MichaelJCole/nuxt-supabase-config-warnings

Steps to reproduce

clone repo configure with .env

NUXT_PUBLIC_SUPABASE_KEY=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZS1kZW1vIiwicm9sZSI6ImFub24iLCJleHAiOjE5ODM4MTI5OTZ9.CRXP1A7WOeoJeXxjNni43kdQwgnWNReilDMblYTn_I0
NUXT_PUBLIC_SUPABASE_URL=http://127.0.0.1:54321
NUXT_SUPABASE_JWT_SECRET=super-secret-jwt-token-with-at-least-32-characters-long
NUXT_SUPABASE_SERVICE_KEY=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZS1kZW1vIiwicm9sZSI6InNlcnZpY2Vfcm9sZSIsImV4cCI6MTk4MzgxMjk5Nn0.EGIM96RAZx35lJzdJsyH-qQwv8Hdp7fsn3W0YpN81IU

Notice the warnings.

What is Expected?

No warning and works as expected.

What is actually happening?

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

The supabase client seems to be configured, but tracking down the warnings was a bummer.

[daver987]

After two days of trying to figure out why my prod builds were breaking by my dev env worked fine I finally found the reason and it's related to the above issue. AI helped me write the technical report below, after I finally got it figured out what was going on.

The Problem

The @nuxtjs/supabase module has a design limitation that makes it incompatible with the common Docker pattern of injecting environment variables at runtime. The module reads configuration values URL and KEY at build time and stores them in Nuxt's runtime config, but doesn't check for environment variables at runtime.

This causes the error: "@supabase/ssr: Your project's URL and API key are required to create a Supabase client!" when running in Docker containers where environment variables are provided at runtime but weren't available during build.

How the module works currently

Build-time Configuration: The module reads environment variables during initialization: module.ts:120-123 Stores in Runtime Config: These values are stored in Nuxt's public runtime config: module.ts:147-151 Server-side Client Creation: When creating the server-side client, it only looks at the runtime config, not at current environment variables: serverSupabaseClient.ts:12-13 Warning Messages: The module logs warnings at build time if the values aren't set, but still proceeds with the build: module.ts:167-182

Why This Is Problematic

• Docker best practices recommend injecting secrets and configuration at runtime, not build time
• In CI/CD pipelines (like GitHub Actions), exposing secrets during build is less secure than injecting them at runtime
• This approach makes it difficult to use the same Docker image across different environments (dev, staging, prod)
• The module builds successfully with warnings, but fails at runtime, making the issue hard to diagnose

A Proposed Solution

The module could be modified to check for environment variables at runtime before falling back to the runtime config. For example, in serverSupabaseClient.ts:

const runtimeConfig = useRuntimeConfig().public.supabase;  
const url = process.env.SUPABASE_URL || process.env.NUXT_PUBLIC_SUPABASE_URL || runtimeConfig.url;  
const key = process.env.SUPABASE_KEY || process.env.NUXT_PUBLIC_SUPABASE_KEY || runtimeConfig.key;  
  
event.context._supabaseClient = createServerClient(url, key, {  
  // rest of the config  
});

This change maintains backward compatibility while adding support for runtime environment variables, which is especially important for containerized deployments.

Note

The above change does fix the issue, as I applied a patch to the module in my local env and it resolved the issue. I'm happy to make the fix and open a pull request if you want.

Impact

This issue affects anyone using the module in Docker containers or other environments where configuration is injected at runtime. The warnings that appear during development (Missing url, set it either in nuxt.config.js or via env variable) are easy to ignore since everything works in development, but they indicate a problem that will cause runtime failures in production Docker environments.

[MichaelJCole]

This is a known bug in Nuxt that @TheAlexLichter thinks is funny and you should RTFM.

He made a video about it on the nuxt going further page

A workaround would be to duplicate the key/values in your environment configs:

E.g.

SUPABASE_URL=some_url <- for nuxt/supabase NUXT_PUBLIC_SUPABASE_URL=some_url <- for your app code running in nuxt SUPABASE_KEY=some_key NUXT_PUBLIC_SUPABASE_KEY=some_key