How to Store and Access API Keys in a React Application

September 10, 2022 Abraham Smith

Modern web applications rely on external APIs for additional functionality. Some APIs use identifiers such as keys and secrets to associate requests with a specific application. These keys are sensitive and you should not transmit them to GitHub as someone could use them to make a request to the API through your account.

This tutorial will show you how to securely store and access API keys in a React application.

Adding environment variables in a CRA app

A React application that you build with Build React App supports environment variables out of the box. It reads variables starting with REACT_APP and makes them available through process.env. This is possible because the dotenv npm package is installed and configured in a CRA app.

To store the API keys, create a new file called .env in the root of the React application.

Then prefix the API key name REACT_APP like this:

REACT_APP_API_KEY="your_api_key"

You can now access the API key in any file in the React app using process.env.

const API_KEY = process.env.REACT_APP_API_KEY

Make sure you add .env to the .gitignore file to prevent git from tracking it.

Why you shouldn’t store secret keys in .env

Anything you save to an .env file is publicly available in the production build. React embeds it in the build files, meaning anyone can find it by examining your app’s files. Instead, use a backend proxy that calls the API on behalf of your frontend application.

Storing environment variables in backend code

As mentioned above, you need to create a separate backend application to store secret variables.

For example, the following API endpoint retrieves data from a secret URL.

const apiURL = process.env.API_URL
app.get('/data', async (req, res) => {
const response = await fetch(apiURL)
const data = response.json()
res.json({data})
})

Call this API endpoint to get and use the data in the front end.

const data = await fetch('http:

If you don’t push the .env file to GitHub now, the API URL will not be visible in your build files.

Using Next.js to store environment variables

Another alternative is to use Next.js. You can access private environment variables in the getStaticProps() function.

This function runs on the server during build time. So the environment variables you access in this function are only available in the Node.js environment.

Below is an example.

export async function getStaticProps() {
const res = await fetch(process.env.API_URL)
const data = res.json()
return {props: { data }}
}

The data will be available on the Props page and you can access it as follows.

function Home({ data }) {
return (
<div>
</div>
);
}

Unlike in React, you don’t need to prefix the variable name and you can add it to the .env file like this:

API_URL=https:

You can also use Next.js to create API endpoints in the Pages/API folder. Code in these endpoints runs on the server, allowing you to mask secrets from the front end.

For example, the above example can be rewritten as pages/api/getData.js File as API route.

export default async function handler(req, res) {
const response = await fetch(process.env.API_URL)
const data = response.json()
return res.json({data})
}

You can now access the returned data using the /pages/api/getData.js endpoint.

Keep API key secret

Pushing APIs to GitHub is not advisable. Anyone can find your keys and use them to make API requests. By using an untracked .env file you prevent this.

However, you should never store sensitive secrets in a .env file in your frontend code, because anyone can see them when reviewing your code. Get the data on the server side instead, or use Next.js to mask private variables.

unugtp