1 00:00:00,170 --> 00:00:02,990 So now we want to do our register functionality. 2 00:00:02,990 --> 00:00:07,160 So the first step is in our users API slice. 3 00:00:07,190 --> 00:00:09,470 We're going to create a register mutation. 4 00:00:09,470 --> 00:00:12,710 I'm going to put this right under the login and above the logout. 5 00:00:12,710 --> 00:00:14,810 So let's say register. 6 00:00:15,960 --> 00:00:19,020 And we'll set that to a mutation. 7 00:00:20,350 --> 00:00:27,130 And it's going to be a query and the URL is going to go to our endpoint slash register and it's going 8 00:00:27,130 --> 00:00:31,960 to be a post request and we're going to send the data that's in the body. 9 00:00:32,259 --> 00:00:32,680 Okay. 10 00:00:32,710 --> 00:00:34,810 Then we can close that up. 11 00:00:36,270 --> 00:00:38,070 And yeah, that should do it Now. 12 00:00:38,070 --> 00:00:39,450 We do want to export this. 13 00:00:39,450 --> 00:00:44,130 So down here, use register mutation. 14 00:00:45,150 --> 00:00:46,110 Save that. 15 00:00:46,140 --> 00:00:49,320 Now we don't have the screen, so we're going to have to create that. 16 00:00:49,320 --> 00:00:53,880 So let's go to screens and screens. 17 00:00:54,880 --> 00:00:58,180 And I guess what we could do is just. 18 00:01:00,200 --> 00:01:02,480 We could just copy the login screen. 19 00:01:03,400 --> 00:01:09,910 And then let's rename that to register screen because it is very similar. 20 00:01:10,510 --> 00:01:14,440 But we're going to have to just change and add a couple things. 21 00:01:14,440 --> 00:01:20,680 So first of all, let's change the name instead of login screen here and at the bottom, change it to 22 00:01:20,680 --> 00:01:23,050 register screen. 23 00:01:23,680 --> 00:01:25,720 And for the state. 24 00:01:25,720 --> 00:01:29,560 In addition to email and password, we're going to have the name. 25 00:01:29,560 --> 00:01:31,720 So let's do right here. 26 00:01:31,720 --> 00:01:33,160 We'll say name. 27 00:01:34,180 --> 00:01:35,920 And that will be set name. 28 00:01:35,920 --> 00:01:38,890 And then I'm also going to have a password confirmation. 29 00:01:38,890 --> 00:01:42,550 So let's copy that down and we'll call this. 30 00:01:43,300 --> 00:01:47,890 Let's say, confirm password and then set. 31 00:01:49,170 --> 00:01:51,030 Confirm password. 32 00:01:52,690 --> 00:01:53,110 All right. 33 00:01:53,110 --> 00:01:54,070 And then. 34 00:01:54,950 --> 00:01:57,290 What else do we want to do here? 35 00:01:57,500 --> 00:02:04,400 Instead of the login mutation, we're going to bring in use register mutation. 36 00:02:06,510 --> 00:02:11,880 And then as far as, let's see the set credentials, we're still going to set the credentials because 37 00:02:11,880 --> 00:02:15,890 remember, when we register, we want them to be logged in after. 38 00:02:15,900 --> 00:02:18,690 So we took care of that on the back end. 39 00:02:18,690 --> 00:02:21,870 It'll register and it will set the Http only cookie. 40 00:02:21,900 --> 00:02:26,850 We also want to call set credentials from here once they're registered. 41 00:02:27,690 --> 00:02:29,370 Um, what else do we want? 42 00:02:29,460 --> 00:02:32,700 I think that's pretty much it as far as imports. 43 00:02:32,730 --> 00:02:34,740 Now let's go down here and let's. 44 00:02:38,040 --> 00:02:39,650 Let's see. 45 00:02:39,660 --> 00:02:41,490 Let's get rid of. 46 00:02:42,470 --> 00:02:47,780 So instead of the use login mutation, I just want to make it so we don't get any errors so we can actually 47 00:02:47,780 --> 00:02:48,950 show the page. 48 00:02:48,950 --> 00:02:55,220 So use register mutation and instead of login, we're going to change that to register. 49 00:02:56,540 --> 00:02:56,960 Right. 50 00:02:56,960 --> 00:03:03,470 And then let's see, we're going to do the same thing here where we get the redirect and then in the 51 00:03:03,470 --> 00:03:06,260 use effect, we're going to check for user info. 52 00:03:06,800 --> 00:03:08,450 And then navigate. 53 00:03:09,270 --> 00:03:16,110 To redirect if they are logged in and then in the submit handler instead of calling. 54 00:03:17,410 --> 00:03:22,900 Let's see, instead of calling log in, we're going to want to call register and we're also going to 55 00:03:22,900 --> 00:03:24,430 want to pass the name in. 56 00:03:24,430 --> 00:03:25,930 So let's say name. 57 00:03:27,730 --> 00:03:31,570 And we also want to check to make sure that the passwords match. 58 00:03:31,570 --> 00:03:33,100 So what I'll do is. 59 00:03:35,000 --> 00:03:36,310 I guess. 60 00:03:36,310 --> 00:03:39,040 I guess we could put it above the trycatch. 61 00:03:40,040 --> 00:03:47,060 And just say, if they don't match, then let's do a toast. 62 00:03:47,270 --> 00:03:49,580 So we'll just say passwords don't match. 63 00:03:49,610 --> 00:03:55,070 Else then we'll put this whole try catch inside of that else. 64 00:03:58,720 --> 00:03:59,110 Okay. 65 00:03:59,110 --> 00:04:00,300 And they're going to register. 66 00:04:00,310 --> 00:04:03,280 Then we're going to dispatch set credentials. 67 00:04:03,280 --> 00:04:04,630 That's going to be the same. 68 00:04:04,630 --> 00:04:05,530 That's the same. 69 00:04:05,530 --> 00:04:07,720 This is all going to be the same as well. 70 00:04:08,260 --> 00:04:08,710 All right. 71 00:04:08,710 --> 00:04:11,800 And let's change h one sign up now. 72 00:04:11,800 --> 00:04:15,670 We have some more stuff to change down here, but I just want to create the route for now. 73 00:04:15,670 --> 00:04:22,480 So let's save what we have and let's go to our index.js in the front end and let's bring down that and 74 00:04:22,480 --> 00:04:24,580 change this to register. 75 00:04:29,090 --> 00:04:33,410 Change that to register and then let's add that. 76 00:04:34,910 --> 00:04:35,920 Here. 77 00:04:36,320 --> 00:04:36,650 All right. 78 00:04:36,650 --> 00:04:38,830 So let's see if the route works. 79 00:04:38,840 --> 00:04:41,900 So if we go to sign in and then we click register. 80 00:04:41,900 --> 00:04:42,230 Yep. 81 00:04:42,230 --> 00:04:43,910 You can see we get sign up. 82 00:04:45,080 --> 00:04:50,720 So we know the page works and all of this other stuff should be all set as far as submitting, but we 83 00:04:50,720 --> 00:04:52,970 just need to change the form up a little bit. 84 00:04:53,790 --> 00:04:54,990 So let's. 85 00:04:56,040 --> 00:05:03,360 We have our email address which can stay, but let's copy this form group and let's go above it because 86 00:05:03,360 --> 00:05:05,010 we need to add the name. 87 00:05:05,250 --> 00:05:10,680 So we'll paste that in and then let's change the control ID to name. 88 00:05:11,130 --> 00:05:13,140 We'll change the label here. 89 00:05:13,880 --> 00:05:16,010 To name the type. 90 00:05:16,010 --> 00:05:18,140 We're going to change that to text. 91 00:05:19,190 --> 00:05:21,530 Placeholder will say Enter name. 92 00:05:22,310 --> 00:05:26,390 Value is going to be named from our component state and then set name. 93 00:05:29,140 --> 00:05:29,680 Okay. 94 00:05:29,680 --> 00:05:33,220 So if I save that and we take a look, we now have a name field. 95 00:05:33,780 --> 00:05:37,200 Now, we want to also do the confirm password. 96 00:05:37,200 --> 00:05:41,490 So let's come down here and let's copy the form group for password. 97 00:05:43,910 --> 00:05:46,460 And let's see. 98 00:05:46,460 --> 00:05:47,960 We're going to call. 99 00:05:48,810 --> 00:05:59,610 Control ID, let's say confirm password and here in the label confirm password type is going to be password 100 00:05:59,970 --> 00:06:00,660 here. 101 00:06:00,660 --> 00:06:02,580 We'll say confirm. 102 00:06:03,560 --> 00:06:06,770 Value is going to be confirm. 103 00:06:07,920 --> 00:06:09,390 And set. 104 00:06:11,400 --> 00:06:13,080 Confirm password. 105 00:06:14,480 --> 00:06:14,750 Okay. 106 00:06:14,750 --> 00:06:16,670 So now we have that as well. 107 00:06:17,770 --> 00:06:20,380 And let's see for the button. 108 00:06:24,610 --> 00:06:25,510 That should be. 109 00:06:26,290 --> 00:06:27,280 That should be fine. 110 00:06:27,280 --> 00:06:28,480 We just want to change this. 111 00:06:28,480 --> 00:06:29,950 Let's say register. 112 00:06:31,350 --> 00:06:32,540 Now for the link. 113 00:06:32,550 --> 00:06:35,550 This is going to be different because now we're on the register page. 114 00:06:35,550 --> 00:06:39,090 So instead of saying new customer, let's say. 115 00:06:40,260 --> 00:06:40,650 Um. 116 00:06:42,470 --> 00:06:43,520 Already. 117 00:06:45,800 --> 00:06:47,720 Have an account. 118 00:06:49,250 --> 00:06:55,430 And then that's going to go to instead of slash register, that's going to be slash login. 119 00:06:56,330 --> 00:07:00,770 And then this is going to be instead of register, that will also be log in. 120 00:07:01,560 --> 00:07:02,790 And this as well. 121 00:07:04,300 --> 00:07:04,690 All right. 122 00:07:04,690 --> 00:07:06,080 So let's check that out. 123 00:07:06,100 --> 00:07:06,400 Okay. 124 00:07:06,400 --> 00:07:09,920 So now we can go back and forth from the register to log in. 125 00:07:09,940 --> 00:07:12,440 Now let's try to register a user. 126 00:07:12,460 --> 00:07:21,340 So for name, I'll say let's say Steve Rogers and email address Steve at email. 127 00:07:22,190 --> 00:07:23,480 Password. 128 00:07:26,150 --> 00:07:27,710 And register. 129 00:07:28,530 --> 00:07:31,360 Not found API slash user slash. 130 00:07:31,380 --> 00:07:32,760 Oh, you know what? 131 00:07:32,970 --> 00:07:36,810 I know what the issue is in our users API slice. 132 00:07:38,870 --> 00:07:39,710 To register. 133 00:07:39,710 --> 00:07:44,300 We make a post request just to API slash users, not slash register. 134 00:07:44,300 --> 00:07:45,980 So we just want to get rid of that. 135 00:07:47,960 --> 00:07:49,670 All right, so let's try that again. 136 00:07:50,410 --> 00:07:52,060 Let's reload the page. 137 00:07:52,090 --> 00:07:53,320 Try that again. 138 00:08:03,750 --> 00:08:04,440 And there we go. 139 00:08:04,440 --> 00:08:07,830 So you can see I'm now logged in as Steve Rogers. 140 00:08:09,290 --> 00:08:09,620 Okay. 141 00:08:09,620 --> 00:08:15,980 So, I mean, it does the same exact thing as the authentication, except it creates the new user and 142 00:08:15,980 --> 00:08:18,770 I can log out and that's that. 143 00:08:19,310 --> 00:08:23,460 So now our full stack authentication is all set. 144 00:08:23,480 --> 00:08:28,460 So in the next section, what we're going to do is continue on with our cart process, right? 145 00:08:28,460 --> 00:08:32,090 Because now if I proceed to checkout, it'll ask me to sign in. 146 00:08:32,210 --> 00:08:34,039 I'll sign in as. 147 00:08:35,720 --> 00:08:36,640 Let's just do John. 148 00:08:36,650 --> 00:08:37,640 Actually, we'll do the. 149 00:08:37,640 --> 00:08:40,130 The person we just registered. 150 00:08:44,140 --> 00:08:48,680 Click and you'll see it takes me right to shipping because of that redirect. 151 00:08:48,700 --> 00:08:53,140 So now we need to just continue on with the process and continue with shipping.