javascript - Hiding API Key in React - Stack Overflow

admin管理员组

文章数量:1356842

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 ponent 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 ";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 ponent 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.

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 ponent 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./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 ponent 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.

• javascript
• reactjs
• google-maps
• create-react-app

Share Improve this question Follow edited Oct 5, 2018 at 15:45 Jonathan Sexton asked Oct 5, 2018 at 15:28 Jonathan SextonJonathan Sexton 13933 silver badges1212 bronze badges 3

• 2 Please show a minimal reproducible example to go along with your English description. – Code-Apprentice Commented Oct 5, 2018 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 ponent: 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./maps/api/js?key=${GM_API_KEY}&callback=initMap' (use back ticks around this as well instead of quotes) – Jonathan Sexton Commented Oct 5, 2018 at 16:03
• No need to apologize. Just edit your question to include the requested information. – Code-Apprentice Commented Oct 5, 2018 at 16:19

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 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

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

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

Then

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

本文标签： javascriptHiding API Key in ReactStack Overflow