Node Auth Tutorial (JWT) #12 - New User Signup (part 2)

Key Takeaways

or rather gangs so we've kind of done the sign up process in the this data when we click sign up is sent to the server in a post request we handle that by hashing the password first of all then saving the user to a database once that's successfully done we create a Json web token put it in a cookie and send it to the user and that's what we have right here every time we sign up so it's automatically logging Us in by giving us this JWT now at the minute that concept doesn't really mean much because we're not doing anything with this Json web token Beyond this ultimately this is going to get sent to the server for every request that we make to a different page or something like that and we can verify that later on but for now let's just move on and handle the errors on the front end over here because sometimes if we enter in something like Yoshi at which isn't a valid email and a password which is you know four characters long then there are errors and we handled those errors on the server we can take a look at that we have this function right here so up here this is where all of the areas are handled we create this errors object and then ultimately we send that back to the user as Json okay so we need to see if in the response we get either these errors in which case we need to show them to the user or if we get this user property in the response that means it's a success and we can then maybe redirect them to the home page instead of showing any kind of Errors so I hope that makes sense that's what we're going to do so over here we get the results when we make this fetch request and we can check this result to see what's inside it so we can say first of all that const data is equal to the response dot Json so this response right here to get the data out of it we need to use the Json method now this in itself is asynchronous so we're going to say await in front of it right there and then this data will be the object that we send back over here either this thing or this thing all right so now we can check inside that data object first of all I'm just going to log it to the console console.log data now then if I go to the front end now and refresh first of all to catch those changes if I try to sign up with something like Luigi at google.com that user shouldn't exist yet and test one two this should work and we should get back the user ID inside the response so let's sign up and yep we get that user ID right here so that was a success now what if I try to sign up with the same user again well let's try it uh this time we get errors so that email is already registered and for the password it should be empty because this is still fine now again I could say something like Luigi which isn't a valid email and it says right here please enter a valid email if I take two off the password we should get a password error as well and that says minimum password length is six characters so when there's an error we're getting those errors back when it's a success we're getting the user back so we can check for the presence of this errors property and if there is an error we can do something so let us now down here say if and then data dot errors so if that exists it's going to be truthy and we'll do something and what do we want to do in here we want to Output the errors and we want to Output them in this field if there's an email error and this one if there's a password so first of all we need to grab those from the Dom so let me say const email error we'll call this and set it equal to documents dot query selector and we want the dot email Dot error class so that's grabbing this div right here now I'm going to duplicate that and this time I'm going to call it password error and this time we want the password error div all right so we've got both of those now and if this errors we just want to populate that we want to change the text content of each one so I'm going to say that the email error div dot text content is equal to the data that we get back dot errors because we know we have that errors property now because we did a new check dot email now that email property and the password property are always going to exist sometimes it might be empty like this but it's always going to exist if it is empty it's basically just going to update the content to be an empty string so therefore we're not showing any kind of error if there is an error in there then it's going to update it with the error itself okay now I want to do the same thing for the password so let me say password error as well dot text content and set that equal to data dot errors dot password and that's all there is to it okay now I also want to reset the errors every time that we submit so that if we get an error for example and in fact let me Demo this let me Demo it so if I refresh over here and I type in Luigi and just one two three right here if I sign up we get those errors now right they're being populated with whatever is on this Eris object now if I update this to be something valid and press sign up again while that request is going on I don't want to show this error anymore so I want to clear out the errors every time we click sign up and then if we get errors back we can populate them again so let's clear them out every time we submit the form which is up here so I'm going to say right here reset errors and then underneath that I'm going to paste this in and I'm just going to change this to be an empty string for each one and that's all I'm going to do so we're taking out the current areas every time we click submit all right so that's that sorted if there's errors we show them now then let's try this by saying Luigi at google.com in fact we need to refresh first of all I'm going to say Luigi right here and one two three get those errors now if we try to update this to something that's valid then we can sign up again and notice this one now goes all right so I can say right here instead test one two three and sign up and actually this email is already registered so let's say luigi1 google.com and sign up and now it's valid and we get this user back awesome okay so now what we can do is instead of detecting the errors we can detect if there's a user property and if there is we can redirect them to the home page after they've signed up so let us do that below this if check right here and I'm going to say if and inside parentheses data.user so we're checking for the presence of that user property now and we can say location dot assign this is how we can redirect from the front end and we're going to say to just forward slash so that will do a redirect to just forward slash and it will request a home page from the server so let's give this a whirl again I'm going to change this to in fact we need to refresh to catch the changes then I'll do toad at google.com and test123 and sign up and yep we get redirected to the home page awesome all right then so everything is kind of working now for the sign up process next we're going to turn our attention to the login screen