When making an API request to a third-party provider, some sort of authentication is often required. This can be an API key, a password, a token, etc. This example will demonstrate the safe use of a bearer token, which is a single string sent in the HTTP “Authorization” header.
const response = await axios.get(
"https://www.example.com/api/some-data",
{
headers: {
Authorization: `Bearer ${process.env.REACT_APP_EXAMPLE_API_BEARER_TOKEN}`,
"Content-Type": "application/json",
},
}
);An API key or token should be stored in an environment variable to keep it hidden from the public. If it falls into the wrong hands, it could be used to make API requests using your account. This could result in your account hitting its API request limit.
It is important not to store your environment variable containing your bearer token in React; it is not safe because environment variables are embedded during the build time and can therefore be found in the static HTML/CSS/JS bundle using a browser’s dev tools.
Therefore, it is best practice to store your API keys in a hidden .env file in the backend of your app. You can then have a route that handles the API requests, and returns the data as JSON. Then from the client side you can hit that endpoint in your backend to get the data from the API.
