Environment variables that were set in the UI are undefined

I have set some environment variables in the 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 local dev server using “ntl dev” it looks like the environment variables are being injected:

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

Screen Shot 2021-10-05 at 9.40.43 pm

So what am I doing wrong?

Why are they coming through as undefined?

You shouldn’t use secret keys in your front-end, as they will end up in your code after the build process is completed. If you use secret keys, use Netlify Functions instead.

You can load environment variables within your functions like this:

process.env.SECRET_KEY
2 Likes

Ah good to know! Thanks.

But I’d still like to know why they didn’t get injected on the front end so I can use other environment variables that aren’t secret keys.

Any idea why these didn’t show in my console?

For the front end do I need to use something different from process.env.VARIABLE?

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

It’s not broken, that’s by design. I’ll try to explain.

Environment variables are injected at build time. They’re not actually available after your site is built, since that would require a running server. The exception of course being Netlify Functions, but I’ll keep that out of the equation for now.

So what happens is this:

  1. You define an environment variable in the Netlify UI:
PUBLIC_KEY="asdf1234"
  1. You then load the environment variable in your javascript file:
const publicKey = process.env.PUBLIC_KEY
  1. The environment variable gets injected in your javascript file at build time:
const publicKey = 'asdf1234'

So when you try to log the key to your console after your site is built, this is undefined:

console.log(process.env.PUBLIC_KEY);

#undefined

But this isn’t:

console.log(publicKey);

# asdf1234

Hopefully this also explains why it’s a bad idea to use secret keys as build env variables :slight_smile:

Hey, thanks for helping me out, but assigning it to a variable also doesn’t work:

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

Can you share a repository?

I am deploying from the app folder as linked here: https://github.com/BenJackGill/agentcake-app/tree/main/app

The console.log for process.env.AUTH0_DOMAIN can be found in src/main.ts as linked here: https://github.com/BenJackGill/agentcake-app/blob/main/app/src/main.ts

I believe for Vue CLI to be able to handle this, you need to prefix the variables with VUE_APP_:

Modes and Environment Variables | Vue CLI.

So yours could be: process.env.VUE_APP_AUTH0_DOMAIN. The name would have to be changed in the UI too.

2 Likes

OH MY GOD THANK YOU!

That worked. Been pulling my hair out for a few days now.