How and where do you store third-party API ApiKey (aka AppId, AppSecret, AppKey) that you use in your javascript web app? Should I care to keep it secret from public if it is used in fetch URL and is visible in browser network tab anyway?
Example: in my React app I use OpenWeatherMap service. I need to sign up on their website and obtain the apikey, then I request data using URL:
http://api.openweathermap.org/data/2.5/weather?APPID=96547d41585ab16c48ee1evtm1bb1g8&q=London,uk
My appid in the URL above is associated with my account and there is a limited amount of requests I can do with this appid. So I'd like to keep this appid hidden from anyone. Is it possibly to do so in React app?
When we are writing code in development, we can store our API key in a . env file stored on our local machines. . env is a place where we can store any environmental variables we want to keep secret (such as an API key). These are variables that are specific to your environment and shouldn't be shared with others. .
A common solution is to have your application user create their own API keys for the relevant third-party services. The user may then provide these keys to your app and, for example, have them stored in their profile (within your app).
If you want to provide access to a third-party service under your own credentials to the users of your app, the only properly secure option would be to proxy the requests through your own server, where you can safely store your API keys without exposing them.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With