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

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);
        });

NOTE: Add the .env file to your .gitignore file before pushing to GitHub

Deployment

During the development mode, the app works fine without any issues but if you want to deploy your app to the public you need to do some extra config.

In this part, I'll show you how to deploy an app with environment variables.

For this tutorial, I'm using Vercel, but you can any others like Netlify, Surge, etc

Go to your project settings on Vercel and click on environment variables

Now, simply add the key-value pairs in the mentioned fields just like in the .env file

That's it guys, you have successfully used environment variables instead of hardcoded keys. Give it a 🐴 if you liked the tutorial.

Comments

[Sami Kalammallah]

Hi, I've tried it but the env on vercel dashboard seems not working, have tried using new commit but still not work.

Great post anyway :)

[Manitej ⚡]

Could you elaborate your issue?

[Yngrid Coello]

Thanks! it's still valid.

[Sebastian Campos]

I tried but if i use in vercel env varibles keys and values like my react app when i watch my site i can see in console env varibles are undefined

[Matheus Henrique]

Same here, did you fix this?