The ultimate guide to using environment variables with create-react-app
Tags: react, codenewbie, tutorial, github
Published: 2020-10-17 04:29:17

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,

```js
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

```js
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

```js
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,

```js
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`

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/339y10090lwvfm6nh8sv.png)

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

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/46mqfpnaq0xs0nb7dd5j.png)

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