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.