Search code examples
environment-variablesnetlifynetlify-cli

Netlify environment variables that were set in the UI are injected as undefined when running a local dev server

I have set some environment variables in the Netlify UI.

See here:

enter image description here

I am trying to use them in my code like this:

    console.log("AUTH0_DOMAIN:");
    console.log(process.env.AUTH0_DOMAIN);
    console.log("AUTH0_CLIENT_ID:");
    console.log(process.env.AUTH0_CLIENT_ID);
    console.log("AUTH0_AUDIENCE:");
    console.log(process.env.AUTH0_AUDIENCE);

When starting up the CLI local dev server using ntl dev it looks like the environment variables are injected:

enter image description here

But they all come through as undefined as shown here in the console:

enter image description here

So what am I doing wrong?

Why are they coming through as undefined?

P.S. I know I should not be using secret keys here because they will be exposed, but I still want to know how to do it for non-secret stuff.

UPDATE: The environment variables are also undefined after deploying live to Netlify. So it's broken on the live version and dev version.

UPDATE 2: Assigning it to a variable, as per below, also doesn't work:

const a_d = process.env.AUTH0_DOMAIN;
console.log(a_d); // This prints undefined
Solution

  • I am building a Vue app.

    Turns out all Vue env variables need to be prefixed with VUE_APP_ inside the code and the Netlify UI.

    So for example, it becomes const authDomain = process.env.VUE_APP_AUTH0_DOMAIN; in the code and you also have to use VUE_APP_AUTH0_DOMAIN in the Netlify UI.