Building web apps with React would normally require access to an API to fetch some data to be displayed as the user interface of your application.
To have access to the API endpoint, you will first need to have an API key. The API Key is a code used to identify and authenticate the user to enable him to perform some actions on the external application.
Because you will be connecting to the external app using the key, the API Key will be in the source code of your app. The danger is, when the code is published on a code hosting platform like GitHub, other users can have access to the key, and use your key to perform certain actions not authorized by you.
There is therefore the need to secure your API Key before pushing your code to the public repository.
In this article, I will take you through the steps to take to hide your API Key when publishing your code on a public repository.
Let's get started
Creating an environment variable
Environment variables help us to store sensitive information such as passwords and API credentials, which you don't want others to have access to when you publish your code on the code hosting platform.
It also helps keep your sensitive credentials in one location, and use it in multiple files without having to keep copying it, you can change the credentials at that single location, and the effect will be replicated anywhere the credential is being used.
Let's see how to create an environment variable in React apps.
How to create a .env file
If your project is created with create-react-app, follow the steps below
- Create a
.envfile at the root of your project - Declare your environment variable, with the prefix:
REACT_APP_ - Append any other name after the prefix, for instance
RAPID_API_KEY - The full environment variable name, will be
REACT_APP_RAPID_API_KEY - Remember that variable name should always begin with
REACT_APP_, so the format should beREACT_APP_YOURCUSTOM_VARIABLENAME - Assign the API Key to the declared variable. For instance
REACT_APP_RAPID_API_KEY= 1234212343
Using the .env file
To use the .env file created in the above steps
- Go to the file from which you want to connect to the API endpoint
- Use it by following the format
process.env.REACT_APP_CUSTOM_VARIABLENAME - Using our instance, the format to connect to the RAPID API endpoint will be
process.env.REACT_APP_RAPID_API_KEY -
Restart your app using
npm startand refresh your application - Your app is now connected to the API endpoint
Conclusion
In this article, we have learned how to create an environment variable or .env file in React to store our sensitive information. Now, when you commit your code and push it to a code hosting platform, the API Key will be hidden.
Have you had any instance where you push your API Key to public code hosting platform, what did you do afterwards ?
If you find any usefulness in this post, don't forget to share on your social media platform, it will be of great help to others.
Top comments (4)
Unless you are the only user of your web app, do not do this.
If your app is used by other users than you, i'll remind you that API keys do not belong in your front-end.
They belong in your server. Hiding API keys in env variable is wrong, they are still available to your users when downloading the source code. It's a big security breach.
Your API Key is still visible in dev tools when looking at network requests.
If you use netlify, use netlify functions, if you own your own server, do the request with your API Key on your backend.
Thanks for the insight , appreciate it
You're right, though some services have in mind that they will be used on the client side, so they provide "exposable" client keys that are meant to be okay with staying out in the open. That's usually the case for client-side libraries such as Google Maps, mixpanel, etc.
And then there's the rest of the libraries - that are meant to handle server requests. These usually have much higher permissions and require truly secret API keys, in which case as you said it should stay in the server without being exposed to the users in any way.
Like mentioned above, there is no security value in hiding env variables in your code. They are available to any user of your app.
Want to post this article here, as it covers the benefits of doing it, as well as the more secure BaaS pattern that will secure your API key.
How to hide your api keys in client code
Even when using a BaaS pattern, you will need to monitor and put in extra controls such as rate-limiting or IP based blocking to reduce abuse.