We have a react app website that is requesting data from our back end API.
We would like a secure way for our front-end to access the API without storing any secrets/keys in our react front-end. Environment variables are embedded into the build, meaning anybody can view it in the public files.
There is no clear answer on how to do this online. One method is to use JWTs based on generating 'secret passwords' after a user has logged in (https://github.com/react-boilerplate/react-boilerplate/issues/1744#issuecomment-303112505) - it seems that the security of this method hinges on the 'secret password' generated from logged in users. However, our website will need the API for even users who are not logged in, so this method would not be sufficient.
I am happy to explore all options. The goal is to keep our API secure and inpenetrable by a third party to protect our user data. Currently, we use an API key that is visible to all users via Chrome (in Dev Tools), and this is insecure.
An expert in cybersecurity who knows how to make our website secure is urgently needed.
Our back-end uses PHP and Laravel and mySQL. Our front-end uses React.
