WEBVTT 00:00.000 --> 00:05.190 Okay, now let's take a look at how we can do something after we've logged in. 00:05.190 --> 00:11.820 And our goal really is to persist our login so that we get our user info in the navbar at the top, 00:11.820 --> 00:15.360 and we redirect the user after they have logged in. 00:15.360 --> 00:21.630 And in order to persist our user, we need to really query the endpoint we created for the user info 00:21.630 --> 00:22.590 in our API. 00:22.620 --> 00:27.120 Because our login doesn't give us anything back about the user, we know we cannot access the cookie 00:27.150 --> 00:32.850 from our code, so the only way we can get the details about the user is by making a request after they 00:32.850 --> 00:35.040 have logged in to go and get that information. 00:35.040 --> 00:40.440 Also, when our app starts up, then we need to effectively go out and get that data as well. 00:40.440 --> 00:47.190 Now, in order to do this, let's go back to our account API and in our login method. 00:47.190 --> 00:50.220 Then we're going to need to do something after we have logged in. 00:50.220 --> 00:57.240 And also we need to make use of our user or user info query here as well. 00:57.240 --> 01:01.110 So first of all, let's just export the hook that we get from this. 01:01.140 --> 01:06.590 We haven't done so yet, so we'll use the Use user info query. 01:06.620 --> 01:11.120 We'll also export that one and we'll make use of this in our navbar. 01:11.120 --> 01:12.350 So let's head up to our navbar. 01:12.380 --> 01:16.190 Let's come up to the top here and where I've hardcoded user in. 01:16.190 --> 01:23.930 Let's remove that and we'll specify const and we'll use the equal use user info query. 01:23.930 --> 01:28.070 And from here we'll specify data and we'll just call it user. 01:28.070 --> 01:30.500 So we don't need to change any of our other code. 01:30.530 --> 01:34.760 So when we effectively refresh our page our navbar is going to load. 01:34.760 --> 01:36.740 And it's going to use this query. 01:36.860 --> 01:42.530 If we have a cookie in our browser then that's going to go out and get our user info. 01:42.530 --> 01:47.300 If we take a look at what's going to happen right now and I'll click on the network tab, I just clear 01:47.330 --> 01:49.310 this and I refresh the page. 01:49.520 --> 01:53.600 Then because our navbar is always loaded, then it calls that user info. 01:53.600 --> 01:57.260 But this gives us a 204 because I do not have a cookie in my browser. 01:57.260 --> 02:03.500 At this point I logged out and I cleared this, so that's fine when we refresh our page. 02:03.500 --> 02:04.640 But what about when we log in? 02:04.640 --> 02:10.130 We need to call that user info query after we've logged in as well, so that we can effectively update 02:10.130 --> 02:11.090 our navbar here. 02:11.090 --> 02:13.850 So back to VS code, back to the account API. 02:13.850 --> 02:22.550 And when we do execute our login method then we effectively also want to query or call this user info 02:22.550 --> 02:23.270 endpoint. 02:23.270 --> 02:30.650 And we can do that by invalidating our user info cache that RTK query is taken care of. 02:30.680 --> 02:37.460 So after we log in, we invalidate the cache and that will force it to go out to our user info endpoint 02:37.460 --> 02:41.300 and get the latest updated user info from our API. 02:41.300 --> 02:45.440 So let's implement that and we'll come up to the top here. 02:45.440 --> 02:48.950 And we're going to specify some tag types. 02:48.950 --> 02:52.550 And we're going to have a tag type for user info. 02:53.630 --> 02:55.610 And I'll add a comma after that. 02:55.610 --> 02:58.670 And we need to come down to our user info endpoint. 02:58.670 --> 03:06.650 And just below the query here we're going to specify provides Tanks and in square brackets, we're going 03:06.680 --> 03:08.990 to use our Userinfo tag. 03:09.050 --> 03:14.750 And then in our login method below the query here we'll use async. 03:14.750 --> 03:17.270 And on query started. 03:17.270 --> 03:18.590 We've used this before. 03:18.590 --> 03:23.390 And in the parentheses here we can supply some arguments if we need to. 03:23.420 --> 03:25.670 We do not need to in this instance. 03:25.670 --> 03:35.210 And then in curly brackets we'll get access to the dispatch and the query fulfilled functions and add 03:35.210 --> 03:39.230 the arrow and open curly brackets. 03:39.230 --> 03:42.980 And then we'll use a try catch block inside here. 03:43.010 --> 03:46.730 If we do get an error we're just going to console dot log any error. 03:46.730 --> 03:51.710 And inside the try we'll just say await and query fulfilled. 03:53.600 --> 03:56.090 And we'll then use the dispatch. 03:56.360 --> 04:00.020 And we'll use our account API dot util. 04:00.200 --> 04:04.280 And we'll invalidate tags and in parentheses. 04:04.280 --> 04:08.840 Then in square brackets will invalidate the user info tag. 04:09.500 --> 04:14.540 Unlike I say, after we log in, that's going to force it to go out to our user info endpoint and get 04:14.540 --> 04:22.070 the data back, which will then populate the user inside our cache effectively for the user info, which 04:22.070 --> 04:23.870 we then display on a navbar. 04:23.900 --> 04:25.520 So that's the system. 04:25.520 --> 04:30.470 And let's head over to our login form and we'll make use of this system. 04:30.470 --> 04:31.640 Or do we need to do anything here. 04:31.640 --> 04:34.760 We've got our await login going on there. 04:35.420 --> 04:39.830 And let's also redirect the user after the login has taken place. 04:39.830 --> 04:43.700 And to do that we're going to bring in a hook from React Router. 04:43.700 --> 04:55.640 So I'll specify const and navigate equals and we'll use the U navigate hook we get from React Router 04:55.640 --> 04:56.450 Dom. 04:56.450 --> 05:00.770 And then after we have logged in we can then navigate. 05:01.340 --> 05:05.240 And we'll just specify a forward slash catalog for the time being. 05:07.010 --> 05:16.430 And if we go take a look at our progress and let's just move this down and I'll just refresh the page 05:16.430 --> 05:17.750 as well, just in case. 05:17.750 --> 05:27.860 And in the email I'll specify Bob at test.com and the password, and notice that the menu has gone away 05:27.860 --> 05:29.930 and replaced with our login and register links. 05:29.930 --> 05:36.410 And if I click sign in then what should happen is we get redirected, we make our request to the API. 05:36.440 --> 05:40.190 We can see Bob at Test.com inside here as well. 05:40.730 --> 05:42.410 And that's good. 05:42.410 --> 05:43.880 That's what we're looking for. 05:43.880 --> 05:46.130 But does our logout functionality work. 05:46.130 --> 05:49.910 And in fact, what do you think is going to happen when we click the logout button now. 05:49.910 --> 05:51.920 Well we're going to clear our cookie for sure. 05:51.920 --> 05:57.080 But what's going to happen with our user info is that automatically going to do anything. 05:57.080 --> 05:58.040 Well let's give it a go. 05:58.040 --> 06:01.640 And if I click on logout we'll see the request going up to the API. 06:01.670 --> 06:06.440 Our cookies certainly has been removed, but our menu is still in place on the top right there. 06:07.040 --> 06:07.910 Why is that. 06:07.910 --> 06:16.040 Well, we didn't do anything when we did log out to update our RQ query cache, so that's still available. 06:16.070 --> 06:20.240 And if I refresh the the browser then it goes away. 06:20.240 --> 06:21.080 So fine. 06:21.080 --> 06:26.390 But what we would like to happen is we also clear out our user from the cache as well. 06:26.390 --> 06:28.580 So back to our accounts API. 06:28.610 --> 06:32.330 Let's also do something inside the log out method as well. 06:32.330 --> 06:36.200 And below the query we'll also need to use the same trick. 06:36.200 --> 06:40.100 Really we need to use the async and the on query started. 06:40.220 --> 06:43.160 And inside here we'll specify parentheses. 06:43.160 --> 06:45.500 Just an underscore because we don't need any arguments. 06:45.500 --> 06:52.460 And we'll get access to the dispatch and the query fulfilled and open up curly brackets. 06:52.460 --> 06:54.200 We'll await the query fulfilled. 06:54.200 --> 06:56.810 We won't do any error handling inside this one. 06:56.810 --> 07:04.220 We'll dispatch and we'll specify account API dot util and invalidate tags. 07:04.220 --> 07:06.680 And in parentheses and square brackets. 07:06.680 --> 07:13.130 We'll specify user info And then we'll make use of our router, which we get from app routes. 07:13.160 --> 07:14.060 Routes. 07:14.060 --> 07:18.650 And we'll simply navigate to the home page when they do log out. 07:18.650 --> 07:22.670 And that needs to be router dot navigate not just router there. 07:23.060 --> 07:26.120 So let's give this system a go. 07:26.120 --> 07:29.570 And I'll clear out the Or I'll close this down. 07:29.570 --> 07:31.370 So I've got all of the available space. 07:31.370 --> 07:35.120 I'll just refresh the page here and let's go and log in. 07:35.120 --> 07:43.940 And if I log in as Bob at test.com again with the passwords, then I should get redirected to the catalog 07:43.940 --> 07:46.100 page and I get our user info back. 07:46.130 --> 07:52.940 If I refresh the page then I should persist the user and I can see Bob at test.com there and access 07:52.940 --> 07:53.600 to the menu. 07:53.600 --> 07:59.000 And if I do log out, then what should happen is we log out, we get redirected to the home page and 07:59.000 --> 08:01.130 our nav bar updates accordingly. 08:01.130 --> 08:01.880 So great. 08:01.880 --> 08:04.400 So that's our login functionality taken care of. 08:04.400 --> 08:05.960 And now we have that in place. 08:05.960 --> 08:11.060 The next thing we'll take a look at is registering a user which we'll take a look at next.