Let's say you are using a fetch in React App to get info from an API, and are using your API key to connect to that API. The key is private, and should not be visible outside your code. How can you achieve that and keep your code functional?
These are my notes on what worked for me. It took me a while to figure it out, so I wanted to share it, as a personal note to self, and, hopefully, to help someone else with the same issue.
These are the steps I followed:
1- Write npm install dotenv in the Terminal (I am using the Terminal in VSC).
2-Create an .env file in the root folder of the project (this means, outside the src folder).
3-This .env file will have the environment variables that are to be kept hidden. Since I am using React App, these variables have to be preceded by REACT_APP_. In my case, my variable is called REACT_APP_API_KEY=numberOfYourAPIKey.
4-Go to the .gitignore file in the root folder, and make sure .env is added to the list of files that will not make it into GitHub.
5-Go to your App.js file, and on the top list of "imports," (before declaring the App function), declare a variable to call the config function. I wrote const dotenv = require('dotenv').config() (you can use the variable name of your choice).
6-Go to any component using this API key, and, inside that component js file, declare a variable that will contain the API Key from your .env file. I wrote const api_key = process.env.REACT_APP_API_KEY. This is the variable you will use in your fetch. For example, fetch(https://api.example.org/data/api_key=${api_key})
The first "api_key" in the example is given by the API URL, the one inside the curly brackets is the name of my variable "api_key".
7-You can upload your project to GitHub now, and your API Key will not be visible.
8-In my case, I deployed my project to zeit.co (now vercel.com), by importing my GitHub project into this platform. Once imported, you will see three tabs in vercel.com: Overview, Deployment, Settings. Inside Settings, you will find the option to declare a variable under Environment Variables. There you should use the name of the variable you used in your .env file (REACT_APP_API_KEY), and copy-paste the actual value of the variable (your API Key) in the field box next to the variable name, where it says "VALUE (WILL BE ENCRYPTED)".
Your code should be working as if the actual API Key was still shown in your code, only now it will be hidden outside your local environment. Hope it helps!
Top comments (18)
Using Environmental variables on the front end doesn't make them secret. In the example you gave the API key will be visible in the xhr request.
And I just checked the XHR request, and it is visible, as you say. So, please, if you can, explain what would be a best solution in this case (using React, GitHub and Zeit), so I can edit accordingly and use a good practice.
Zeit can also have serverless functions in
/api/folder.Thanks!! Good to know, I'll check it out.
Thanks for your comment!! Then, could you help me understand how can I keep them hidden? (newbie here!)
The easiest and cheapest way is with serverless functions like netlify.com/products/functions/. They play the role of back end and there you can use.env to hide the key.
Thank you so much!! :)
I Just did that with my Netlify deploy, and it’a great. But as far as I know, one way to hide this from the front end request is having a back-end API to do this call for you, so your front end just calls it and it returns the values, without the key showing up
It would not work for me at the moment, because I am just working on the Front-End development, but thanks for taking the time to share your knowledge :)
Well Said. This is called abstraction and everybody learn it but many of them don't know how to apply it. What you told is perfect example of it
lets say your app catches on and get a lot of users, having them use the token directly or in a cloud function your token will on many services blocked faster, then you can say "cool people love my app".
A way to somehow throttle and cache the requests can be needed sooner then later. API keys from facebook or twitter have very clear limits defined. other like some map-tiles for an open-street-map app, ask you to cache, other map services specifically do not allow you to do caching on your side. The situation will be different for free APIs or a service your company pay for, such as slack.
As others have also said, I think the API key will be visible in the
Networktab in your browser. If you really want to hide the api key, then you can use Cloudflare Workers for the purpose.Here's an article related to it.
bigcodenerd.org/map-cloudflare-wor...
Disclaimer: It's my website, but I think the article is relevant to this use case.
Thank you for sharing!
Hey, this is a way to keep your API Keys out of the git repo, but it will still expose them on the browser. To avoid this you can set up the infra for a serverless function from scratch or use something like Netlify Functions to act as a proxy as others have stated (make sure to add CORS to protect unwanted browser calls). I would personally use KOR Connect, it allows me to secure my API keys with a new public endpoint provided by KOR and I not have to worry about .gitignore in my repo, nor do I have to worry about the keys in the frontend. KOR Connect also secures calls from the origin from on or off the browser (no other service does this, pretty cool). Plus it's free! lol Here is a blog I was reading about this before I tried it dev.to/korconnect/quickest-way-to-...
Hope this is helpful, happy coding!
You can check:
dev.to/nunocpnp/protecting-api-key...
how to use netlify serverless functions to do it, hope it helps
Thank you!! :)
But how can I have my API_KEY if I don't use netlify or heroku
Hi Kevin! How can you have the API Key? If I understand your question correctly, the API Key is something provided by the API you are using, not related to netlify or heroku. It is something you get from the API, and usually explained in the API documentation.
If you mean how to hide your API Key if you are not using netlify or heroku, I think it depends (and there are folks here with much more experience than me that can help us both with that!). In my case, I am using zeit (or vercel, which is similar to netlify or heroku) to be able to show my code but these are still mock projects, not really apps that people would use.
You can read the comments in the thread for this post, as other programmers are suggesting great ideas on how to actually hide the API key from server side, serverless functions, etc. and they might be of great help!