1 00:00:01,320 --> 00:00:06,180 Let's get started working on our sign up root handler and make sure first that a user can sign up to 2 00:00:06,180 --> 00:00:07,090 our application. 3 00:00:07,150 --> 00:00:11,170 No we'll worry about allowing them to sign and sign out and fetch the current user. 4 00:00:11,180 --> 00:00:15,170 So to get started I'm going to find my sign up router. 5 00:00:15,270 --> 00:00:16,730 So here it is right here. 6 00:00:16,920 --> 00:00:20,860 We've got the appropriate method and the appropriate route on the inside of your. 7 00:00:20,880 --> 00:00:23,790 We need to figure out exactly how we sign up a user. 8 00:00:23,790 --> 00:00:27,540 Well the first thing we probably need to think about is the information that needs to be provided to 9 00:00:27,540 --> 00:00:28,770 this root handler. 10 00:00:29,190 --> 00:00:34,090 In this diagram I said that we need to receive some kind of email and password on the incoming request 11 00:00:34,160 --> 00:00:37,400 or more specifically inside the body of the request. 12 00:00:37,440 --> 00:00:42,430 So let's try to just pull that information out back inside the sign up root handler. 13 00:00:42,470 --> 00:00:50,880 I'm going to try to pull email and password out of req dot BODY LIKE SO know right away. 14 00:00:50,880 --> 00:00:55,390 I want you to just understand that we've kind of made a really big assumption here. 15 00:00:55,470 --> 00:01:00,270 We are assuming 100 percent that there's going to be an email and password on the body. 16 00:01:00,270 --> 00:01:00,650 We're not. 17 00:01:00,750 --> 00:01:03,020 Maybe we're not 100 percent assuming that just yet. 18 00:01:03,030 --> 00:01:06,630 Well let's imagine that we just took that information and then used it to create some new user right 19 00:01:06,630 --> 00:01:07,050 here. 20 00:01:07,050 --> 00:01:13,230 So if you said something like make a new user of some kind with an email and password who knows what 21 00:01:13,230 --> 00:01:15,920 user actually looks like that's just some imaginary code. 22 00:01:15,930 --> 00:01:20,580 But we're kind of assuming that email and password are actually defined and actually contain an email 23 00:01:20,610 --> 00:01:21,600 and a password. 24 00:01:21,600 --> 00:01:26,750 It is entirely possible that a user might send us some kind of malicious request or even just a faulty 25 00:01:26,760 --> 00:01:33,490 request one that doesn't include an email or a password so I don't want to build anything in this application. 26 00:01:33,500 --> 00:01:38,930 As I mentioned many times taking that many shortcuts on make sure that a lot of the stuff is as production 27 00:01:38,990 --> 00:01:40,050 as possible. 28 00:01:40,130 --> 00:01:44,990 So I don't really want to have any code that's just going to assume that a user is providing an email 29 00:01:44,990 --> 00:01:48,050 and password as expected instead. 30 00:01:48,050 --> 00:01:50,780 I want to put in some validation attempt inside of here. 31 00:01:50,840 --> 00:01:54,180 I want to make sure that email and password are actually defined. 32 00:01:54,290 --> 00:02:02,330 We could do that by adding in a little check and saying if there is no email or if type of email is 33 00:02:02,330 --> 00:02:14,170 not equal to a string then we can do a red dot status of or 100 should be status like so and a sense 34 00:02:14,230 --> 00:02:18,520 of maybe provide a valid email or something like that. 35 00:02:18,910 --> 00:02:22,560 Naturally write out the code you see right here would get very tedious very quickly. 36 00:02:22,610 --> 00:02:27,370 So rather than doing any kind of manual validation we're going to rely upon an outside library instead. 37 00:02:27,850 --> 00:02:31,280 Let me show you the library we're going to use at my terminal. 38 00:02:31,280 --> 00:02:34,130 I'm going to navigate over to NPM jazz icon 39 00:02:37,170 --> 00:02:37,920 once here. 40 00:02:37,950 --> 00:02:47,590 I'm going to do a search for Express dash validator Well then find the first results and then once here 41 00:02:48,030 --> 00:02:54,550 I'm going to find a link to the documentation for this module if you've never used to express validate 42 00:02:54,550 --> 00:02:55,300 or before. 43 00:02:55,330 --> 00:02:59,950 It's a very simple little module that's going to make sure that a user provides the appropriate information 44 00:03:00,010 --> 00:03:01,540 on incoming requests. 45 00:03:01,540 --> 00:03:04,360 It's going to do some automatic validation on this information. 46 00:03:04,360 --> 00:03:10,120 It can also sound sanitize that information as well validation is the process of making sure that information 47 00:03:10,120 --> 00:03:15,610 has the correct structure and form whereas Sanitization is going to change that information in some 48 00:03:15,610 --> 00:03:22,860 way good might try to remove certain types of characters or stuff like that if you want to you can read 49 00:03:22,860 --> 00:03:27,300 through the documentation of express validator but rather than going through all that I'm going to show 50 00:03:27,300 --> 00:03:29,190 you directly how to use it. 51 00:03:29,400 --> 00:03:33,800 Naturally the first we have to do is install it into our project using NPM. 52 00:03:33,980 --> 00:03:41,420 So we're going to go back over to our terminal I'm going to change into my off directory and then inside 53 00:03:41,420 --> 00:03:51,240 of here we're gonna do an end install of express dash validator like so so let that do its thing. 54 00:03:51,240 --> 00:03:56,430 Now when we install that module that of course makes a change to a package not just on file we are now 55 00:03:56,430 --> 00:04:02,010 listing out express validator as a dependency to our project scaffold is watching all the files inside 56 00:04:02,010 --> 00:04:03,230 of our project directory. 57 00:04:03,360 --> 00:04:09,840 And so as soon as it sees a change to a non sync file in our package that Jason File is not sync that's 58 00:04:09,840 --> 00:04:15,150 going to decide to automatically rebuild our image and then update the associated deployment. 59 00:04:15,150 --> 00:04:21,000 So as soon as I ran that command you'll see that scaffold detected the change it decided to rebuild 60 00:04:21,000 --> 00:04:29,400 the image after the image was built scaffold then updated our deployments and we can now see the updated 61 00:04:30,210 --> 00:04:30,980 right here. 62 00:04:31,000 --> 00:04:34,990 Now naturally the port itself is emitting the exact same logs as before. 63 00:04:35,040 --> 00:04:40,720 We did not make a change to the actual log in information but the thing definitely did restart. 64 00:04:40,780 --> 00:04:45,960 Now we should have expressed a validator instead of our project so to use it I'm gonna go backwards 65 00:04:45,990 --> 00:04:50,280 my sign up dot t yes file at the very top. 66 00:04:50,370 --> 00:04:59,300 We are going to import body from Express dash validator there's a couple of different ways to use Express 67 00:04:59,300 --> 00:05:00,140 validator. 68 00:05:00,140 --> 00:05:02,210 We're going to be using this body thing. 69 00:05:02,210 --> 00:05:05,830 This is a function that's going to check the body of the incoming request. 70 00:05:05,840 --> 00:05:10,820 We can also use Express validator to explicitly check for say parameters like let's say if we had an 71 00:05:10,820 --> 00:05:15,590 I.D. parameter on here for some reason we could use Express validate or to do some validation around 72 00:05:15,590 --> 00:05:17,180 that I.D. parameter. 73 00:05:17,180 --> 00:05:20,270 It can also handle validation of query strings as well. 74 00:05:20,380 --> 00:05:23,720 But in this case we don't want to do a validation of parameters or query strings. 75 00:05:23,810 --> 00:05:30,500 We want to do a validation of the body of the request to make use this body thing. 76 00:05:30,500 --> 00:05:32,930 We're going to apply it as a middleware. 77 00:05:32,930 --> 00:05:40,470 So right before our callback function right there I'm going to add in a coma or then put in an array 78 00:05:41,890 --> 00:05:45,340 and we're gonna list out our validation steps inside of disarray 79 00:05:48,270 --> 00:05:53,760 so I'm gonna put inside of your body look for the proper email property. 80 00:05:53,760 --> 00:05:57,810 So this means in the body the incoming requests look for the email property. 81 00:05:57,810 --> 00:06:04,380 We're then going to chain on a couple of checks to run on that property a chain on dot is email. 82 00:06:04,410 --> 00:06:10,140 This is a validation function that's built directly into express validator or technically a dependent 83 00:06:10,140 --> 00:06:10,890 package of it. 84 00:06:10,950 --> 00:06:14,530 This can make sure that this email thing has the structure of an email. 85 00:06:14,940 --> 00:06:19,230 We can then optionally me append on a error message. 86 00:06:19,230 --> 00:06:25,230 If there is something wrong with the email property we can do that by writing out dot with message and 87 00:06:25,230 --> 00:06:29,220 we could say something like email must be valid. 88 00:06:29,260 --> 00:06:34,360 Now if anything is wrong with this email if it doesn't have the structure of an email or no email is 89 00:06:34,360 --> 00:06:39,460 provided at all then we're going to automatically give ourselves or produce some kind of error message 90 00:06:39,490 --> 00:06:44,110 that's going to say email must be provided and it'll be up to you and I to figure out how to send that 91 00:06:44,110 --> 00:06:49,860 back over to the user so we can do the same thing for the password that we expect to receive in this 92 00:06:49,860 --> 00:06:53,310 thing as well just as a reminder we expect to receive an email and a password 93 00:06:56,160 --> 00:07:04,580 they'll do a body password and then for this we will do a trim that is a sanitization step that's going 94 00:07:04,580 --> 00:07:10,190 to make sure that there are no leading or trailing spaces on the password all then make sure that the 95 00:07:10,250 --> 00:07:19,730 length of this thing is at least four and at most 20 and then I'll attach a message in case the password 96 00:07:19,730 --> 00:07:25,850 is not present or doesn't have that supplied length we'll say something like password must be between 97 00:07:25,910 --> 00:07:28,070 four and 20 characters 98 00:07:31,640 --> 00:07:32,030 and that's it. 99 00:07:32,060 --> 00:07:33,870 That's how we add in some validation. 100 00:07:33,950 --> 00:07:39,180 Well almost how he added in stuff do when that subtle step you'll notice that as soon as I added in 101 00:07:39,180 --> 00:07:43,770 that array for these two Middleware is by the way we got some errors coming out of Iraq and raised right 102 00:07:43,770 --> 00:07:44,850 here. 103 00:07:44,850 --> 00:07:49,110 So typescript is getting a little bit angry as telling us that it doesn't know what the type of wreck 104 00:07:49,110 --> 00:07:55,850 is or rez we could pick that up by adding in some type annotations to those two arguments to do so I'll 105 00:07:55,850 --> 00:07:56,870 go back up to the top. 106 00:07:56,910 --> 00:08:04,020 I going to find where we import Express and I'm going to import in these types of requests and response 107 00:08:04,860 --> 00:08:10,380 and then I will annotate Rick and rez with those two types that will say req is going to be up type 108 00:08:10,820 --> 00:08:18,210 requests and rez will be of type response and then those errors go away OK. 109 00:08:18,240 --> 00:08:23,430 Well we definitely added in some code right here to make sure that the user is providing email and a 110 00:08:23,430 --> 00:08:28,170 password but at no point time do you appear to actually be consuming this information. 111 00:08:28,200 --> 00:08:32,940 In other words we never seem to take any actual errors that might be coming out this validation step 112 00:08:33,290 --> 00:08:35,020 in sending the back to the user. 113 00:08:35,220 --> 00:08:37,080 So let's figure out how we do that in the next video.