Hiding API keys and links in .env files for local development of React web apps

A very secure way to storing and hiding API keys is by using a .env file. Note, in some circumstances outsiders will still be able to access the API keys when stored in the .env file but it is mostly assumed that the .env is not committed to your repository and is only used for local development. For deployed usage on hosting platforms like Netlify see my other article here.

Let's see how we can store an API key in a .env:

Firstly create a .env file in your project's root folder:

Now in the .env file let's declare the actual variable which will hold our API key:

/* The variable name must start with the format REACT_APP 
followed by the actual variable name in snake case */

REACT_APP_API_KEY = myApiKey

Now let's use our API key from the .env file in our component:

const ApiKey = process.env.REACT_APP_API_KEY 

That's it we're all done!