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 push them to GitHub because anyone might use them to send a request to 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
React app you create with Create-Reply-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 comes installed and configured in the CRA application.
To store the API keys, create a new file called .env in the root directory of your React application.
Then, prefix the API key name with REACT_APP like him:
REACT_APP_API_KEY="your_api_key"
You can now access the API key in any file in React using process.env.
const API_KEY = process.env.REACT_APP_API_KEY
Be sure to add .env to your .gitignore file to prevent git from being tracked.
Why you shouldn’t store secret keys in env . format
Anything you store in an .env file is publicly available in a production build. React includes it in your build files, which means anyone can find it by inspecting your app’s files. Instead, use a back-end proxy that calls the API on behalf of your front-end application.
Storing environment variables in backend code
As mentioned above, you have to create a separate backend application to store secret variables.
For example, the API endpoint below fetches 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 fetch and use the data on the front end.
const data = await fetch('http:
Now, unless you push the .env file into GitHub, the API URL will not be visible in the 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 creation 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.
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 via props, and you can access it as follows.
function Home({ data }) {
return (
<div>
</div>
);
}
Unlike React, you don’t have to precede 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 . format pages / api Folder. The code in these endpoints runs on the server, so you can hide secrets from the front end.
For example, the above example can be rewritten in Pages / api / getData.js file as API path.
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 through a file /pages/api/getData.js End point.
Keep API Keys Secret
Pushing APIs to GitHub is not recommended. Anyone can find your keys and use them to make API requests. using env file. Untracked, 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 them when examining your code. Alternatively, fetch the data from the server side or use Next.js to hide private variables.