如何安全地将 API 密钥传递给 React 组件所需的 React 前端

Question

I am using @react-google-maps/api to create a map component on React. In order to load the component we need to pass an API key to useJsApiLoader. How do I handle securing the API key so it is not visible on the front end in this situation? (I have a express.js back end)

Here is the documentation for @react-google-maps https://react-google-maps-api-docs.netlify.app/

Answer 1

Create a.env file in the root directory of the project and add the variables in that file. Import the variables using react-dotenv package. Hope this helps

Reference