The ultimate guide to using environment variables with create-react-app

#react #codenewbie #tutorial #github

I have seen a lot of repositories on GitHub which take hiding the secret API keys for granted. In this post, I'll give you a guide on how you can protect your sensitive information using environment variables.

NOTE: This tutorial is only for those who used create-react-app to bootstrap their project.

What are environment variables?

Wikipedia says,

An environment variable is a dynamic-named value that can affect the way running processes will behave on a computer. They are part of the environment in which a process runs. For example, a running process can query the value of the TEMP environment variable to discover a suitable location to store temporary files, or the HOME or USERPROFILE variable to find the directory structure owned by the user running the process.

Let's see the issue first, I have an function like below inside my component,

await fetch("https://api.imgflip.com/caption_image", {
        method: "POST",
        headers: {
          "Content-Type": "application/x-www-form-urlencoded"
        },
        body: `template_id=${match.params.id}&username=manitej&password=pass1234&text0=${t0}&text1=${t1}&font=Arial`
      })
        .then(response => {
          console.log(response);
        })
        .catch(error => {
          console.log(error);
        });

Everything works fine, but the real issue is when we push the code to GitHub, as you can see I have hardcoded my username and password of my account. Which are visible to everyone. With the help of environment variables, we can fix this issue. Now let's see how to do it in the right way.

Creating the environment variables

create-react-app has the support for environment variables by default.

The sensitive info here is my username and password

Create a .env file in your root project
To create an environment variable use the below syntax

REACT_APP_USERNAME = manitej
REACT_APP_PASSWORD = pass1234

If you can observe closely all the variables are starting with REACT_APP_ which is an indicator for create-react-app that it is an environment variable.

NOTE: All environment variables must start with the prefix REACT_APP_

Using environment variables

Now that you have created the .env file and kept your secret keys there, now let's see how you can use them inside of your project.

If you want to use an environment variable you can import it to any component like below

const { REACT_APP_USERNAME, REACT_APP_PASSWORD } = process.env

Now instead of writing the secret key hardcoded we used a secret variable.

Now the updated code will be like,

const { REACT_APP_USERNAME, REACT_APP_PASSWORD } = process.env
.
.
await fetch("https://api.imgflip.com/caption_image", {
        method: "POST",
        headers: {
          "Content-Type": "application/x-www-form-urlencoded"
        },
        body: `template_id=${match.params.id}&username=${REACT_APP_USERNAME}&password=${REACT_APP_PASSWORD}&text0=${t0}&text1=${t1}&font=Arial`
      })
        .then(response => {
          console.log(response);
        })
        .catch(error => {
          console.log(error);
        });