Ways to store API keys in your project

JavaScript
1

I am making a website that makes HTTP request to youtube’s server.

And I have to generate an API key for that.

The project I am working only contains frontend, there’s no backend to it.

The 1st question I am asking is, is it really safe to store your API keys in your front end codebase?

Like I pushed my project onto github, what if some random person went in and saw my API key and start using it?

The 2nd question I wanna ask is: if let’s say that my site went online, and thousands of people start to use my site, so many HTTP requests are being made all using that one API key, what happens then?

Is the site gonna become really slow? Or will google ban that API key? If my site does blow up, how do I upscale my site to meet the request?

The 3rd question is that, should I use a backend to store all of the API key? Just so that no one can mess with it.

Thanks in advance.

2

  1. I have the same problem. As far as I know, usually .env files in your backend store these api keys so that it’s not visible on client sides. And it is true if you store an api in javascript, it will get exposed by anyone who wants to read them. So If you don’t have any backends, I guess that’s how it’s gonna work. (Not 100% sure though).

  2. Usually API providers provide free tier apis and paid apis. You can switch to different paid apis to scale your app.

  3. Yeah.

3

thanks. I guess I will start learn some backend stuff then.

:sun_with_face: