I came across this issue when consider the fact that my react-application needs API keys to access a backend it is using for CRUD operations on a secured database:
https://create-react-app.dev/docs/adding-custom-environment-variables/
WARNING: Do not store any secrets (such as private API keys) in your React app!
I want users authenticated into the application to be able to perform these operations without necessarily having the API keys exposed to the end user.
Common consensus seems to be create a mid layer, ie an express server that handles enriching/forwarding the request properly. But at that point, the same issue occurs if I want to authenticate the web app against the midlayer, ending up one way or another exposing the original secured API backend.
Is there a way to guarantee a "handshake" between the front end application and the original secured backend? If I need access to the code base to do so, can I do so via a mid layer instead
You have to disable the CORS in your express server.Thats means except your front end, no other client can send request to your Express server. And then, though your authorizationfor your express server is exposed but its not gonna help unless the request is from your front end app.