How to Store and Access API Keys in a React Application

Modern web applications rely on external APIs for additional functionality. Some APIs use identifiers such as keys and secrets to associate requests with a particular application. These keys are sensitive and you should not pass them to GitHub, as anyone could use them to request the API using your account.


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


Adding environment variables in a CRA application

A React application that you create using create-react-app supports environment variables out of the box. It reads variables that start 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 application.

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

Next, prefix the API key name with REACT_APP like that:

REACT_APP_API_KEY="your_api_key"

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

const API_KEY = process.env.REACT_APP_API_KEY

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

Why you shouldn’t store secret keys in .env

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

Storing environment variables in backend code

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

For example, the API endpoint below 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 retrieve and use data in the front end.

const data = await fetch('http:

Now, unless you push the .env file to GitHub, 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 during the build on the server. So the environment variables you access in this function will only be 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 page through props, and you can access it as follows.

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

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

API_URL=https:

Next.js also allows you to create API endpoints in the pages/APIs case. The code for these endpoints runs on the server, so you can hide secrets from the front end.

For example, the example above can be rewritten in the pages/api/getData.js file as an 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 via the /pages/api/getData.js period.

Keep API keys secret

Pushing APIs to GitHub is not advised. 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 an .env file in your front-end code because anyone can see it when inspecting your code. Instead, fetch server-side data or use Next.js to hide private variables.


Source link

Comments are closed.