How To Hide API Keys Using Netlify

In this video I will teach you why sharing API keys is a bad idea, a high level understanding of how you can secure them, and then using a practical example, I'll show you how you can use a service called Netlify Functions which is a completely free option to secure your secrets without needing to write any backend code at all (at least not in the classical sense of "backend")

Links:

Chapters:
0:00 Introduction
0:56 Why you need to hide your API keys
1:49 How API keys get stolen
3:34 How stolen keys get used
4:36 Understand the mechanics of securing API keys
12:05 What are netlify functions?
13:16 A practical example of using netlify functions
18:28 Make your first netlify function
22:44 Make request a request to your function
24:24 Setup Netlify Dev Server to serve your function
27:30 Update function to send request to weather API
34:28 Update request to pass geolocation data to function
38:19 Set up VS Code debugger with netlify functions
42:15 Secure your secret in an environment variable
44:12 How to keep environment variables out of your git repo
46:37 How this will work live in production
49:15 How to deploy to Netlify
53:23 Summary

Background Music:
Polarity by Theevs
g-wow by Kathali

[Alan-fuvx]

This helped me big time when figuring out how to hide secrets like API keys or tokens without needing to host a backend proxy server. Since we'd be deploying to a BaaS anyway the use of serverless functions is of great help when dealing with 3rd party API calls and such. Thanks!

[alexandercozub]

Took me such a long time to be able to find someone who took me step by step on how to work with Netlify functions and hide api key. Thank you so much for a great explanation! :)

[thineshkumar]

You explained things very well and I'm glad you kept the part on troubleshooting bugs or error that you encountered. It really gave me an exposure.

[maplestoryinchinese]

Hey Dan, after some tinkering around and praying everything goes smoothly with my React Application it works! Thank you so much kind sir, we need more people like you! Sending you much love.❤❤❤❤❤❤❤

[blarvinius]

So good!

I really appreciate the nice slow pacing and detailed over-explaining!

[SidharthSreekumar]

Thanks for making this video. I was having trouble finding a solution to manage secrets and now I know.

[adhirajagarwal]

I had been stuck at this for some days now, you are a lifesaver buddy, I also checked out some of your other videos and I have to say, they are great

[danielishida]

such an underrated video! Half way in the video and i already leraned so much. Great stuff!

[Piccolo]

Thank you, really appreciate a long and in depth video about this topic. Its often overlooked

[felipeflor]

Wow Dan!


I really appreciate how organized and straight to the point this video was.
The editing was also on point, the background music was there for atmosphere but didn't interfere with the lesson.

Thanks for sharing this.


Looking forward to more of your tutorials, I hope this channel will blowup soon.

[marie-elizeventer]

Dan! This was GREAT! Thanks! You made it SOOOO clear to understand. I am a total newbie, but following this tutorial was an eye opener. I really needed it!

[phillbaska]

Great video, thank you. It was quite refreshing to see a content creator make little mistakes along the way and not editing it out, i actually learnt a little more this way.

[Tynchotyn]

Spectacular video Dan, really helpful. Thanks a lot!

[Elias-xpbs]

This was super helpful! Got my first netlify function to work 🥳

[wajry]

This was exactly what I was looking for. Such a good explanation!

Only thing I would ask for is to set your VS code and browser to full screen, the code was a little bit hard to see on my small laptop.

Thanks for the lesson man!

[deanelie]

Thank you so much I was so frustrated with securing my Contentful API Keys (even if they are only read-only), this helps a lot!

[sacabassacabas]

Hi Dan,

This video helped me a lot. Thank you for your well-organized explanation!

[mogusmogus]

Thank you so much Dan! I am really grateful for this amazing tutorial.

[fhellafhame]

Thanks so much okay. I successfully used it to host some api calls which were giving CORs errors from the frontend. You are the great okay. God bless you

[nazokatisamova]

WOW thank you !!! you got a talent to teach. Thank you for sharing your knowledge.