Using API keys in a react app

Question

I have a React app that uses two third-party services. The app was started using react-create-app.

Both of these services require a API key.

One key is supplied via a script tag, like this:

<script type="text/javascript" src="https://myapi?key=MY_KEY">
</script>

The other API key is used in a request. I store the actual key in a constant and use it to form the request. Like this:

const MY_OTHER_KEY = 'MY_OTHER_KEY'
let url = `http://myotherapi?key=${MY_OTHER_KEY}&q=${query}`

Google's best practice tips on handling API keys says:

Do not embed API keys directly in code

This brings me to my first question:

1. How to use variables in index.html?

In my index.html file, I have two tags that look like this:

<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">

Obviously, %PUBLIC_URL%is a variable. How can I add a variable %MY_KEY% as to avoid embedding the API key directly in my code?

To get something like this:

<script type="text/javascript" src="https://myapi?key=%MY_KEY%">
</script>

Related to this question, is it safe to have the API key stored in a constant, like I do for MY_OTHER_KEY?

Google also says:

Do not store API keys in files inside your application's source tree

This brings me to my second question:

2. Doesn't the API key still end up in the bundle?

Say I do what Google says and I

... store them in environment variables or in files outside of your application's source tree

Say I store a key in a outside file. That file will, I assume, be read at some point and it's contents either copied in the bundle or referenced in some other way. In the end, won't the key still be visible in the bundle, except maybe harder to find? How does this help exactly?

3. Is there a canonic way of using API keys in a react app? Or is it up to the individual developer?

Self explanatory, I'm looking for the react way of solving this issue, if there is one.

Thank you for your help!

Solution

1. How to use variables in index.html?

Answer 1 : Please go through Adding Custom Environment Variables to find out how to add environment variables of the type that you have shown as an example.

2. Doesn't the API key still end up in the bundle?

Answer 2 : Even when you have your key (MY_KEY) as an environment variable in the script tag, it will get rendered on the page and will be visible. Generally, these are browser keys and are intended to be used on the client side. These can be restricted by providing Http Referer header in your request. More on the efficacy of securing these keys here. However API keys (like MY_OTHER_KEY) are not supposed to be used on the client side and should not be rendered in the script tag or stored in the client side JS.

3. Is there a canonic way of using API keys in a react app? Or is it up to the individual developer?

Answer 3: The canonical way to use a third party API key is for your client side app to send a request to your backend API. Your backend API then formats the request as per the third-party API, adds the key and makes the call to the third-party API. Once it receives the response, it can either unpack it and translate it into domain objects which your front-end app would understand or send the raw response back to the front-end app. In this way, the API key stays at the backend and is never sent to the client-side.