How to hide your API keys from public in ReactJS?

API keys are used for authenticating requests to various online services and APIs. However, exposing these keys in your ReactJS application can lead to security risks, including unauthorized access and misuse. To protect your API keys, follow these best practices to keep them secure.

Why Hiding API Keys is Important

API keys are unique identifiers that allow access to APIs. Exposing them publicly can lead to unauthorized use, potential data breaches, and misuse of your API quota. It is essential to keep these keys hidden from public view to ensure the security and integrity of your application.

One of the most common practices to secure the API key when using ReactJS is to hide the API key using env variables. Create a .env file in your root directory and make an env variable using the prefix REACT_APP. For example, as shown below:

REACT_APP_KEY = hello_world

Note: The declaration should be exact, with no space in-between.

Now, you can use the key using process.env object by importing the file to your App.js file. And before pushing the code to GitHub or Heroku, delete the .env file and use the key management system of the platform.

How to Secure API Keys in a ReactJS Project

One of the most effective methods to hide API keys in a ReactJS project is by using environment variables. Here’s a step-by-step guide to securely manage your API keys:

Steps to keep your API keys safe:

1. Creating .env file:Just create a .env named file in the root directory of your React project as shown below:
2. Creating env variables in .env file: Using the prefix REACT_APP, create your own env variables and assign the key as shown below: Filename: .env

   REACT_APP_API_KEY = Your_api_key
   
   
   // Example
   REACT_APP_API_KEY = 6341454121

   Note: Make sure to not use any space in-between as it may cause errors.

3. Add .env file to your .gitignore file: This prevents Github from pushing the .env file to a remote repository. Avoid pushing your API keys in a public repository. Filename: .gitignore

   # API keys
   .env
   
   # Bower dependency directory (https://bower.io/)
   bower_components
   
   # node-waf configuration
   .lock-wscript
   ...

4. Accessing the API key: The API key can be accessed easily using the process.env object. Just simply import the file to your main file and access it using process.env.your_key_name.Filename: App.js

   import React, { Component } from 'react';
   import './App.css';
   
   // Accessing your defined KEYS in .env file
   console.log(process.env.REACT_API_KEY)
   
   // Rest of your program
   function App()
   { ... }

Now, you’re good to go and use the online servers to push your code without worrying about your keys getting public.