Proper storage of API developer keys when using React

I am doing my own project which is pulling data from an external API (NASA in this case). I have done a couple of the React projects (Ravenous and Jammming) where the front-end was directly accessing the API. This seems to be set up fine in Jammming using the Implicit Grant Flow although the code was a little trickier than basic AJAX request. However, in Ravenous the apiKey is stored in the React components and seems like it would be exposed if that site was published. So I am thinking that this is fine for a practice project running locally but not the best set-up if something similar was to go live.

My limited research tells me that I should probably do a small back-end express server to keep private key and call API when requested. And then have my react-app get the data from the back-end. Is this the correct approach?


I have just finished the Jamming project and was googling the same thing. As I understand our API keys are exposed in all front-end only project made with React. So I think the API key will be exposed in Jamming too. (Correct me if I’m wrong).
I found this article on how to add a server to a React app, which might be what we need:

I still have to read through it properly though.
It would be great if somebody could enlighten us about this. :sunny: I would like my Jamming and other React projects to go live but wouldn’t want my API keys to be public.

Jammming should be fine to deploy (like is done in the project steps) without server-side code according to the API documentation for implicit grant flow Spotify Authorization Guide. Since the user is redirected and enters credentials at Spotify that solves the issue. But in Ravenous the key would be exposed if deployed.

From Spotify Guide:

Implicit Grant Flow

Implicit grant flow is for clients that are implemented entirely using JavaScript and running in the resource owner’s browser. You do not need any server-side code to use it.

For my small project (not yet deployed) I ended up creating a small Express server and store API key there without too much difficulty by following this guide:

Keeping API Keys Secret in React Apps