How to solve API key is visible on request URL problem?

Question

I've hide my API key inside .env file in my React app. And I used it through process.env. But When I go to network tab in developers tool of google chrome and check requests there I can see my API key present in the request URL. Therefore my API key is not secured. Anyone will able to get my API key. How can I hide my API from that place as well?

Answer 1

There is no way to hide the key on the client-side.

My suggestions:

1. Do this call from your back-end, and expose it to your front-end
2. Add API HTTP referrer restrictions instead. Only requests from your domain make the call in (1)