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

Question

I made a weather app in create-react-app. How do I hide the API key so that I can commit to GitHub?

Right now the key is in App.js: const API_KEY = "123456";

Answer 1

DISCLAIMER

Unless you're making tutorial apps, don't put secrets like api key in client side (ie, React app).

From React 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.

Original Answer

To elaborate Arup Rakshit's comment,

First, you should make .env file 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.

Now you're free to go.

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

---

Added:

1. How to use env variables in your code:

const API_KEY = process.env.REACT_APP_WEATHER_API_KEY;

2. env variable is undefined. How do I fix it?

In order to read env variables, you should restart your server.

Answer 2

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 {
...

Answer 3

from the react 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.

Answer 4

Here's what worked for me:

I created the .env in the root folder. Within that folder I added my key:

 REACT_APP_API_KEY_YT = "key"
//I added YT for youtube which is where my api key is from

Then i went to .gitignore || or create a .gitignore in your root directory if you don't have it. Within .gitignore I added .env

 #api key
 .env

Then I went back to the root of my app js file. For me that was index.js for other it is probably App.js There I created a const API_KEY

 const API_KEY =`${process.env.REACT_APP_API_KEY_YT}`

I checked if it was working by console logging it.

 console.log("API", API_KEY)

I was getting undefined. I stopped the server (Control + C) and restarted the server. Afterwards I was able to see the key.

Answer 5

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.

Answer 6

Hope it's not late so here's how I did it. on root folder, if you are using react prepend you environment variable with REACT_APP_ so goes like this. REACT_APP_API_KEY=<keye here> you don't. React environment will look at the .env checks if you prepend REACT_APP_ then you can use it.

import React from 'React';
console.log(`${process.env.REACT_APP_API_KEY}`);

that will get you you're variables.

if you are using node then you need a package https://www.npmjs.com/package/dotenv

thats it. enjoy :)

Answer 7

Create a config_keys.js file with keys in it. Export them as default

const API_K = "123456788345345235"
export default API_K

Then import them in your app.js or target .js file

IMPORT API_K from './config_keys/js'
const API_KEY = API_K

and then add config_keys.js to .gitignore