I created a simple React JS app that makes API calls, but I'm worried about exposing my API key because I have limited usage credits. Is there a way to keep my API key hidden without having to set up a backend server? I've noticed the key can be viewed in the Network tab of the developer tools. Any suggestions? Thanks!
2 Answers
Unfortunately, you can't completely hide an API key in a frontend application. Anything that's processed on the client side can be seen by users. The best practice is to keep it server-side and build a backend to handle the API requests, which adds a layer of security. You're likely going to need to learn some backend skills for that!
True, there’s no way to hide it from the Network tab. It’s like trying to hide your house keys when everyone can see your door. Building a backend that proxies requests is the way to go. Or, as an alternative, you could ask users to provide their own API key if that fits your needs.
Got it! So I should focus on backend development to protect my API credits. I'll push my code to GitHub without the key and come back after setting up the backend.