6

I'd like to start by saying I followed all of the suggestions here How do I hide API key in create-react-app? but none of them worked. I've searched for over an hour trying to find an answer but nothing. Below is my explanation.

  1. I used create-react-app to scaffold my project
  2. I'm using Google Maps and have not used any other API's yet
  3. I created a .env file in the root of my project
  4. In that file I added REACT_APP_GOOGLE_MAPS_API_KEY = api key
  5. In my component file Map.js I added const GM_API_KEY = ${process.env.REACT_APP_GOOGLE_MAPS_API_KEY}; (the tick marks are around this variable in my file but they won't show up here)
  6. In my url for the map, I added the key like so "https://maps.googleapis.com/maps/api/js?key=GM_API_KEY&callback=initMap"
  7. Also, at the top of my Map.js file I added a console.log(GM_API_KEY); to ensure it was working.
  8. I exported my Map component and then imported it in my App.js
  9. I restarted my server

When the page loads, my key is output in the console, but I still get an error from Google saying my API key is invalid. Also, if I manually console.log(GM_API_KEY) after the page has loaded I get a reference error saying that GM_API_KEY is undefined

If anyone has any suggestions or can provide any help I would greatly appreciate it! Thank you for taking time to check out my question.

Jonathan Sexton
  • 129
  • 2
  • 9
  • 2
    Please show a [mcve] to go along with your English description. – Code-Apprentice Oct 05 '18 at 15:47
  • Thanks for sharing the guidelines and my apologies for not providing that. Here is my example that worked for others in the future: In `.env` file: `REACT_APP_GOOGLE_MAPS_API_KEY = api key here ` In my `Map.js` component: `const GM_API_KEY =` `'${process.env.REACT_APP_GOOGLE_MAPS_API_KEY}';` (use back ticks instead of quotes to surround all of this) In the url call: `'https://maps.googleapis.com/maps/api/js?key=${GM_API_KEY}&callback=initMap'` (use back ticks around this as well instead of quotes) – Jonathan Sexton Oct 05 '18 at 16:03
  • No need to apologize. Just [edit] your question to include the requested information. – Code-Apprentice Oct 05 '18 at 16:19

2 Answers2

5

What I do with sensitive data is not even saving them in .env I open the terminal inside the root of my project and run export API_KEY=sdf54vvetvf... and then inside your app you can access it through process.env.API_KEY note you need to add it manually each time you close the terminal from that session

obiwankenoobi
  • 1,504
  • 5
  • 18
  • 37
3

Try to define the constant that holds the api key in a lifecycle hook like componentWillMount (though this method is now unsafe) to ensure that the variable is available when the component mounts:

componentWillMount() { const GM_API_KEY = ${process.env.REACT_APP_GOOGLE_MAPS_API_KEY}; }

Then

https://maps.googleapis.com/maps/api/js?key=${GM_API_KEY}&callback=initMap

Oreoluwa Aboluwarin
  • 181
  • 1
  • 8
  • I did this except I added the tick marks around my URL where as previously I was only inserting the variable into the URL. So my URL is now `https://maps.googleapis.com/maps/api/js?key=${GM_API_KEY}&callback=initMap` whereas previously I had double quotes around my url and had forgotten to include the `${}` Thank you for your answer! – Jonathan Sexton Oct 05 '18 at 15:57