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.

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, the npm documentation on dotenv here, and the homebrew documentation here.