Build Node.js User Authentication - Password Login
ฝัง
- เผยแพร่เมื่อ 22 ส.ค. 2024
- In this video we are going to build a secure Node.js user authentication system. I will be covering all of the security concerns that you will run into while building an authentication system. We will also cover how to securely store a password in case of a database breach. Lastly, we will cover how to login a user securely based on their name and password.
📚 Materials/References:
GitHub Code: github.com/Web...
Login With Passport Tutorial: • Node.js Passport Login...
🧠 Concepts Covered:
- What a password salt is
- How to properly hash a password
- How to store passwords
- Basic express server setup
- User login
🌎 Find Me Here:
Patreon: / webdevsimplified
Twitter: / devsimplified
Discord: / discord
GitHub: github.com/Web...
CodePen: codepen.io/Web...
#WebDevelopment #WDS #JavaScript
![[Full Episode] MasterChef Junior Thailand มาสเตอร์เชฟ จูเนียร์ ประเทศไทย Season 3 Episode 10](http://i.ytimg.com/vi/8kldrPPsDZs/mqdefault.jpg)
Full Node.js application authentication tutorial: th-cam.com/video/-RCnNyD0L-s/w-d-xo.html
A little tip for those using Postman!
If you're trying to send a request in postman and you're getting undefined or type errors, you're most likely trying to send params when you should be sending JSON in the body.
instead of using 'Params', select 'Body', select the radio button 'raw', then at the right side of the radio buttons (next to 'GraphQL'), select JSON in the drop down. You're welcome.
This guy's teaching style is perfect.
Agreed
Agreed
Agreed jim 😅
Agreed Jim
@9:01 He says "Hassed Pashword"
Putting in a little comedy with these high quality explanations. You are going to be 1M+ soon. Very good explanation Sir, loved it.
I feel like i discovered a gem on TH-cam! Keep up the amazing work!
Thanks! I am really glad you like my video that much. Hopefully I do not disappoint in the future.
Watching these videos in 2024 where AI is taking over Web Dev, still keeps me motivated and interested on becoming a Full stack real quick. Thanks for your efforts 🙌@@WebDevSimplified
Great video. Pretty simple and well explained.
One thing: When authenticating with username/pw do not let the user know if a username does not exist. This way it is possible to create tons of requests to get all the stored usernames. Just respond with something like 'authentication failed' for either scenario (username not found / wrong pw).
Keep up the good work!
That is a good point. It also prevents people from discovering other people's usernames
Can you explain how someone can create tons of requests to get all the stored usernames ?
@@nasrisami17He doesn’t actually mean “all”. He means you could find a lot of usernames by essentially compiling a massive list of usernames beforehand, sending the login request, and then checking to see if the error is “user does not exist” vs “failed login”. The latter tells you that there is an account with that username on the server. This doesn’t imply you would actually be able to access the account, but information leaks are generally not good to have.
I can trust this channel blindly 😊 Authentication sounded really intimidating to me until now, but you simplified the basics soo well in such a short time! Really enjoyed the video. Thanks a lot, Kyle!
Same here
Hi Kyle, great tutorial so congratulations for that. However I encountered a problem in your code that would manifest when adding more users to the users array. After adding a second user and checking if that user existed and therefor logged in, this very process would overwrite its previous hashed password. Where the problem lies: in the route /users/login you check if user existed in the const user = users.find(user => user.name = req.body.name). You are using an assignment here instead of a comparison operator ==, it should be users.find(user => user.name == req.body.name). Hope this was helpful for others who may have tried adding more users to the array. Keep it up Kyle!! Best regards
This is what I am looking for
Would love to see this process integrated with a database instead of an array, and with JWT. Basically a wholesome login. But for what it is, brilliant video Kyle
@Kayle Excellent job! @Joey you are absolutely right, that's where it will be found a bug -:)
great that you find the tutorial great, maybe someone of you can explain why we hashed a password, but did nothing with that password in the login function?
As of right now, I found the tutorial more confusing than anything.
@@AndrewTSq The hashed password was compared with the login request password
Hey there, thanks for simplifying the web.
I have a small notice that I want to share
When you searched for the user inside the users/login route you have this (user=> user.name = req.body.name) instead of (user=> user.name = =req.body.name)
I am sure that you've done that accidentally but just notifying you for other watchers.
Thanks again
Complete and to the point. Awesome tutorial.
Just a minor correction. In 'users/login' the users.find should use '==' and not '='. i.e. "users.find(user => user.name == req.body.name);" Else it would assign instead of comparing.
I know it probably doesn't matter, no, definitely doesn't, but he made a note of it in the video at timestamp: 11:18.
Thanks man, I guess I missed seeing that note
it does matter, it only works for the first user/time@@user5214
im watching yt/udemy tutorials for past week. and i have to tell that you are the best that is out there. perfect pace, perfect voice, perfect explanation.
big thank you!
Thank you so much! That really means a lot to me and I am so glad that my teaching style resonates with you so well.
Simple, fast, clear... you neeed to make more tutorials for us man, for eeverything, tutorials for life!
The REST extension is a blessing :O I love it so much :O thank you
could you tell me where the send request button is
Yes, we want full application!
Thank you
I can't wait to make it
that was PERFECT! i thought login was some complicated long process, this was a relief!
although i know there is more to it than just this like jwt tokens and secure headers, oauth, 2 step auth etc. this was such a nice video to begin with
We are working on a group project in the bootcamp I’m in and I’m handling the login page. This video is a godsend. Thank you
I am revisiting some old concepts for a code test, and this tutorial was great. Just want to say, you have a super clean delivery, and your example flow is extremely good. I appreciate the new plugin for VSCode btw, the REST Client? Super dope. Anyway I'm only half way through and felt like I should sub, and let you know it was good quality content. Back to it!
Very simply explained! Thanks
That's pretty crisp & clear. Thanks a lot!
The way he says "WHOOPS" gets me. Idk why, it just does.
I am always excited when a new video goes up! You have helped me switch from being a UX Designer to JS Developer :) Greatly appreciate your work.
That's awesome! I'm really glad I could help you along the way.
@@WebDevSimplified can we do that with websites
In html
Thank you for the tutorial! I laughed a lot every time you said "Hassed Pashword" :D
Speaking and typing is way too much for my brain :P
whenever i get stuck on something, i always check your channel, knowing that i will find my answer..
as always, i get what i need.. thank you kyle..
I like the way you explain without a lot of blah blah. thank you!
In order to create unique users, add the following to the app.post route ('/users')
const user = users.find(user => user.name == req.body.name)
if ( user ) {
return res.status(400).send('Already exists')
}
This will check if the name is already there and stop from being created, just something to keep in mind when implementing in production which usually uses usernames and emails versus name which can have duplicates.
Short, Sweet and to the point tutorials. All videos are best Kyle.
These tutorials are awesome! Thank you so much for providing such a simple and well-explained tutorial. Keep up the good work! Can't wait for your other videos
Excellent introduction for how to start with a node.js back end, makes it very easy to understand basic operations. Kudos!
this is so clear, we beginners need this kind of video to teach very small thing one by one, thank you so much
Thanks for such an easy and step by step guide, really easy to follow and understand, i watched many other tutorials which were 1 hour long and you just nailed it in 13 mins, Dude u are a gem
I was confused when salt was displayed with hashed password. After googling it I was surprised even more, actually its intended that way. Salt is used to protect from rainbow tables, not from brute force or dictionary attacks. For those you use peppers! As always great video Kyle, thx for upload!
I would love to see a simple application with login
I will make sure to make that one of my next projects.
Up
yeh, me too, desire for a simple real world application !!!
@@WebDevSimplified Please do a Auth boiler plate with MongoDB(Atlas): including passport, bcrypt and JWT. Having them in separate module is nice but having a complete boiler plate would be better. Love the 123 approach - keep the good work.
This is a login and register system from WDS :)
th-cam.com/video/-RCnNyD0L-s/w-d-xo.html
Thanks man! I miss doing backend with node.js and middleware stuffs. Will watch your channel often so I can still keep up in node. Great work!
Damn I love your vids, straight to the point, well done and thank you.
You are very welcome!
if someone faces errors with bcrypt.. try using bcryptjs having same functionalities
npm install bcryptjs
thx
Or you could follow the instructions for your OS... Most likely missing either node-gyp or build tools, see: github.com/kelektiv/node.bcrypt.js#dependencies
This was so helpful. Please make a longer, more in depth version with an app.
Super nice and quick! Shows the minimum amount so I can get a grasp on it and doesn't waste my time! Thank you very much. Great first step into this.
greate I like the way you build every thing from the scratch thanks!
Web Dev Simplified! Stays very true to the name!!!
smoothly explained , loved it
Subscribed, thank you for quality videos straight forward, Thanks 🙏🏼
I learnt everything about *SIMPLE AUTH*. Thanks a lot!!!
followed you from a CSS battle you had with Powell... i think pursuing you was not bad. Thank you for your tutorials
I been searching this for a month
Now your explanation is so simple 13:31
Your videos are pure gold due to very clean and precised form of providing information.
Its great to have videos with pure information content with decent amount of energy.
Thanks!
berkcan güven.. kendini geliştirmiş yazılım işine atılmış helal olsun..
I have been working on this for a couple of hours and you made it so so simple. Lol. Thank you.
Awesome tutorials! Just checked out the entire web app authentication playlist. Found everything I was looking for in one place. Thank you Kyle.
Subscribed! :)
I'm going to recommend this channel to all my mates.. We're blessed to have you Sir..
Thank you!
Simple easy and straight forward .. this is how teaching should be
Good teaching bro👋👋
Your concepts are really clear. Thanks and best of luck to you 🧡
thanks for this, man. My Node skill just got better!
So crisp and to the point tutorial... I really like the way you explained.... Thank you 🙏
Wow! Greetings from Brazil! Thank you for sharing this! I'm creating an Budget generator system with Node and React and this video help me out to implement secure passwords and login system on my application (I'm studying by myself, so I use hard Yotube and EAD platforms). Keep this awesome work and quality videos!
I was able to learn user authentication through your video. Thank you.
This was so useful, you helped me go throughout my interview code challenge. You saved my life. Thanks
Neat and clear, Thank you WDS
Amazing video ❤
I m just starting with backend and this is like the perfect guide for starting in it.
Thanks alot man.
Thank you Kyle. You are the best. Keep up the good work.
You are very good at explaining.
Awesome Content Liked the way you Explained
when am stuck you always come through, thanks
well done 👏 for a great video , looking forward to watch your upcoming one !
I'm only 3 minutes into the video and you already got my like. I love the style of your explanations. Fast and concise so we get the maximum infos for minimum time. Really appreciated.
Great pace. Thanks for the content!
great tip about rest client!
Great video Kyle!
This is so amazing, so incredibly new experience, I learnt a lot of things along with authentication like that rest client, it is so easy and quick.
Thankyou ♥️
You're a fantastic tutor dude, thanks for all your work.
Absolutely concise and to the point, amazing. Thank you, that was tremendously useful.
I know what you mean. Some teachers talk a lot about nothing and the learning takes forever. He was just right, explaining what needed to be explained.
Awesome tutorial thank you
why do you shine? amazing courses man
Thank you! This was very informative! Apart of the content you used, I also discovered that REST plugin for vscode is quite handy!
Great video. Will wait for more videos.
Thanks. I am excited for the next video I record since it will be a design video which will be a first for the channel.
Thanks! It`s a good video for learning!
Thank for for this amazing tutorial. Finally undterstood the bcrypt npm! was so hard for me.
Thank you very much from France!
thank you such a awesome teacher. I read in the comments below that you are looking to make a full stack video for auth, wherein we sign in etc from a client app. Plz make it possible sn . thank you
Very clear explanation, thanks a lot !
Thank you bro, I'm starting to love you and your tutorials! No homeowner of course..
Your videos are eye opener.. thank you bro
Simply You're more then everything for me, Best Wishes.
thank you for such a great content!! amazing work! subscribed!!!
Hi, Thank you, It was very cool. please make more videos like this. good luck.
Your content is awesome bro👍👍👍
very helpfull tutorial thank you
Shouldn't the line 25 on server.js read - const user = users.find(user => user.name === req.body.name) - rather than - const user = user.find(user => user.name = req.body.name) -. BTW, thanks a lot for these set of videos. They are amazing, keep up the good work.
Thank for introduce and explain bcrypt, I have learned something !!!
You're welcome! I'm glad I could help.
Great Video Thank you.. You said "Hassed paSHward though at 9:00 lol
bro this was amazing thank you!
easy to understand. good job :)
Super Awesome!, I really like your tutorial.
Thank you so much.
I will check out your other auth tutorials. Would love to see this with an actual database connection...mysql for example. Thank you as this was a great tutorial.
Thank you very much. It was a great video. I would love to see a video of a full app with authentication as you mentioned at the end of this video. Thank you again! .
I'm really glad you enjoyed it. I am looking forward to building a full app version of this.
@@WebDevSimplified would be very nice, today im myself am going to try to put autentication in the full stack app, so users can see books and authors, but can only edit when logged in. I guess i should block parts of the routes depending on the login being true isn't it?
That is correct. Using a library like passport to help you with this may be useful. You also can create a middle ware that will check if a user is logged in and make it return an error if they are not.
@@WebDevSimplified Haha, fantastic, i got that working, it took a while, but that's the learning curve. its still needs some cleaning up, but that's for later, i just stored it at github.com/JEVBR/WDS
Works! Thank you!
Thanks Robert Matthew Van Winkle, this was a great tutorial!
Very clear and to the point. Thank you
You're welcome!
The only critique I could give you is SLOW DOWN a bit. You move so fast and fidget the mouse a LOT, it's hard to keep up without having to rewind and pause if you're following along. Other than that, great video, straight to the point almost to a fault.
***I HAVE A QUESTION*** to first clarify, I am not well versed in JS. I have watched a plethora of youtube videos on javascript and I have a read a few books but to actually utilize any of that inform in a website I still have no idea how to do that. SO, what I am trying to do is a create a database ( basically I already have done this part ) and I have created the form for my customers to fill out so their data can go into the data base. I want the customer to have to enter their email and a PASSWORD in the form and only be able to use that information to retrieve that information at a later date.
EXAMPLE when you log into your social media account or when you log into your online banking account you enter a user name ( email in this case ) and you enter a password and when you enter that you are retrieving YOUR data in their data base and no one elses ( ex, WHEN YOU log into your bank account, you dont enter your user name and password and get everyones information who does business with that bank, no, you only retrieve your account data.) So, HOW is this done? Do you have any videos or can you do a video on this???