API keys and environment variables on netlify

[tiagofsanchez]

Hi @fool! Thank you for posting this here. I am still a bit confused with all this…a caveat though, I am new to Netlify and to coding… so bear with me.

I have set my .env.development file in my gatsbyJS site so that I can store my API_KEY and APP_ID in order to not expose them when I commit to git. That was perfectly and I am able to ping and use my API endpoint, however I want it to work when my site is live and for same reason, I am not able to do that.

I have also set my environment variables in Netlify UI so that I can have access them at build time (I guess?), on my files I am still using process.env.API_KEY in order to used them, but for same reason I am not able to get to them. How can I inject the variables from NETLIFY UI into my client-side code?

For same reason I am not able to achieve this.

Any guidance would be very much appreciated.

Cheers,
Tiago

[tiagofsanchez]

@perry, could you help me with this one? Super thank you.

[futuregerald]

@tiagofsanchez in order to get en vars in to your client side code when you use Gatsby, you need to prefix the variable names with GATSBY_. This is in the official Gatsby docs.

Also, please make sure you don’t commit your .env.development file to your git repo!

[tiagofsanchez]

Hi @futuregerald thank you very much for that! It worked.
Cheers to you.

[larpie]

As time as the topic subject actually doesn’t include Gatsby, is there possible to also request help for a generic case too (without being offtopic or breaking any forum rules) ? So, no Gatsby in my case:
I manually uploaded the folder containing the files with my website (everything static inside, no node js no build whatsoever) but I need to replace an API key probably with something as process.env.MY_SECRET_KEY .
While I activated some option in the Netlify dashboard allowing me to set in there an environment variable (which I did), how can I access that variable because I need it inside some js module used by my website in client.
(I receive instead an error message in console, something as ‘process’ is undefined).
Is there any safe way to do it ?
I have a free account and play around with beginner stuff (however I need to know if I could hide that API key despite being just for a test).
I even thought to hide the variable inside a closure in order to not allow it to be read inside window object - not sure if that’s at all enough safe though.
Thank you

[jasiqli]

Environment variables are not accessible via process.env.VARIABLE_NAME from client-side code @larpie.

Variables are replaced during build. Check out

[Support Guide] Using environment variables on Netlify correctly

Last reviewed: August 2023 The preferred way to use environment variables in Netlify is to set them in our environment - be that in the Environment Variables settings UI (on the site’s “Build & Deploy settings” page), or via netlify.toml. You’ll want to choose the right pattern to meet your needs. Setting variables in our UI may be considered a bit more secure, since only people with access to the Netlify admin UI for your site can see them, rather than “anyone who can clone your repo!”. Thes…

If you have an API key in a variable, this becomes exposed in the front-end code for anyone to see. A better method is outlined in

[Support Guide] How do I keep my API keys/tokens safe using Netlify Functions?

Last reviewed by Netlify Support on Oct 2023 With Jamstack sites, using API keys/tokens to make API calls to other services is a frequent pattern. In some cases, you may want to hard code the keys in your html, when invoking those API calls - which on a service like Netlify means these keys are now public. Anyone can open their browser dev tools and view them, and of course this can lead to someone abusing this access. In some cases, this is fine. For instance, some types of Firebase and Faun…