1 00:00:02,000 --> 00:00:04,000 So, let's now connect the front end 2 00:00:04,000 --> 00:00:06,000 to the back end by sending a request 3 00:00:06,000 --> 00:00:09,000 to this Change Password API route. 4 00:00:09,000 --> 00:00:13,000 For this, we got this user profile component 5 00:00:13,000 --> 00:00:15,000 and there the profile form component, 6 00:00:15,000 --> 00:00:19,000 which is responsible for rendering this form, 7 00:00:19,000 --> 00:00:20,000 and it's here where I now 8 00:00:20,000 --> 00:00:22,000 wanna handle the forum submission, 9 00:00:22,000 --> 00:00:27,000 extract the entered values, and then send the HTTP request 10 00:00:27,000 --> 00:00:31,000 or send that extracted data to the parent component. 11 00:00:31,000 --> 00:00:33,000 So to the user profile component, 12 00:00:33,000 --> 00:00:36,000 and then they are send the HTTP requests 13 00:00:36,000 --> 00:00:39,000 depending on where we wanna do that. 14 00:00:39,000 --> 00:00:41,000 So let's start with handling form submission 15 00:00:41,000 --> 00:00:43,000 and getting the entered data, 16 00:00:43,000 --> 00:00:46,000 for this we can add a new function here in the profile form 17 00:00:46,000 --> 00:00:51,000 component, the Submit handler, or however you wanna call it 18 00:00:51,000 --> 00:00:53,000 there we get to the event object 19 00:00:53,000 --> 00:00:58,000 and we can call event prevent default to prevent the browser 20 00:00:58,000 --> 00:01:01,000 default of sending a request automatically 21 00:01:01,000 --> 00:01:02,000 which we don't want. 22 00:01:02,000 --> 00:01:04,000 We wanna control that with JavaScript 23 00:01:04,000 --> 00:01:06,000 and send our own request. 24 00:01:06,000 --> 00:01:08,000 And then we can point 25 00:01:08,000 --> 00:01:13,000 at this submit handler on the, on submit prop on the forum. 26 00:01:14,000 --> 00:01:16,000 That is step number one. 27 00:01:16,000 --> 00:01:18,000 Now for extracting the entered values 28 00:01:18,000 --> 00:01:20,000 we could use use state and listen to changes 29 00:01:20,000 --> 00:01:23,000 on these inputs with every keystroke 30 00:01:23,000 --> 00:01:26,000 with the on change event. 31 00:01:26,000 --> 00:01:28,000 Or we use refs to extract the values 32 00:01:28,000 --> 00:01:30,000 right when we need them. 33 00:01:30,000 --> 00:01:32,000 And I'll do that ladder approach 34 00:01:32,000 --> 00:01:34,000 I'll use that ladder approach. 35 00:01:34,000 --> 00:01:36,000 Hence I'll call use ref here. 36 00:01:36,000 --> 00:01:40,000 And of course, import use ref from react. 37 00:01:40,000 --> 00:01:42,000 To set up a reference 38 00:01:42,000 --> 00:01:47,000 and create a old password ref here 39 00:01:47,000 --> 00:01:49,000 and then duplicate this to also create 40 00:01:49,000 --> 00:01:52,000 a new password to ref. 41 00:01:52,000 --> 00:01:55,000 And now we need to connect these refs to the inputs. 42 00:01:55,000 --> 00:01:57,000 So here with the ref Prop 43 00:01:57,000 --> 00:02:02,000 we connect the new password field to the new password ref 44 00:02:02,000 --> 00:02:05,000 and the old password field to the old password ref. 45 00:02:07,000 --> 00:02:07,000 And now we can use these refs 46 00:02:07,000 --> 00:02:11,000 and submit handler to get the entered values. 47 00:02:11,000 --> 00:02:15,000 So the entered old password can be extracted 48 00:02:15,000 --> 00:02:20,000 by using the old password ref then dot current 49 00:02:20,000 --> 00:02:22,000 as we always do, unwrap stored value 50 00:02:22,000 --> 00:02:27,000 and the same for the entered new password 51 00:02:28,000 --> 00:02:33,000 here we use the new password ref and get the value. 52 00:02:34,000 --> 00:02:36,000 Now we could add validation here. 53 00:02:36,000 --> 00:02:38,000 So we could check if the values are valid. 54 00:02:38,000 --> 00:02:41,000 So that is something we can do here, 55 00:02:42,000 --> 00:02:45,000 but just as before I'll not do it here 56 00:02:45,000 --> 00:02:46,000 because we, in the end 57 00:02:46,000 --> 00:02:49,000 don't proceed on the service side anyways 58 00:02:49,000 --> 00:02:51,000 if the input is wrong and I wanna focus 59 00:02:51,000 --> 00:02:56,000 on that authentication and service side part here. 60 00:02:56,000 --> 00:02:59,000 So I will just assume that the entered inputs are correct, 61 00:02:59,000 --> 00:03:00,000 and with that assumption 62 00:03:00,000 --> 00:03:04,000 we now can send the HTTP request or pass that data 63 00:03:04,000 --> 00:03:09,000 to a parent component, which then sends the HTTP request. 64 00:03:09,000 --> 00:03:10,000 It's up to you, what you wanna do. 65 00:03:10,000 --> 00:03:13,000 I will go for the parent component here 66 00:03:13,000 --> 00:03:16,000 and they offer in the profile form component function. 67 00:03:16,000 --> 00:03:19,000 I'll accept this props argument. 68 00:03:20,000 --> 00:03:23,000 And then here call, let's say a function which we get 69 00:03:23,000 --> 00:03:28,000 on the on Change Password Prop. 70 00:03:28,000 --> 00:03:30,000 The prop name is of course 71 00:03:30,000 --> 00:03:32,000 up to you since it's your component. 72 00:03:32,000 --> 00:03:35,000 And as a argument to dysfunction 73 00:03:35,000 --> 00:03:37,000 which I expect to get on this prop 74 00:03:37,000 --> 00:03:41,000 I pass an object with the old password, which is set equal 75 00:03:41,000 --> 00:03:44,000 to the entered old password and the new password 76 00:03:44,000 --> 00:03:48,000 which all set equal to the entered new password. 77 00:03:49,000 --> 00:03:51,000 Now we just need to make sure 78 00:03:51,000 --> 00:03:54,000 that we set such a on Change Password Prop 79 00:03:54,000 --> 00:03:56,000 on the profile form component when we use it. 80 00:03:56,000 --> 00:03:58,000 And that is something we do 81 00:03:58,000 --> 00:04:00,000 in the user profile component 82 00:04:00,000 --> 00:04:02,000 here we use the profile form component 83 00:04:02,000 --> 00:04:06,000 here We add the on Change Password Prop 84 00:04:06,000 --> 00:04:09,000 and then point out a function which will be passed 85 00:04:09,000 --> 00:04:12,000 into the profile form through that prop. 86 00:04:13,000 --> 00:04:15,000 So here we can add the let's say 87 00:04:15,000 --> 00:04:18,000 Change Password handler function 88 00:04:18,000 --> 00:04:23,000 and pass this as a value into profile form. 89 00:04:24,000 --> 00:04:27,000 And here we get the password data. 90 00:04:27,000 --> 00:04:32,000 So there's object with the old and new password. 91 00:04:32,000 --> 00:04:33,000 We get that here. 92 00:04:33,000 --> 00:04:38,000 And then in here, we can send this HTTP request 93 00:04:38,000 --> 00:04:41,000 and we do this with the fetch function again. 94 00:04:41,000 --> 00:04:46,000 And the URL is slash API slash user 95 00:04:47,000 --> 00:04:48,000 to target this user folder 96 00:04:48,000 --> 00:04:53,000 in the API folder slash changed dash password 97 00:04:53,000 --> 00:04:56,000 to target this change password file. 98 00:04:56,000 --> 00:04:58,000 Now we need to configure this request 99 00:04:58,000 --> 00:05:00,000 with this second argument. 100 00:05:00,000 --> 00:05:03,000 And for example, change the request method. 101 00:05:03,000 --> 00:05:07,000 Here we expect to get a patch request. 102 00:05:07,000 --> 00:05:09,000 Otherwise we don't continue. 103 00:05:09,000 --> 00:05:11,000 And hence, when we sent this request 104 00:05:11,000 --> 00:05:14,000 we need to set the method here to patch. 105 00:05:15,000 --> 00:05:17,000 Then we wanna add a body. 106 00:05:17,000 --> 00:05:21,000 So data to that request in JSON format 107 00:05:21,000 --> 00:05:24,000 And you're all just forward my password data 108 00:05:24,000 --> 00:05:25,000 which is this object 109 00:05:25,000 --> 00:05:29,000 with an old password and new password field. 110 00:05:29,000 --> 00:05:32,000 And you have to make sure that you have old password 111 00:05:32,000 --> 00:05:35,000 and new password written like this in his object. 112 00:05:35,000 --> 00:05:37,000 So did you use these property names 113 00:05:37,000 --> 00:05:40,000 because it's old password and new password 114 00:05:40,000 --> 00:05:42,000 which I try to extract 115 00:05:42,000 --> 00:05:45,000 in my API route on that incoming body. 116 00:05:45,000 --> 00:05:48,000 So if you picked different names here in this object 117 00:05:48,000 --> 00:05:51,000 which you create in the profile form component 118 00:05:51,000 --> 00:05:55,000 then you need to extract that same, these same names 119 00:05:55,000 --> 00:05:57,000 in the API route . 120 00:05:57,000 --> 00:05:59,000 Here, I'm using equal names everywhere 121 00:05:59,000 --> 00:06:01,000 and they offer this should work 122 00:06:02,000 --> 00:06:04,000 now last but not least 123 00:06:04,000 --> 00:06:05,000 I'll add my headers here 124 00:06:05,000 --> 00:06:10,000 and set the content type to application JSON, 125 00:06:10,000 --> 00:06:13,000 to make it clear that this request carries JSON data. 126 00:06:15,000 --> 00:06:19,000 Now that returns a promise and to use sync await all 127 00:06:19,000 --> 00:06:21,000 turn this into an sync function 128 00:06:21,000 --> 00:06:24,000 and await this and get my response here. 129 00:06:26,000 --> 00:06:31,000 And then here, I will simply get my response data 130 00:06:31,000 --> 00:06:33,000 by a waiting response thought, JSON 131 00:06:33,000 --> 00:06:37,000 and then I'll just log that data here. 132 00:06:37,000 --> 00:06:39,000 And of course we typically want to give the user 133 00:06:39,000 --> 00:06:41,000 more feedback. 134 00:06:41,000 --> 00:06:44,000 Logging to the console is not something we wanna do 135 00:06:44,000 --> 00:06:45,000 because the user will and see this. 136 00:06:45,000 --> 00:06:46,000 But this is only for us 137 00:06:46,000 --> 00:06:49,000 as a developer here to check whether it works. 138 00:06:50,000 --> 00:06:54,000 So now, if we save all of that, this should work. 139 00:06:54,000 --> 00:06:58,000 And if we now go to this profile page and reload it 140 00:06:58,000 --> 00:06:59,000 if I open the developer tools, 141 00:06:59,000 --> 00:07:01,000 we can test this now. 142 00:07:01,000 --> 00:07:03,000 For this, I'll enter a new password 143 00:07:03,000 --> 00:07:07,000 and I'll start by entering an incorrect old password. 144 00:07:07,000 --> 00:07:09,000 If I now click on change password 145 00:07:09,000 --> 00:07:14,000 I get a four Oh three error, which says invalid password 146 00:07:15,000 --> 00:07:15,000 which makes sense 147 00:07:15,000 --> 00:07:18,000 because I entered an incorrect old password. 148 00:07:19,000 --> 00:07:21,000 Now I wanna try the correct old password. 149 00:07:21,000 --> 00:07:24,000 But before I do that, let's go to MongoDB Atlas 150 00:07:24,000 --> 00:07:29,000 and find those documents here, again, to update this. 151 00:07:30,000 --> 00:07:33,000 And let's try to memorize this string 152 00:07:33,000 --> 00:07:34,000 of course not the entire string 153 00:07:34,000 --> 00:07:37,000 but we see that it starts with this strange part 154 00:07:37,000 --> 00:07:39,000 has a dot then lower case C K 155 00:07:39,000 --> 00:07:44,000 uppercase AP ends with w eight, 156 00:07:44,000 --> 00:07:47,000 these are things we can memorize. 157 00:07:47,000 --> 00:07:48,000 And if everything works 158 00:07:48,000 --> 00:07:52,000 now that I update the password with a correct old password 159 00:07:52,000 --> 00:07:54,000 this string should change now because we override 160 00:07:54,000 --> 00:07:59,000 that existing password with a new hashed password. 161 00:08:00,000 --> 00:08:01,000 So for now click Change Password 162 00:08:01,000 --> 00:08:04,000 with the correct old password 163 00:08:04,000 --> 00:08:07,000 I get back password updated, which looks good. 164 00:08:09,000 --> 00:08:10,000 And if I now find documents again here, 165 00:08:10,000 --> 00:08:15,000 indeed that is a new hash password. 166 00:08:15,000 --> 00:08:19,000 And if I now log out here and I try to log in again 167 00:08:19,000 --> 00:08:23,000 with the old password, that should fail 168 00:08:23,000 --> 00:08:25,000 and it looks like it does because I'm not redirected. 169 00:08:25,000 --> 00:08:30,000 If I would still be logging my, my data here, we should see 170 00:08:32,000 --> 00:08:36,000 that we have an error there, but I'm not logging it anymore. 171 00:08:36,000 --> 00:08:38,000 We're not handling this case that it fails. 172 00:08:38,000 --> 00:08:40,000 Hence we get no feedback on the UI 173 00:08:40,000 --> 00:08:42,000 but we clearly are not locked 174 00:08:42,000 --> 00:08:44,000 in because we're not redirected. 175 00:08:44,000 --> 00:08:47,000 But if I now try the correct new password 176 00:08:47,000 --> 00:08:49,000 and I click log in, now I am redirected. 177 00:08:49,000 --> 00:08:52,000 So now logging indeed work 178 00:08:52,000 --> 00:08:54,000 and I can then navigate around 179 00:08:54,000 --> 00:08:57,000 as I did before reload this page. 180 00:08:57,000 --> 00:08:58,000 And that all works. 181 00:08:58,000 --> 00:09:00,000 And that's now how we can also work 182 00:09:00,000 --> 00:09:03,000 with our protected API route 183 00:09:03,000 --> 00:09:05,000 which also requires authentication 184 00:09:05,000 --> 00:09:08,000 but which now checks authentication 185 00:09:08,000 --> 00:09:11,000 on the server site instead of on the client side 186 00:09:11,000 --> 00:09:14,000 or for the client side pages as we did it before.