google maps react front end API key storage

Question

I am building a full stack MERN (MongoDB Express React Nodejs) application. I am using the NPM package Google Maps React to display google maps on my website. I am having difficulty coming up with a strategy to secure my front end google maps API key.

In order to fully understand my problem it may be helpful to review the Google Maps React component code below

import {Map, GoogleApiWrapper} from 'google-maps-react';
 
export class MapContainer extends Component {
  render() {
    return (
      <Map google={this.props.google} >
 
      </Map>
    );
  }
}
 
export default GoogleApiWrapper({
  apiKey: (YOUR_GOOGLE_API_KEY_GOES_HERE)
})(MapContainer)

Possible Solutions

Solution A

1. Store key in my Mongo database
2. make GET request to database to obtain the google Maps API key
3. put API key data string in google maps component

Solution B

• note: I did some deep digging to the the Google Maps React Node module files. I found .env and .env.example files with in the google maps react node module files. The .env.example file says GAPI_KEY=FILL_IN_YOUR_KEY_HERE

1. store api key in google maps react node module files

Concerns with solution A

• Possible solution is not secure
• API key data can be accessed by user

Concerns with solution B

• the node modules are part of my .gitignore file and therefore the google maps API key will not be available when the app is deployed

Thank you for your thoughts and time.

PS I used create-react-app

Answer 1

You have various options to securely store an api key. If you are using CircleCi for continuous builds, you can create an environment key. Check your build solution for something similar.

There are also alternatives for encrypting files such as git-secret. That way you could use an environment config file.

Bottom line do not store keys in code or in config files unless you have it encrypted.