How to Hide API Keys with Node JS | Hiding API Keys with dotenv Environment Variables

Рет қаралды 12,408

Күн бұрын

Web Dev Roadmap for Beginners (Free!): bit.ly/DaveGrayWebDevRoadmap
Learn how to Hide API Keys with Node JS. Hiding API Keys with dotenv environment variables is possible in server-side Node JS. That's why setting up a Node JS API Key Relay allows you to hide API keys and still receive the API data you need.
Subscribe ➜ bit.ly/3nGHmNn
🔗 Source Code: github.com/gitdagray/node_api...
(0:00) Intro
(1:25) Install NodeJS
(3:13) Install Package Dependencies
(6:59) Create the API
(9:49) Test a Route
(10:07) Create the Weather API Route
(13:05) Add an environment variable with dotenv
(14:37) Create GET and POST Weather Routes
(19:40) Test the GET and POST Dev Routes
(23:14) Add a Rate Limiter
(25:05) Protecting Your Routes
(28:58) Your .gitignore file
(29:29) Pulling the code from GitHub to Glitch
(31:14) Testing the Live Glitch Routes
✅ Follow Me:
Twitter: / yesdavidgray
LinkedIn: / davidagray
Blog: yesdavidgray.com
Reddit: / daveoneleven
Was this tutorial about how to hide API keys with a Node JS Relay helpful? If so, please share. Let me know your thoughts in the comments.
#hide #api #keys

Пікірлер: 43

@DaveGrayTeachesCode 3 жыл бұрын

This tutorial shows how to build a NodeJS API Key Relay. You can create a route for each of your projects or keys. It also demonstrates how to build a simple REST API with Node & Express.This solution keeps your API keys out of your frontend code and your GitHub repository. If you are looking for a quick solution to just hide your API keys from GitHub for a student project or similar, consider watching my previous tutorial on hiding API keys without dotenv: kzfaq.info/get/bejne/aLBjq8V-0K6We2g.html

@jamesmassa1999 3 жыл бұрын

Thank you so much for your responses! I was able to follow your tutorial just fine. Excellent, very well done. I am subscribed to your channel - you are quite the resource for information! Check your email when you get a chance.

@avshinkampf 3 жыл бұрын

Wow, I learned more in 30 minutes than with months of crappy codecademy lessons

@DaveGrayTeachesCode 3 жыл бұрын

Thanks! 🙏🚀

@marksheard1210 Жыл бұрын

Hi Dave, Just to say thanks allot for this well explained video, just about to use it now to implement this solution. Really well thought out and enjoy the pace as well, as i embark to putting this in for a web app that requires 3 API`s! 😅 Also last but not least just a quick shout out to all those using NodeJS V18 and above, that ' require ("node-fetch" ' is not needed as it is built in from now onwards. 👍

@DaveGrayTeachesCode Жыл бұрын

Right on! Yes, this video goes a couple of years back. Those packages gotta update!

@codedev4615 3 жыл бұрын

damn Dave does it again. So simple, so powerful, so awesome. You’re f*kn phenomenal dude. Been watching for a while, Keep up the great vids!

@DaveGrayTeachesCode 3 жыл бұрын

Thanks! 💯🙏

@minsupark9246 3 жыл бұрын

Thank you Dave for this wonderful tutorial~! It helps me a lot!! Thx again!

@DaveGrayTeachesCode 3 жыл бұрын

You're welcome! 🙏

@jeff-creations Жыл бұрын

Thanks for another very good coding tutorial Dave! I was stuck for a while with a nodemon error which was pointing at require node-fetch. Went to npm and found that node-fetch v3 doesn't support require. So, if anyone wants to still use require with node-fetch looks like v2 should be downloaded....... 'npm install node-fetch@2'

@DaveGrayTeachesCode Жыл бұрын

You are welcome! Good info for others!

@stefanmedves2071 Жыл бұрын

Thank you for your comment, helped me solve the same issue. I just wished I went through the comments section before spending 2 days in frustration.

@djm2g511 2 жыл бұрын

excellent tutorial! everything is working out now! thanks

@DaveGrayTeachesCode 2 жыл бұрын

Great to hear! 💯

@tabliqatchi6696 Жыл бұрын

Nice tutorial, thanks 👍👍👍

@DaveGrayTeachesCode Жыл бұрын

Glad you liked it!

@stoyansarov2647 Жыл бұрын

Hi Dave. Brilliant video. I struggle a bit with sending my post request body. I can’t grasp how to send information inputted from my html element to my api. Like typing and name of a city and then searching for weather data for it. Any ideas on that? Need to be a post request unfortunately.

@Speedfighter313 Жыл бұрын

Damn Dave, you think and write code faster than GPT4 👏

@DaveGrayTeachesCode Жыл бұрын

Ha! I wish. But GPT4 is essentially copying from one source and pasting conversationally in a window 😀

@Speedfighter313 Жыл бұрын

@@DaveGrayTeachesCode yes in terms of general intelligence but has a much quicker Input and Output response time compared to most humans…except for you lol

@mikegesme8799 2 жыл бұрын

Awesome - I have watched this a few times now to digest everything. However, is CORS really enough to secure this new back-end endpoint? If a malicious actor wants to use your API from their own Postman or other non-origin script, what's to stop them? Thanks in advance for any guidance!

@DaveGrayTeachesCode 2 жыл бұрын

Good question, Mike. It's been long enough, I don't exactly remember the details of this video - but I do remember the CORS implementation shown in my Node JS course: kzfaq.info/get/bejne/nJh1pKh0zrqmfGw.html - In that version, we have a list of approved origins, and if the domain is not in the list, they are blocked by CORS. The course also dives deeper into authentication and authorization if you are interested.

@drrooz5671 11 ай бұрын

Are we able to just write something like console.log(API_KEY) and it will write the api key ?

@jamesmassa1999 3 жыл бұрын

Dave this started off so good, but I just need to hide the api key - that's it. I can't figure out how to get around the search request you added. : (

@DaveGrayTeachesCode 3 жыл бұрын

Hi James, this is a request relay - kind of a like a team of runners hand of a baton. With a relay like this, your frontend app sends the needed information to the backend relay. The relay takes the information and injects the API key needed by the 3rd party API. Then it sends it on to the API. The relay then receives the API response and hands it back off to the frontend app. My search request is just an example. Supply your request and relay it to the API. I hope that helps!

@MrSxiong85 2 жыл бұрын

Random question...where did you get the "strive for progress..." sign? I seriously need to remind myself this everyday.

@DaveGrayTeachesCode 2 жыл бұрын

Hi Simon! I honestly don't remember which store. Many little gift shops sell these type of signs, but yes, it is a reminder to myself also. 💯🚀

@MrSxiong85 2 жыл бұрын

@@DaveGrayTeachesCode no worries. Will have a look to see what's out there. 👍

@JohnDavis_NetSkink_Computing Жыл бұрын

A few times, you mention that you want to make the code "dry". What do you mean? The second time it was mentioned was around the 19 minute mark.

@DaveGrayTeachesCode Жыл бұрын

D.R.Y. is an acronym for "don't repeat yourself". If you find yourself using the same code in more than once place, write a function that you can call so you only write the code once.

@JohnDavis_NetSkink_Computing Жыл бұрын

@@DaveGrayTeachesCode thanks Dave I appreciate it

@omozemojeaugustine3529 Жыл бұрын

I learn something

@coneeded05 Жыл бұрын

Can this method be used to hide an AWS API KEY in an HTML file?

@DaveGrayTeachesCode Жыл бұрын

You cannot hide anything in an HTML file. This method hides the keys on the server.

@coneeded05 Жыл бұрын

@@DaveGrayTeachesCode Thank you I finally figured it out with tutorial!!!

@sportsstimulant4228 Жыл бұрын

Brother it's cool ,I mean in react server ( not local host server) .env not working so that's why this way is very cool , but in recat first i creat .env file and write code REACT_SECRET_APP_KEY=123456abcd Then my index.js folder call it like {process.env.REACT_SECRET_APP_KEY} then I push it GitHub still show .env file in GitHub account that's why in . gitignore file add .env file after that I push it's work fine so my first question is which code i use I mean with .env and . gitignore method or today video you show that's way ?? My 2nd question is in index.html page action tag use some api key so that's key how to hide using .env beacuse it not react project so I can't do that pls help ??

@DaveGrayTeachesCode Жыл бұрын

I'm not sure I understand all of your questions, but here's the general idea: 1) Never push your .env file to Github 2) Instead, it should always be listed in your .gitignore file to avoid #1 3) Do deploy your project from Github and then provide your host with your environment variables 4) The above 3 steps apply to ALL projects no matter the code type used

@sportsstimulant4228 Жыл бұрын

@@DaveGrayTeachesCode okay boss.. 🙏🏽🙏🏽