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

Question

I have set some environment variables in the Netlify UI.

See 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:

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

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

Answer 1

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.

Answer 2

This solved it for me:

netlify link

The netlify link command will link your local project to Netlify. See docs.

I did not think it was necessary to use netlify link because I already installed the Netlify CLI and was deploying my site automatically with GitHub but apparently it's needed.