Environment Variable visible in browser

Support
, , ,
1

Hi All,

I have an react app created by create-react-app. I have a API key and a secret key, that is stored in .env file. I created a netlify function to access the keys and fetch data from my APIs. This all works on the dev. I uploaded the files up to GitHub (minus the .env file), and used continuous deploy to deploy from there. While deploying, I added the API keys to the environment variables section. Everything works fine after deployment, but issue is that when I go to the browser and look at the source, I can see my API keys in one of the chunk.js file. I want to use netlify, so that I can deploy my app, without the keys being visible on the front end. While deploying, I had to set these two variables as well NPM_VERSION=6.14.11 and CI=false, to built my app (just incase this makes a difference). Where am I going wrong?

Below is the code where it is visible (replaced the value with XXXX)

NODE_ENV: “production”,
PUBLIC_URL: “”,
WDS_SOCKET_HOST: void 0,
WDS_SOCKET_PATH: void 0,
WDS_SOCKET_PORT: void 0,
FAST_REFRESH: !0,
REACT_APP_API_KEY: “XXXXXXXX”
})
Any help will be appreciated, stuck on it for a while.
Thanks.

2

Hi @sab welcome to the forums

First I would suggest looking at [Support Guide] Using environment variables on Netlify correctly

3

Thank you, did look at it, I am setting the environment variable via the UI during build and deployment, my code is not exposing the Keys, somehow the build is. Any help will be appreciated.

4

Hi @sab,

To provide more info on this, we’d have to see your repo. However, to summarise, if you are having something like process.env.VAR in your frontend code, what you’re seeing is expected behaviour. The variable will be printed in the website’s JS.

You say you’re using Netlify Functions to access the API, but if the variable is visible in frontend, you must have added it somewhere in the code. As I said, if you can provide access to the repo, we can check the root cause.