loading...
Cover image for Hiding API Keys in Your Code

Hiding API Keys in Your Code

ivana_croxcatto profile image Ivana Croxcatto ・2 min read

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!

Posted on by:

ivana_croxcatto profile

Ivana Croxcatto

@ivana_croxcatto

Front-End dev., IT translator & Marketing transcreator

Discussion

markdown guide
 

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!)

 

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

 

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.

 

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 Network tab 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.

 
 

You can check:

dev.to/nunocpnp/protecting-api-key...

how to use netlify serverless functions to do it, hope it helps

 
 

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!