How to hide your API keys SAFELY when using React

Watch part 3: Auth and limiting Requests - coming soon
___

⭐ New to code and none of this is making sense? Watch my '12hr+ YouTube Coding Bootcamp' in which you will learn HTML, CSS and JavaScript Fundamentals completely from scratch. It's on my channel and its 100% free.

You can also find me on:

#codingbootcamp​ #coding

[tumpelo]

Doesn't app.listen() accept the PORT constant, or why do you put it as number 8000 if it is already defined as constant :P

[jameshansen]

I've been searching for a clear tutorial like this for weeks, thank you so much! The CORS issue has been driving me crazy. I enjoy the sound of your voice, as it makes it easier to concentrate, and I loved the way you explained everything. Again, thank you! :)

[jamesdouglaswhite]

Extremely useful tutorial, thank you. Finally someone who understands a newbie's need for explanation of the fundamentals that seem so confusing when trying to figure it out for ourselves.

[SamzehGFX]

Awesome video, really great showing the benefit of feeding your api requests through a nodejs backend!

[some_dude_on_the_internet]

Nice to see steps to this setup. NextJS supplies "backend"/api routes outta the box w/o the need to rig it up yourself which is kinda nice.

[Zzaa]

I was looking for another video of yours and so happen to stumble upon this one and was like maybe I'll watch for a second. But I'm so glad I stumbled on this today! I will finish bootcamp next week and start a real job in a few weeks yet none of the instructors mentioned anything about how you can find the API key in the inspector tool! LOL Glad I know now!

[owenwexler]

This video is mandatory viewing for anyone making a frontend web app that connects to an API or backend of any sort.

Remember guys: the best way to store secrets and credentials in your frontend is to NEVER EVER store secrets and credentials in your frontend.

[LorenzoJimenez]

Very nice, you created a proxy. I know that is just an example, but I prefer to separate the proxy code in another project. Then add security rules that your API can only be called from your domain, and other measures to avoid denial of service attacks.

[ingeniodigital]

Awesome quality content. The sound and speed of your voice makes easier to follow and understand every concept.

[cyberianoid]

*Very important info for my study projects! Thanks, Ania* 😀
On the Cloud provider that I use for deploy my applications, there is a service called "Lockbox" which is used to store secrets inside an encrypted cloud storage.. But I have not used it yet. Thanks to you, I understand now why it is needed :)

[priopambudi]

Thank you Ania! I'm just confused to handle the key in the frontend, and you're very helpful!

[abhinandankhilari]

One question - How to deploy this setup (frontend + backend) on hosting platforms like Netlify, Heroic, etc. for a working demo? Am I missing anything?

[arulmuruganK]

Thank you kaleeshi, you saved my kingdom. I was repeatedly asked about this in my interviews.

[nicoladc]

Really good tutorial, however I find missleading to say that this will prevent someone from using the paid API and use your money.
This will only secure your API key, but if someone calls you API thousands of times you will still have the same problem, even if you didn't compromise you API key.
If you really have a paid service behind an API I would strongly recommend to limit its use with throtling and user authentication, unless you are willing to take the risk of getting unusual traffic.
Really good tutorial :)

[ping]

Thanks for a very very good step by step video for such an important topic. I will come back to your channel for more insightful react tips 👍

[whatnow]

this was really helpful
definitely will be using in my projects

[trtlphnx]

Damn I Love Your Incredible Tips and Strategies ~
Love You Ania, And ALL You Do For Us ~

[elmatito]

amazing, thank you so much. Im a little bit lost though on hoy to deploy this, since the backend needs to be in another location

[bgill]

Thank you very much.
Your videos are so good and informative :)

[twilkpsu]

Have not watched this one yet, but Ania is solid and a master thumbnail marketer! 😉. Bravo!