5 JavaScript API Key Mistakes (and how to fix them)

Don't let other developers find your API keys in your JavaScript applications. In this video, we'll cover 5 mistakes I commonly see JavaScript developers make when it comes to API keys. We'll talk about environment variables, .env files, ignoring files with the .gitignore file, proxy backend API endpoints, and more!

STAY IN TOUCH 👋

QUESTIONS...?

[JC-jzrx]

Please PLEASE make a follow up. This is such an important concept and most tutorials and sources don’t give it enough attention. I’m currently struggling with these concepts myself.

I can build a backend and secure a server side application. But I have no idea how to go around protecting a request from the front end for example. I had been stuck on how to handle API requests that require a token called from a front end application. This video gave great input on it

[samisaacvicliph]

Hi James, thank you very much for this video. I would very much like to see an explanation about JWTs and common mistakes while using them - especially around the storage of these tokens and securly sending and receving it from the back-end.

[vasiovasio]

Great video James - Objective, honest, and on point, without unnecessary things!

[everyhandletaken]

I really don't understand why, in 2022, there isn't an encrypted & protected enclave within the browser to load env params, which are never visible to an end user. Perhaps it is not possible, but it seems like it should be (for people much smarter than I am).

The example in the video is a perfect case as to the necessity to add further layers of abstraction, which may be to protect just 1 api key..

Great video & hope this saves someone the pain of leaking env's!

[MarkusEicher]

Hi James. Thanks a lot for this post! I'm still learning about securely using my API keys. It seems that this will be a long, long way to go. I almost can't believe that there are no more robust and secure methods implemented in modern browsers. Seems like one has to go to university to be able to securely use widespread API's. But hey, let's figure it out. I like your content, and thanks again.

[angelsoto]

Thank you so much this helped a ton James!!

[rolandabellano]

Thanks for this video, james. Yes, a demo would be nice.

[bradgarropy]

Great video as always, I've made plenty of these mistakes!

Here's a little tip, I like to ignore ".env*" instead of typing out each different environment file permutation.

[prashanthss]

Thanks James. Properly put up in an order to understand

[owlyone]

Actually this would be so great to cover more specifically incl. demo of best practices ! :D

[amystout]

I'm already making popcorn for the follow up :)

[Allformyequine]

PLEASE PLEASE do the follow up! This is for sure another pain point for folks just learning about how to handle API's and most like you said thought if you used the .env file that it might be ok but we see here that is NOT enough! Also, can you add a short part about how to possibly remove it completely if it did accidentally get pushed up to Github? Your stuff rocks THANK YOU!!!!

[Allformyequine]

So would this also be true for using an API to say gather just simple blog posts from a CMS; I mean do you need to get special tokens for that type of application?

[TheKing-xrzn]

Cors is good if backend consuming from website but if you have mobile app?

[lfbarni]

Sure I need more help and explanations about how to solve the problem number four 😂. Nice video!

[GavHTFC]

Thanks for this video James, it was actually Ania's video that led me here and it's an issue I've been wrestling with for longer than I'd like to admit!

[Stefan-jhor]

Hey James, I recently being diving in deeper in this topic and I been learning a new tool API managmenebt and Key Vault. Was wondering if you have knowledge on or could do a video about key vaults?

[jinyoucheng]

Hi, James. Thank you so much for this valuable video. Actually I have stored all my env variables in vercel, but when I see in browser/inspect/source tab, I could see all of them even though my github username, developer key etc which is very sensitive info. How to hide them? 🙏🙏🙏🙏

[ygvanz]

Would like to see a demo of this explanation

[groovebird]

I also like to see a follow up video with all the security stuff :-)