# Using .env in React

There comes a time when you'll need to hide away the values of certain variables. A popular reason to do so is when you have a secret and an ID from an API that you don't want to expose to the internet. This happened to me recently when building a Spotify tool where I needed to connect to the API with a client ID and a client secret. 

I'm building this Spotify tool with React on the front end, so I dug into how I could use what's called a dot env file to hide a these secret values. Now, if you've created your application with the `create-react-app` cli command, that means dotenv will automatically be included in your package.json file. However, if you still needed to download it you can do so using node. I use homebrew to install packages on my computer, so the command I would use would be `brew install node`. If you're unfamiliar with homebrew, I highly recommend looking into it [here](https://brew.sh/). 

Anyway, back to installing dotenv. To install dotenv, after you've installed node, you can simply type `npm i dotenv` in your terminal to download the package. You can verify that you have dotenv installed by looking at your package.json file for a line that looks like this:

```
"devDependencies": {
    "dotenv": "^10.0.0"
  }
```
Now, to use a dot env file to store secrete variable, in your root folder (the same place where you have the package.json file) create a new file named `.env`. In there you will store whatever variables you'd like to keep secret. To make these useable with React, you'll have to prefix the variable names with `REACT_APP_`. For example, in the Spotify tool I'm building I've named my variables `REACT_APP_SPOTIFY_CLIENT_ID` and `REACT_APP_SPOTIFY_CLIENT_SECRET`. 

The reason you need dotenv installed as a package is because in order to access these secret variables in the `.env` file is through dotenv. Dotenv makes it possible to load environment variables in the `.env` file into `process.env`. It is through the `process.env` that you'd load the secrete variables into your React app. Wherever you need the variables to appear, you'd simply type `process.env.REACT_APP_VARIABLE_NAME`, replacing `VARIABLE_NAME` with whatever you've decided to name your variable. 

From the React documentation, they highlight a couple ways that you could embed the contents of the `.env` file into your app. Here are a couple important ones:
```
render() {
  return (
    <div>
      <small>You are running this application in <b>{process.env.NODE_ENV}</b> mode.</small>
      <form>
        <input type="hidden" defaultValue={process.env.REACT_APP_NOT_SECRET_CODE} />
      </form>
    </div>
  );
}
```

Or something along the lines of: 
```
<title>%REACT_APP_WEBSITE_NAME%</title>
```

Or, lastly, how I'm using it:
```
headers: {
        'Content-Type': 'application/x-www-form-urlencoded',
        'Authorization': 'Basic ' + btoa(process.env.REACT_APP_SPOTIFY_ID + ':' + process.env.REACT_APP_SPOTIFY_SECRET),
      },
```

Once you've confirmed that these variables are indeed working as you intend them to, you can move your `.env` file into your `.git` or `.gitignore` file so that GitHub doesn't expose the secrets to the internet. 

I hope this guide helped you solve any dotenv issues you might have when trying to implement your `.env` file with React. If you'd like to read more on the technology discussed here, I recommend reading the React documentation about `.env` [here](https://create-react-app.dev/docs/adding-custom-environment-variables/), the npm documentation on `dotenv` [here](https://www.npmjs.com/package/dotenv), and the `homebrew` documentation [here](https://brew.sh/).