I'm currently integrating Google Maps into my React app using the @vis.gl/react-google-maps library, which was recommended by Google Maps Platform. Since the documentation was clear & clean, the integration itself is working fine, but I am concerned about securing my API key.

I understand that exposing an API key in the client-side code is a security risk, but I am unsure how to securely store the API key while still allowing the Google Maps functionality to work.

Here are a few things I have tried and considered:

Environment Variables: I’ve used process.env to store the API key in .env files. But since React apps are client-side, I realize this still exposes the API key in the build.

Restricting API Key Usage: I've set restrictions on the API key in the Google Cloud Console.

Backend API Proxy: I’ve heard about using a server-side proxy to handle the API requests, but I’m not sure how to integrate that with my existing React app or the library I'm using.

Specific Questions: Can I get the API with env variables into my React code, in production? What is the best way to securely handle the API key while using @vis.gl/react-google-maps in a React app? How can I use environment variables securely with React to keep the API key hidden? Is using a backend proxy the best solution for this scenario, or are there other strategies I should consider?