5 things to remember when using a .env file to store an API key in your React app

Anuradha — Wed, 05 Aug 2020 20:49:06 +0000

As a beginner when I was building a React app using a public API, I had to generate a key in order to use the API. As beginner's mistake, I overlooked the fact that this key was lying there in my public repository for any software crawler to detect. In my case, luckily I soon realized that API keys were supposed to be kept away from the code.

React allows you to create environment variables that can be stored in a .env file in your project root directory. React also supports adding temporary environment variables in your shell. To learn more on this, here is the link.

So, how do we add our key you ask? Here are 5 steps which I follow in order to make sure they are hidden in my public repo...

1. Adding a .env file

Add a .env file to your project root folder. Just like your .gitignore file, this one also has only an extension.

2. Storing the key in your .env file

Inside the .env file, you can now store the API key. Keep in mind that the variable name has to begin with REACT_APP_ , any other variable except for NODE_ENV will be ignored by react. Also, there is no quotation or semi-colon added to your key.

3. Accessing the env variable in your app




const MY_KEY = process.env.REACT_APP_API_KEY;

 handlerdata = () => {
    let ingredients = this.state.ingredients.join(`,+`);
    axios
      .get(
        `https://api.spoonacular.com/recipes/findByIngredients?apiKey=${MY_KEY}&ingredients=${ingredients}&number=1`
      )
      .then(res => {
          this.setState({
          data: res.data[0]
        });

      })
      .catch(error => console.error(`Something went wrong ${error}`));

  };

To access the env variable in your React app, we need to add the prefix process.env to it as these variables are defined on process.env. You also have to re run the server after adding the env variable in your javascript code.

4. Add your .env file in your .gitignore

We then have to add our .env file to the list of git ignore files/directories we have inside .gitignore. This will ensure that our .env file is hidden in our public repository.

5. What if the .env file still shows up in your git repo



git rm -r --cached .env

Sometimes, the .env file might still be cached in the index. The above command will remove all the files cached from index and add them back leaving out the files mentioned in your gitignore. But do remember that if you end up seeing your .env file in your repository, change you API key and then use this command to remove the cache, add, commit and push to your branch.

While deploying it is better to handle the environment variables through your deploying website like Netlify or Heroku as environment variables from your React app are embedded into the build, meaning anyone can view them by inspecting your app's files.

I hope you find this information useful while making that first API call using an API key.

DEV Community: Anuradha

5 things to remember when using a .env file to store an API key in your React app