Blog

Aug 20, 2023

How to Store and Access API Keys in a React Application

You can do a lot with APIs, but make sure you keep your keys and passwords safe

You can do a lot with APIs, but make sure you keep your keys and passwords safe and secure.

Modern web applications rely on external APIs for added functionality. Some APIs use identifiers like keys and secrets to associate requests with a particular application. These keys are sensitive and you should not push them to GitHub as anyone might use them to send a request to the API using your account.

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

A React application that you create using create-react-app supports environment variables out of the box. It reads variables that begin with REACT_APP and makes them available through process.env. This is possible because the dotenv npm package comes installed and configured in a CRA app.

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

Then, prefix the API key name with REACT_APP like this:

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

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

Anything you store in a .env file is publicly available in the production build. React embeds it in the build files, which means anyone can find it by inspecting your app's files. Instead, use a backend proxy that calls the API on behalf of your front-end application.

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

For example, the API endpoint below fetches data from a secret URL.

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

Now, unless you push the .env file to GitHub, the API URL will not be visible in your build files.

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

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

Below is an example.

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

Unlike in React, you don't have to prefix the variable name with anything and you can add it to the .env file like this:

Next.js also allows you to create API endpoints in the pages/api folder. Code in these endpoints runs on the server, so you can mask secrets from the front end.

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

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

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 from happening.

However, you should never store sensitive secrets in a .env file in your frontend code because anyone can see it when they inspect your code. Instead, fetch the data on the server side or use Next.js to mask private variables.

Mary is a staff writer at MUO based in Nairobi. She has a B.Sc in Applied Physics and Computer Science but enjoys working in tech more. She has been coding and writing technical articles since 2020.