title: google maps react front end API key storage
body: <p>I am building a full stack MERN (MongoDB Express React Nodejs) application.  I am using the NPM package <a href="https://www.npmjs.com/package/google-maps-react" rel="nofollow noreferrer">Google Maps React</a> 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.</p>
  <p>In order to fully understand my problem it may be helpful to review the Google Maps React component code below</p>
  <pre><code>import {Map, GoogleApiWrapper} from 'google-maps-react';
   
  export class MapContainer extends Component {
    render() {
      return (
        &lt;Map google={this.props.google} &gt;
   
        &lt;/Map&gt;
      );
    }
  }
   
  export default GoogleApiWrapper({
    apiKey: (YOUR_GOOGLE_API_KEY_GOES_HERE)
  })(MapContainer)
  </code></pre>
  <p>Possible Solutions</p>
  <p>Solution A</p>
  <ol>
  <li>Store key in my Mongo database</li>
  <li>make GET request to database to obtain the google Maps API key</li>
  <li>put API key data string in google maps component</li>
  </ol>
  <p>Solution B</p>
  <ul>
  <li>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 <code>GAPI_KEY=FILL_IN_YOUR_KEY_HERE</code></li>
  </ul>
  <ol>
  <li>store api key in google maps react node module files</li>
  </ol>
  <p>Concerns with solution A</p>
  <ul>
  <li>Possible solution is not secure</li>
  <li>API key data can be accessed by user</li>
  </ul>
  <p>Concerns with solution B</p>
  <ul>
  <li>the node modules are part of my <code>.gitignore</code> file and therefore the google maps API key will not be available when the app is deployed</li>
  </ul>
  <p>Thank you for your thoughts and time.</p>
  <p>PS I used create-react-app</p>