Unless you are the only user of your web app, do not do this.
If your app is used by other users than you, i'll remind you that API keys do not belong in your front-end.
They belong in your server. Hiding API keys in env variable is wrong, they are still available to your users when downloading the source code. It's a big security breach.
Your API Key is still visible in dev tools when looking at network requests.
If you use netlify, use netlify functions, if you own your own server, do the request with your API Key on your backend.
I’m a developer at heart, and make mobile and web apps for start-ups and businesses. I'm passionate about tech, problem solving and making things that people love. Check my blog at https://casraf.dev
You're right, though some services have in mind that they will be used on the client side, so they provide "exposable" client keys that are meant to be okay with staying out in the open. That's usually the case for client-side libraries such as Google Maps, mixpanel, etc.
And then there's the rest of the libraries - that are meant to handle server requests. These usually have much higher permissions and require truly secret API keys, in which case as you said it should stay in the server without being exposed to the users in any way.
Documenting my coding journey, sharing thoughts and helping beginner programmers remove the frustration wth copy-paste JavaScript code without really understanding
Unless you are the only user of your web app, do not do this.
If your app is used by other users than you, i'll remind you that API keys do not belong in your front-end.
They belong in your server. Hiding API keys in env variable is wrong, they are still available to your users when downloading the source code. It's a big security breach.
Your API Key is still visible in dev tools when looking at network requests.
If you use netlify, use netlify functions, if you own your own server, do the request with your API Key on your backend.
You're right, though some services have in mind that they will be used on the client side, so they provide "exposable" client keys that are meant to be okay with staying out in the open. That's usually the case for client-side libraries such as Google Maps, mixpanel, etc.
And then there's the rest of the libraries - that are meant to handle server requests. These usually have much higher permissions and require truly secret API keys, in which case as you said it should stay in the server without being exposed to the users in any way.
Thanks for the insight , appreciate it