Hiding Secret Keys in Create-React-App

Jun 15, 2020 • 5 Minute Read

Introduction

Have you ever wondered how to avoid publishing your secret keys when you make your code public on places like Github? This guide focuses on helping you protect your secret keys in create-react-app. To make this practical, you'll set up an app that makes an API call to Newsapi.org and secure the keys obtained from the API provider. These features work only with react-scripts@0.5.0 and higher.

Set up Create-React-App

The first step is to set up a React app. Open a terminal/shell and run these commands to get a create-react-app project set up.

      npx create-react-app react-secret-keys

After create-react-app completes installation, enter this command in your terminal:

      cd react-secret-keys
yarn start
    

The development server for create-react-app should be running on localhost:3000. Open your browser and you should see the React Logo. Go to newsapi.org and sign up to get an API key.

The Unsafe Way

The code snippet below shows how you would make an API call with the key obtained without thinking of security. If you should publish this key to Github, anyone who views your code would have access to your key. That's not good!

      const API_URL = "https://newsapi.org/v2/everything?q=usa&apiKey=
OW09823D03ASE48F34RUNF83"; // <- API_KEY inlined in the url

function App(){    
     const [newsList, setNewsList] = useState([]);    
    useEffect(() => {          
      getNews(); 
}, []);   
const getNews = () => {      
fetch(API_URL)          
.then(response => response.json())              
.then(data => setNewsList([...data])
;} 
return (  
 <div>    
      { newsList.map( item => <p key={Math.random()}>{item.headline.title}</p> )} 
 </div>)
    

The Safe Way

To secure the key you obtained from Newsapi, create a .env file at the root of your project. Your project structure should be similar to this:

      -react-secret-keys

 -node_modules

 - public 

 - src 

 - .env  ←Right here

 - .gitignore

 - package-lock.json

 - package.json

Add API Key

to .env File create-react-app automatically reads keys that begin with REACT_APP and defines them on process.env (create-react-app embeds the keys at build time). To add your API_KEY simply prepend it with REACT_APP and add it to your .env file. You have to restart the development server if it is running (Use Ctrl+c or Cmd+c in your terminal where your development server is running and enter the command yarn start again) .

Adding your secret key to the .env file doesn't prevent your key from being public in production. The create-react-app documentation states that clearly.

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.

One way to solve this is to make your app request data through a backend (node + express) but that is beyond the scope of this guide. In short, avoid storing mission critical API keys on your frontend.

      // .env
REACT_APP_API_KEY = OW09823D03ASE48F34RUNF83
API_KEY  = OW09823D03ASE48F34RUNF83 // <- This would not be discoverable on process.env
    

Add .env to .gitignore

Make sure you add your .env file to your .gitignore file at the root of your project folder (react-secret-keys) to ensure it doesn't get published to a remote repository.

      // .gitignore 
  .env
    

Make an API Call with a Secret Key

Now you can easily reference the key added to your .env file in you <App/> component without explicitly adding it to your code.

      import React,{useState, useEffect } from 'react';


const API_KEY = process.env.REACT_APP_API_KEY  
const API_URL = https://newsapi.org/v2/everything?q=usa&apiKey=${API_KEY}

function App(){
    const [newsList, setNewsList] = useState([]);
    useEffect(() => {
            getNews();
 }, []);
   const getNews = () => {
      fetch(API_URL)
          .then(response => response.json())    
          .then(data => setNewsList([...data]);
}
 
return (
   <div>
    { newsList.map( item => <p key={Math.random()}>{item.headline.title}</p> )}
  </div>
)
;}
    

You can also access secret keys set in your .env file in public/index.html. For example:

      <title>%REACT_APP_API_KEY%</title>

Now if you should push this code to your Github repository or any other remote repository, the keys in your .env file would not be pushed to the repository. That's way better!

Conclusion

In this guide you have learned how to protect your secret keys with create-react-app. Doing this is very critical for your app because a little oversight can compromise your app. That's all for now. Stay Safe! You can reach me on Twitter @DesmondNyamador.