How do I hide API key in create-react-app?

Disclaimer

WARNING: Do not store any secrets (such as private API keys) in your React app!

Environment variables are embedded into the build, meaning anyone can view them by inspecting your app's files.

The following answer provides correct way to store non-secret data in environment variables. Remember that secret data is accessible through developer tools making it unsafe to store as environment variables. If you want to store some secret data then storing in backend is better option and if client wants to access secret data, it can be accessed by making request to the server. (Refer to @Antonia's answer for more details on storing secret data.)

As it turns out, create-react-app has some built-in functionality to help you with that. Thank you George Karametas for this insight. To access that functionality, you need to:

1. Create a file called .env in the root of your project's directory.

- your_project_folder
  - node_modules
  - public
  - src
  - .env         <-- create it here
  - .gitignore
  - package-lock.json
  - package.json

2. Inside the .env file, prepend REACT_APP_ to your API key name of choice and assign it.

The create-react-app tool uses REACT_APP_ to identify these variables. If you don't start your API key name with it, create-react-app won't see it.

// .env

REACT_APP_API_KEY=your_api_key  <-- yes
API_KEY=your_api_key            <-- no

// Example (from 이준형's response):
REACT_APP_WEATHER_API_KEY=123456

3. Add the .env file to your .gitignore file.

After you add the line below, save the .gitignore file and do a git status to make sure your .env file does not appear as a new file in git.

// .gitignore

# api keys
.env       <-- add this line

# dependencies
/node_modules
...

4. Access the API key via the process.env object.

To check that you can access your API key, go to your App.js file and add a console.log at the top below the require statements. After saving the file and reloading the page, if the console log does not show your API key, try restarting the react server. Be sure to remove the console log line before committing your code.

// src/App.js

import React, { Component } from 'react';
import './App.css';

console.log(process.env.REACT_APP_WEATHER_API_KEY)

class App extends Component {
...

WARNING

Unless you're making tutorial apps, don't put secrets such as API keys in client side source code (e.g. React app). From Create React App's documentation:

WARNING: Do not store any secrets (such as private API keys) in your React app!

Environment variables are embedded into the build, meaning anyone can view them by inspecting your app's files.

First, create an .env file in the root of your project, i.e. where you would run react-scripts start (or yarn start) outside of your src folder.

Then, add

REACT_APP_WEATHER_API_KEY=123456

Before commit, you should exclude this .env file so find .gitignore file and add .env.

The name of the variable needs to begin with REACT_APP_ which protects you from accidentally including secrets with your build.

Don't forget to add .env in .gitignore file.

To to use the env variables in your code:

const API_KEY = process.env.REACT_APP_WEATHER_API_KEY;

In order to read env variables after having added them to .env, restart your server.


Unfortunately, keeping any key in your React client, even if you are using gitignore and an .env file, is not secure. As pointed out by @ClaudiuCreanga, React environment variables are embedded in the build and are publicly accessible.

You should really only save API keys or secrets in your backend such as Node / Express. You can have your client send a request to your backend API, which can then make the actual API call with the API key and send the data back to your client.

Tags:

Api

Github

Api Key

Reactjs

Create React App

Recent Posts