Register and Login Full Lifecycle with NodeJS

This tutorial covers both the client-side and the server-side of the process of registering and logging in a user with Hashed passwords.
The bcrypt NPM module is used for the hashing.
The difference between hashing and encrypting is briefly covered.
The full lifecycle and code in the browser as well as on the server is discussed.
GitHub Repo with code from tutorial - github.com/prof3ssorSt3v3/nod...
Bcrypt package page - www.npmjs.com/package/bcrypt

[@nwobodogeorge5370]

In my opinion, you are the best online tutor on web development. God will bless you. I have learnt so much from you. Thank you once more for the good work.

[@maxtayebwa8987]

BEAUTIFUL, prof! You are the best.

[@nizarkadri3109]

I really loved the way you explained !! Thanks a ton for being so informative...

[@barungh]

Wow ! Now this is what quality tutorial is

[@maxtayebwa8987]

Exactly, excellent tutorial!

[@user-dk4gs1dq6k]

I can't thank you enough! finally I've become able to picture how it works.. I am a 'front-end' developer and It's been 2years since I started. and I'm trying to understand 'server-side' recently. Although there are tons of lecture in this KZbin, To me, Mr. Steve has perfect pronunciation speed and content! ^ o^ TMI: In South Korea, most of people study English with 'TOEIC' which tests English level. so when someone has different accent or speed from 'TOEIC' test , I tend to hardly understand that. Thank you again. I am looking forward another 2021's lecture whatever It is!

[@gowthambhat1498]

This cleared lot of my doubts...thanks Steve

[@Opyext]

wow this is amazing thanks so much for your tutorials

[@abulfazlhaidary4625]

Awesome video! Really helpful.

[@shtono9201]

Thank you Steve!!! You are the BEST

[@JOc17KER]

you shoul be the next bucky!

[@waheedafolabi6264]

Wow! Excellent FP

[@GauravSingh-st5sd]

Subscribed!

[@Banjer]

Great!!!

[@radoslavtsanev6822]

Good one! Can I ask you what extension do you use for the look of your folders ( node modules, gitignore , client and so on)?

[@SteveGriffith-Prof3ssorSt3v3]

Vscode icons

[@puhozavrik]

My god this voice ...🥰

[@AmitGupta-rt2gp]

Thank you Steve for this tutorial. Is this approach of authentication sufficient for a small web based app? I have been looking at Auth0, Okta, etc. for my small app but I feel this should be enough.

[@SteveGriffith-Prof3ssorSt3v3]

Yes the general approach is enough. Just note that I did not include the database part of the solution. I would use a static file like that to store actual data.

[@segafrompk]

Hi Steve, this might be a silly question, but what is the advantage of hashing password on a server vs hashing it on the client side? Wouldn't it be better to hash it on the client side so if someone tried brute force attack it wouldn't put stress on the server hashing all those password attempts? Is it a security hole if hashing algorithm is revealed to the attacker?

[@SteveGriffith-Prof3ssorSt3v3]

The whole point of doing the hashing on the server is to purposely slow down the process. You want to make it harder for people to hack. The salt values we also want to generate on the server, away from the client. We need to be able to compare the hashed value that is already on the server with the plain password by running it through the hashing process in a way that hides information from the hacker.

[@the7engine]

Thanks!

[@the7engine]

Thanks Steve, not sure how far $10 AUD goes in Canada, but hopefully it buys you a beer! Your videos have been really helpful and got me a long way to understanding JavaScript and Node from absolute beginning.

[@SteveGriffith-Prof3ssorSt3v3]

@@the7engine thanks. It definitely will buy me a beer. Probably two. 😃

[@questreal5812]

Hey this might be a silly question but does bcrypt.compare(txt_value_of_pswd, hashed_value_of_pswd) basically work like this if( bcrypt.hash(txt_value_of_pswd, saltRounds) === hashed_value_of_pswd ) return true else return false ?

[@SteveGriffith-Prof3ssorSt3v3]

Basically but the compare is protected against timing attacks I believe

[@questreal5812]

​@@SteveGriffith-Prof3ssorSt3v3 I can't understand how it's able to do this if every time the same word is hashed, a different string is generated. (I'm using this bcrypt-generator.com/ to test it) I guess there must be some sort of complex algorithm running in the background.

[@aarushiemahajan5346]

Once again, great content and good explanation! Can you please explain the purpose of ev and how's it being used? I don't seem to understand the usage of ev at all. function doReg(ev) { ev.preventDefault();

[@SteveGriffith-Prof3ssorSt3v3]

Ev is the variable holding the event object passed to the function. I would recommend you watch my javascript events playlist.

[@aarushiemahajan5346]

@@SteveGriffith-Prof3ssorSt3v3 - Thank you. This helps.

[@lantern8613]

I have a question regarding the intentional wait time for hashing the dummy password; I understand *why* you want the time it takes to be the same regardless if the email exists or not -- but the reason provided seems kind of redundant if a user can register multiple times with emails and get back an error that the 'email already exists' or not. Wouldn't that be the same as just trying to login a bunch of times with emails to see if they exist based on a time delay?

[@SteveGriffith-Prof3ssorSt3v3]

The registration should really use two factor authentication / validation via email. If they register then say that an email has been sent to the account to validate/activate the account. The email can say an attempt was made to re-register with the email address if it already existed. But getting into dealing with emails is a whole other topic that I didn't have time to do here. Great question.

[@lantern8613]

@@SteveGriffith-Prof3ssorSt3v3 Thank you for your reply! The registration example makes a lot more sense in regards to whether or not we're telling attackers if an email exists or not. I've really been enjoying your ExpressJS playlist; thanks for the work you've put into it!

[@the7engine]

Steve do you have any videos expanding on this to incorporate express-sessions?

[@SteveGriffith-Prof3ssorSt3v3]

I have a Playlist on express.

[@the7engine]

@@SteveGriffith-Prof3ssorSt3v3 but specifically including sessions? I’d love to see how you go about incorporating MySQL and check a session against a cookie and so on.

[@SteveGriffith-Prof3ssorSt3v3]

@@the7engine JWT is the new way of tracking sessions. That is what this video covers. The old cookie based session id stuff I did with PHP. I think I have a video in my PHP playlist about that. MySQL tends to be separate from session management unless you are putting a session id into a user table in order to log things for a specific user. With JWT, the token is the session identifier. It is being passed with every request, similar to cookies. Here is another video I did about JWT kzbin.info/www/bejne/h3SmnoqEoaqemrs

[@aimanzaheb1475]

Please tell why await keyword is not required for users.find() function? Is it not possible parser will jump over without comparing all emails, as we are in async function.

[@SteveGriffith-Prof3ssorSt3v3]

find is a synchronous method. The parser will not jump over it.

[@aimanzaheb1475]

@@SteveGriffith-Prof3ssorSt3v3 Thanks

[@lookingforbino]

Hi Professor Griffith, what does Sign out look like if there's no web token involed?

[@SteveGriffith-Prof3ssorSt3v3]

If there is no token then you are managing users and sessions in a different way

[@lookingforbino]

@@SteveGriffith-Prof3ssorSt3v3 So if I set up register and login like what you did in this video without give out any token, the app won't know if this user is login or not, right?

[@SteveGriffith-Prof3ssorSt3v3]

@@lookingforbino you have to write the code that does things based on there being a token

[@nizarkadri3109]

Hi, I am facing difficulties when i try to post the request to different html page, scenario: I have a form on signup.html and I am sending a post request with the data of signup form and I am trying to get this data back on different html page named verify.html. What's the change i should make in your provided to achieve this

[@SteveGriffith-Prof3ssorSt3v3]

The method you are looking for is the res.redirect( ) - expressjs.com/en/4x/api.html#res.redirect

[@aimanzaheb1475]

At 6:32 If we send json error object intentionally from server? will it get caught in catch(failure)? If yes then what's the use of if('error' in content){} block

[@SteveGriffith-Prof3ssorSt3v3]

No. If you get a response from the server then the fetch has not failed. You need to write the code to check the http status code or look at the object that was returned.

[@saurabhtiwwari2546]

Sir, I have done with expressjs restapi,curd using atlas what I should do next pls help I am really confused pls sir

[@SteveGriffith-Prof3ssorSt3v3]

I don't understand what you are asking.

[@blackpilledbuddha4944]

I've noticed that there is a lack of detailed guides on testing backed-end with jest, most tutorials on KZbin seemed to skip this crucial part of development,

[@SteveGriffith-Prof3ssorSt3v3]

Please feel free to post and tutorial requests in the comments here - kzbin.info/www/bejne/gnTIq5SuZ9qBacU

[@angeliqueesguerra6650]

Great tutorial! However I have encountered a problem. The fetch is successful but it doesn't proceed to the function loginSuccess. Any suggestions? Thank you!

[@SteveGriffith-Prof3ssorSt3v3]

Just check in the browser console, browser network tab, and console on the server to see if an error is occurring at one of those points.

[@angeliqueesguerra6650]

@@SteveGriffith-Prof3ssorSt3v3 I did. There is no error message showing. But I saw that it is not proceeding to the loginSuccess function :(

[@angeliqueesguerra6650]

@@SteveGriffith-Prof3ssorSt3v3 Its response is status 202.That is what I saw in the network console

[@doddynicolas3164]

how to use nodejs and apache in the same project

[@SteveGriffith-Prof3ssorSt3v3]

I wouldn't. If I'm using NodeJS then NodeJS will be the server. If I'm using PHP or Ruby then I would use Apache or NGINX as the webserver.

[@gopinathkrm58]

Hi i am doing a login system similar to this, but after logging in I am rendering a page. The problem is i can able to log the results in the browser like yours, but when I try to render a page it is not navigating to that page.

[@SteveGriffith-Prof3ssorSt3v3]

There are lots of ways to do redirects. After a login, the best is with a server-side redirect. Instead of res.status(200).send({ data: { token: 'this is a pretend token' } }); in app.js you would use res.set( ) to put your token in the headers and then send the actual file you want with send( ).

[@gopinathkrm58]

@@SteveGriffith-Prof3ssorSt3v3 Actually figured what the problem is, i am using fetch with header set with token and in the server side using res.render("dashboard", { user: req.user }); since this will send an html file to client, the wrong i did was using response.json() to get that html, when i used response.text() i am getting that html and replacing with body.innerHTML. At first I tried server side rendering only but couldn't render. Below is my fetch call after some validation making a POST request and clling login(email, password) which will give me back token and after storing in local sorage making GET request getProfile() inside the login() itself with token inside it async function getProfile(token) { const url = "/users/me"; const response = await fetch(url, { method: "GET", headers: { Authorization: "Bearer " + token, "Content-type": "application/json; charset=UTF-8", }, }); const data = await response.text(); document.body.innerHTML = data; } I have 2 doubts 1. how to achieve server side render while using fetch in the client side ( also tried redirect as follow still not working) without manually replacing the body in the fetch call like above 2. In the above code i am able to login and view the dashboard but when again refresh or navigate to some other page which has to be authenticated, i am unable to authenticate, how to detect the presence of token for all request when a token is registered while a user is logged in Thanks in advance

[@brucewayne252]

I am getting tons of node-pre-gyp errors while performing npm install. Something has changed?

[@SteveGriffith-Prof3ssorSt3v3]

This was back in 2019 or 2020. There have been version changes to everything since then.

[@iUmerFarooq]

Also create a video in which we login through Gmail, Facebook, GitHub etc.

[@SteveGriffith-Prof3ssorSt3v3]

Please add your request to the comments here - kzbin.info/www/bejne/gnTIq5SuZ9qBacU

[@iUmerFarooq]

@@SteveGriffith-Prof3ssorSt3v3 Done

[@SonNguyen-gb7pz]

Thank you for your video. I've already built a register and login function for my own project. I also used the mongoose library from NodeJS to save the email and hash password to MongoDB. However, I'd like to improve my authorization system with different roles (such as admin, manager, users, dev,...) so each one can have different permission to access different private routes. Can you give me the idea of designing a hierarchy system like that?

[@SonNguyen-gb7pz]

Btw, I believe you should have this line of code at line 76 in app.js "let submittedPass = req.body.password; //plain text from browser" in case there was no match for the email.

[@SteveGriffith-Prof3ssorSt3v3]

Where ever you save your user information you need to add a field to represent their user type or a field to represent what they are allowed to do. I did a video on how to save a bunch of permissions in a single integer last week - kzbin.info/www/bejne/e4fZi3-cf9l0gZo Once you have the user type or permission number then you need to add the checks for those as middleware that is always checked.

[@SteveGriffith-Prof3ssorSt3v3]

@@SonNguyen-gb7pz If there is no match for the email i don't care what password they sent. That line is only needed in the one place it already exists.

[@SonNguyen-gb7pz]

​@@SteveGriffith-Prof3ssorSt3v3 On server-side, it will throw an error "UnhandledPromiseRejectionWarning: ReferenceError: submittedPass is not defined" because submittedPass isn't on the scope. Anyway, I get your whole idea. Thank you so much.

[@aimanzaheb1475]

at 20:27 You told to slow down the process even if email not exist? But whats the benefit? a person can also use web scraping to find out which emails exist from a large list he owns...

[@SteveGriffith-Prof3ssorSt3v3]

We don't want there to be a difference in the time it takes to test emails that exist vs ones that don't. Hackers can use that to test whether accounts exist for specific emails. Then they only need the password.

[@aimanzaheb1475]

@@SteveGriffith-Prof3ssorSt3v3 But its also possible if we return email not exist error on front end which developers usually do. Is it bad practice?

[@SteveGriffith-Prof3ssorSt3v3]

@@aimanzaheb1475 yes. That is a bad practice. Never tell someone trying to log in if the email or username do not exist

[@aimanzaheb1475]

@@SteveGriffith-Prof3ssorSt3v3 But users might have problem who have multiple emails & they forgot which email they did use while registering.

[@SteveGriffith-Prof3ssorSt3v3]

@@aimanzaheb1475 That's why we have the forgot/reset password screen. But we still shouldn't tell them if the email exists. Just say an email was sent if the account exists.

[@mykalimba]

Instead of having the "if (userMatch)" check, I might do "let savedPass = userMatch ? userMatch.password : `$2b$${saltRounds}$invalidusernameaaaa...a`;" That way, it's runs literally the _exact same_ failure code if either the username or password is invalid.

[@SteveGriffith-Prof3ssorSt3v3]

Sure. you could do that too.