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

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 2

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