How to hide/secure your API keys if you created an app with create-react-app LOCALLY
WARNING: I do not know how to emphasize this enough: client js code is visible everywhere and in the builds and the html etc. There are a lot of types of sensitive data. We are NOT talking about passwords etc. We are talking about how to hide your keys from your codebase in the end!! Of course, on gitHub you can use placeholders but this is more elegant way of doing this because all you have to do to setup another machine is create a file in the root. Imagine a scenario that you have 200 (ok !!) keys and you have to put placeholders everywhere in the code… that is the problem in general and sorry for the capitals but I would like to be very clear 🙂
Hi there! How are you? I hope you are well!
I was looking for a way to hide API keys and any other “sensitive” information (FROM GITHUB ONLY) in a previous post! Since then React library and the rest of the “gang” is moving forward with lightning speed! So, here it is! This info can be also found in the official repo:
https://facebook.github.io/create-react-app/docs/adding-custom-environment-variables
In a few words
You add a file called .env on your root folder with key/pairs entries, e.g like this:
REACT_APP_GOOGLE_BOOKS_API_KEY=<yourKey>
and so on, as long as you prefix your variables with REACT_APP_ so react-scripts can pick them up in the node environment. There are also the NODE_ENV and PUBLIC_URL already built-in.
The way you access them inside your React code anywhere you want is through the process.env variable!
In our example you can do something like this:
console.log(process.env.REACT_APP_GOOGLE_BOOKS_API_KEY)
and this prints out
yourKey
A note: remember to add .env to your .gitignore file! We do not want to upload our hidden keys on a repo or sth similar, don’t you?
🙂
Cheers! I hope you enjoyed the updates! It was too easy, huh?
PS: I need to explain a little bit after receiving an alerting comment from a dev who probably misunderstood (to be honest if you read my two posts it is not quite clear apart from the title on the first article) that these posts are meant to hide the API keys from public view ONLY ON DISPLAYING YOUR CODE ON A REPO ON GITHUB AND NOT ON AN ACTUAL WORKING APP ON THE WEB!!!!!!
Read the comments below and both articles (the first one is without create-react-app, the second one with) please and be very very anxious about exposing your sensitive keys ON THE CLIENT SIDE!!!! THEY WILL OF COURSE BE VISIBLE!!!
If you come from this article https://stackoverflow.com/questions/48699820/how-do-i-hide-api-key-in-create-react-app (even this title is misleading: read the actual question first!!!) I REPEAT: THE SECURITY IS ONLY LOCALLY. In order to share a repo and let others INSTALL the app locally on THEIR MACHINES WITHOUT THEM AND THE REST OF THE WORLD KNOWING ABOUT YOUR API KEYS
The repo I was working when I wrote the article is this:Â https://github.com/GeoDoo/omdb
check the README. YOU HAVE TO GET YOUR OWN KEYS!! THAT’S THE GOAL HERE and the file that uses the API KEYS (NEVER NEVER NEVER DO THAT ON ACTUAL WEB APPS) is this:Â https://github.com/GeoDoo/omdb/blob/master/src/helpers/api.js
I could have used the API_KEY directly, a thing that would not have been wise at least even for a key like this, FREE AND WITHOUT ACTUAL MONEY INVOLVED. EVEN IF SOMEONE GOT THE KEY WORST CASE SCENARIO WAS TO BRING MORE TRAFFIC (HITS) TO THE SERVER, NOTHING ELSE. IMAGINE THOUGH USING AN AMAZON KEY!!!!!!!! DEAR LORD
