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

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 2

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

Answer 3

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 4

You can create a separate file with all credentials and declaring your keys there. And add this file to .gitignore

//credentials.js
export const API_KEY = '12345'

Answer 5

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 6

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