gitname
commented
4 months ago Hi @ReehalS, the React app described in the tutorial in this repository is a client-side web app.
As a client-side web app, its code (in one form or another) is visible to anyone using the web app (via their web browser's DevTools or "View Source" option).
Here's a quote from the Create React App docs (the same would apply to any front-end web application; e.g. an Angular app):
WARNING: Do not store any secrets (such as private API keys) in your React app!
Environment variables are embedded into the build, meaning anyone can view them by inspecting your app's files.
I recommend you not store any sensitive information in your client-side web app and, instead, store it on a server. One strategy for allowing a server to determine whether it can trust a client is to--at run time, not build time--have the user enter a shared secret into the web page and the server can check for that shared secret (in that scenario, it's effectively a password).
I will close this issue because I consider this to be a general client-side web app development concept and not specific to this repository/tutorial.
I deployed a website (https://reehals.github.io/bookfinder) with gh-pages an hour or so ago. And the repo for it can be found at (https://github.com/ReehalS/bookfinder). Right after deployment, I received a notification from GitGuardian that the API key I was using for the Books API on my website was visible in the /gh-pages branch of the repo. I have used the environment variables for the repo and the key is not there anywhere else in my code. While this is not much of a problem as I have restricted the API key to only be used for the Books API, if in the future I use the same method to deploy other projects that may have more sensitive API keys, this will be a problem. Is there any fix for this, as I was not able to find one. The API key was found in /tree/gh-pages/static/js/main.xxxxxxxx.js