1 00:00:08,420 --> 00:00:12,740 In this video, we are going to implement two things. 2 00:00:13,130 --> 00:00:21,680 One is, as soon as a user logs in, we want to redirect the user to his or her dashboard and we will 3 00:00:21,680 --> 00:00:25,280 also implement what is called look out functionality. 4 00:00:25,430 --> 00:00:30,590 And to achieve that differently, we may need the action to do that. 5 00:00:30,590 --> 00:00:39,860 So we inside the SLC component and then the context, now we are moving into the of context and here 6 00:00:39,860 --> 00:00:40,700 we go. 7 00:00:41,030 --> 00:00:45,920 So inside here we are going to create one more action for log out. 8 00:00:45,920 --> 00:00:50,390 So let's collapse this one and here goes the lockout action. 9 00:00:53,880 --> 00:00:56,780 Cons look out. 10 00:00:57,150 --> 00:00:58,710 User action. 11 00:00:59,820 --> 00:01:05,910 And this function will not take in any agreement or without making any HTTP requests. 12 00:01:05,910 --> 00:01:15,690 But instead we are going to dispatch this method with a type called look out and then with a payload 13 00:01:16,080 --> 00:01:22,770 of not because we want to empty the user states, that is the user authentication state. 14 00:01:22,770 --> 00:01:31,260 So here has now so inside the action type of the user, we need the log out action type. 15 00:01:31,260 --> 00:01:36,030 So inside the of context lets require the log out. 16 00:01:37,110 --> 00:01:38,580 Great for log out. 17 00:01:38,580 --> 00:01:40,680 There is no way we can fix error. 18 00:01:41,610 --> 00:01:47,010 So for this one there is no log our success or lock out error. 19 00:01:47,010 --> 00:01:51,750 So here let's replace that and going to be as log out. 20 00:01:52,170 --> 00:01:55,770 So lastly, we need to handle inside the reducer. 21 00:01:55,770 --> 00:02:04,410 So after the pull file you can come here and then we can even copy one of this ones and here we go. 22 00:02:04,770 --> 00:02:08,940 Let me have a beautiful comment by saying, look out. 23 00:02:08,940 --> 00:02:13,170 And here the case is, log out. 24 00:02:13,560 --> 00:02:21,870 And for this I'm going to empty the user of this where we have the user token and I want to work remove 25 00:02:21,870 --> 00:02:26,460 everything by assigning the states. 26 00:02:27,360 --> 00:02:28,560 User of. 27 00:02:29,920 --> 00:02:41,020 To know that is it and loading false and here error also now yeah so only updating the user of and that 28 00:02:41,020 --> 00:02:41,590 is it. 29 00:02:41,770 --> 00:02:48,910 So what about the logging in redirect where we can achieve this one in two ways. 30 00:02:48,910 --> 00:02:54,580 We can redirect the user inside the component that is the log info. 31 00:02:54,700 --> 00:03:03,280 But on unlucky for us we are handling the state or the results inside the action or we can retain a 32 00:03:03,280 --> 00:03:05,610 value upon logging in here. 33 00:03:05,620 --> 00:03:10,120 So inside the and submit what comes back from this action call. 34 00:03:10,120 --> 00:03:12,970 We can use that one to be able to redirect. 35 00:03:12,970 --> 00:03:17,170 But what comes back from this one is a promise, right? 36 00:03:17,170 --> 00:03:21,610 So we are going to handle it inside the action itself. 37 00:03:21,610 --> 00:03:25,360 So let's locate where we are logging in and here we go. 38 00:03:25,750 --> 00:03:32,890 So for this one, we are going to use the window object that is a window dot location. 39 00:03:32,890 --> 00:03:41,710 So here our provide as redirect and I'm going to use window dot location on that. 40 00:03:41,710 --> 00:03:46,900 We have the H ref and I want to push the user to dashboard. 41 00:03:49,450 --> 00:03:55,290 Let me refresh it and let me provide the right email and the password. 42 00:03:55,300 --> 00:03:56,680 One, two, three, four, five. 43 00:03:56,710 --> 00:04:00,700 Let me hit send and you can see that automatically. 44 00:04:00,700 --> 00:04:03,100 I have been redirect to my dashboard. 45 00:04:03,190 --> 00:04:04,820 So what about the look out? 46 00:04:04,840 --> 00:04:09,930 Now we are going to dispatch the action inside the number. 47 00:04:09,940 --> 00:04:19,209 So let's go to the number components and inside the components, let's collapse this one and the number 48 00:04:19,209 --> 00:04:20,079 which is here. 49 00:04:20,709 --> 00:04:26,230 I'll bring in the of context and I will need the use context also. 50 00:04:26,730 --> 00:04:33,070 So if you are familiar with Redux, here is going to be as use selector instead of the use context. 51 00:04:33,940 --> 00:04:41,530 So let me bring the React import at the top here and now we are all set. 52 00:04:41,530 --> 00:04:46,420 So let's call the use context by passing in the of context. 53 00:04:46,510 --> 00:04:50,050 And what comes back is the data that I want. 54 00:04:50,050 --> 00:04:55,720 So now inside the of context, let's send in the log out action. 55 00:04:55,930 --> 00:04:59,710 So let me pass in here as log out user. 56 00:04:59,740 --> 00:05:02,860 I'm going to be as log out user action. 57 00:05:03,010 --> 00:05:11,560 So the next step is let's structure it here and then on the button, I want to trigger that action. 58 00:05:11,980 --> 00:05:18,880 But guys, as soon as I click on Look Out, I also want to reiterate the user to log in page. 59 00:05:19,180 --> 00:05:25,810 Because of that, I want to create a function to call this function or we can do the same thing as we 60 00:05:25,810 --> 00:05:35,230 did for logging in so we can even copy this syntax for redirect here and here for the log out. 61 00:05:35,230 --> 00:05:36,760 That is this function. 62 00:05:36,760 --> 00:05:41,170 After dispatching, I want to direct the user to log in. 63 00:05:41,620 --> 00:05:42,460 That is it. 64 00:05:42,460 --> 00:05:46,720 So inside here I can go ahead and then dispatch the action. 65 00:05:46,930 --> 00:05:53,920 So let's look at the log out link, which is this button here. 66 00:05:54,040 --> 00:06:03,070 So I'm going to add an event list now call on click and here I'll provide the log out user action. 67 00:06:03,190 --> 00:06:05,440 So now moment of truth. 68 00:06:05,650 --> 00:06:11,140 So let's get back to the homepage and now let me click on Look Out. 69 00:06:11,140 --> 00:06:15,160 We can see that it has redirected me to the log in page. 70 00:06:15,160 --> 00:06:17,470 So let's go to the dashboard and see. 71 00:06:17,470 --> 00:06:21,250 Well, if we do, I have not got but I still see this one. 72 00:06:21,430 --> 00:06:26,680 So let's check the console and see if we still have the token here. 73 00:06:26,680 --> 00:06:28,330 Yes, we still have it. 74 00:06:28,330 --> 00:06:32,110 So it means that we are not deleting the token from here. 75 00:06:32,320 --> 00:06:36,190 So we need to modify the log out functionality. 76 00:06:36,370 --> 00:06:42,130 So here what you are going to do is that we need to empty the local storage. 77 00:06:42,130 --> 00:06:48,850 So before we return here we are going to remove the user from storage. 78 00:06:50,230 --> 00:06:51,370 So here we go. 79 00:06:51,370 --> 00:06:58,330 Look dot remove item and item you want to remove is called the user of. 80 00:06:59,680 --> 00:07:05,290 Let me get to oh, let me open this one and let's see after clicking logout, it is going to remove 81 00:07:05,290 --> 00:07:05,770 this one. 82 00:07:05,770 --> 00:07:06,670 So let's see. 83 00:07:06,850 --> 00:07:13,360 And you can see that it has removed the token for my storage and if I try to go to Dashboard, you can 84 00:07:13,360 --> 00:07:14,830 see error here. 85 00:07:14,830 --> 00:07:22,270 It means that I need to log in so I need to provide the right message than this error error here. 86 00:07:22,390 --> 00:07:27,610 So let's go to the dashboard of the account, which is this one. 87 00:07:27,970 --> 00:07:31,510 And here let's provide the actual error. 88 00:07:31,840 --> 00:07:36,400 Let's inject the error record and let's see. 89 00:07:36,580 --> 00:07:40,720 And now error invalid token, please log in again. 90 00:07:41,080 --> 00:07:48,820 Let me have some space by using this empty object with this and I have some spacing between the.