1 00:00:01,500 --> 00:00:03,120 Instructor: Now that we have the ability to persist 2 00:00:03,120 --> 00:00:05,580 our login state we should probably make sure 3 00:00:05,580 --> 00:00:08,760 that users can actually log out as well. 4 00:00:08,760 --> 00:00:11,820 Remember, if a user goes to the Signout link right here 5 00:00:11,820 --> 00:00:14,340 and they visit the Signout route, we're going to 6 00:00:14,340 --> 00:00:17,610 want to somehow log the user out of our application. 7 00:00:17,610 --> 00:00:20,490 Logging out a user is gonna be a two step process. 8 00:00:20,490 --> 00:00:22,830 We're going to want to make sure that we clear that 9 00:00:22,830 --> 00:00:26,370 local storage data that stores our token 10 00:00:26,370 --> 00:00:27,420 and we're going to want to make sure 11 00:00:27,420 --> 00:00:30,000 that we also flip that authenticated piece 12 00:00:30,000 --> 00:00:33,990 of state over to either false or empty string as well. 13 00:00:33,990 --> 00:00:35,040 So let's get to it. 14 00:00:35,040 --> 00:00:37,260 In this section we'll create a new component to 15 00:00:37,260 --> 00:00:40,200 show anytime a user goes to the sign our route. 16 00:00:40,200 --> 00:00:41,100 Remember that we had said 17 00:00:41,100 --> 00:00:43,680 that we want that component to just show a simple message 18 00:00:43,680 --> 00:00:46,563 to the user of something like, Hey, sorry to see you go. 19 00:00:47,580 --> 00:00:49,290 Okay. So to get started 20 00:00:49,290 --> 00:00:51,780 I will open up my components directory 21 00:00:51,780 --> 00:00:53,580 and inside my off folder 22 00:00:53,580 --> 00:00:57,400 I'm gonna make a new component called Signout.js 23 00:01:00,120 --> 00:01:02,700 Then inside of here, I'm gonna create a class 24 00:01:02,700 --> 00:01:04,890 based component, 'cause we're definitely going to 25 00:01:04,890 --> 00:01:08,100 want to make advantage of the lifecycle methods 26 00:01:08,100 --> 00:01:11,490 that class based components have access to. 27 00:01:11,490 --> 00:01:16,360 So I will import React and Component from react 28 00:01:17,400 --> 00:01:21,483 Then I'll define my class signout which extends component. 29 00:01:23,160 --> 00:01:24,450 We'll take care of the render method 30 00:01:24,450 --> 00:01:26,370 'cause I think that's gonna be really easy. 31 00:01:26,370 --> 00:01:29,800 I just wanna return a div that says something like 32 00:01:30,810 --> 00:01:32,643 Sorry to see you go. 33 00:01:34,440 --> 00:01:37,863 And then I'll export default that at the bottom. 34 00:01:40,050 --> 00:01:42,960 I'll then flip over to my index. js file 35 00:01:42,960 --> 00:01:44,760 where I will set up a new route mapping 36 00:01:44,760 --> 00:01:47,100 for the Signout component. 37 00:01:47,100 --> 00:01:51,750 So I will import Signout from components signout 38 00:01:51,750 --> 00:01:54,400 oops that's components off Signout 39 00:01:57,450 --> 00:01:59,880 and then I can make a new route mapping 40 00:01:59,880 --> 00:02:01,353 by all my other routes. 41 00:02:02,580 --> 00:02:05,680 So I'll say route with a path of Signout. 42 00:02:07,020 --> 00:02:09,100 We should show the component Signout. 43 00:02:13,560 --> 00:02:15,540 All right, so that's not bad. 44 00:02:15,540 --> 00:02:18,060 Now we could test that out in the browser, but I'm sure 45 00:02:18,060 --> 00:02:20,460 what we just put together is gonna work just fine. 46 00:02:20,460 --> 00:02:25,200 So let's instead open up our actions index.js file where 47 00:02:25,200 --> 00:02:27,960 we will create a new action creator that's gonna take care 48 00:02:27,960 --> 00:02:29,733 of the entire Signout process. 49 00:02:30,810 --> 00:02:34,020 Underneath the sign up action creator, I'll make a new one 50 00:02:34,020 --> 00:02:36,310 called export const signout 51 00:02:39,750 --> 00:02:43,320 Now I am not gonna make this a kind of complicated action 52 00:02:43,320 --> 00:02:45,900 creator where we get access to that dispatch function 53 00:02:45,900 --> 00:02:49,290 with Redux Thunk, just because I do not expect this to 54 00:02:49,290 --> 00:02:52,440 have any need for asynchronous dispatch. 55 00:02:52,440 --> 00:02:55,110 In other words, we're not gonna make any requests inside 56 00:02:55,110 --> 00:02:56,490 of this Signout action creator. 57 00:02:56,490 --> 00:02:59,643 So it's gonna be a normal synchronous action creator. 58 00:03:01,652 --> 00:03:03,360 So inside of here to log out a user 59 00:03:03,360 --> 00:03:08,343 I will first clear my local storage of that token property. 60 00:03:09,210 --> 00:03:13,890 To do so, we can say localStorage.clearItem 61 00:03:13,890 --> 00:03:16,230 and then we specify the item that we want to clear. 62 00:03:16,230 --> 00:03:17,853 So in this case token, 63 00:03:20,010 --> 00:03:25,010 then after that we will return an action of type AUTH USER. 64 00:03:27,750 --> 00:03:30,866 Notice that we're reusing the same type 65 00:03:30,866 --> 00:03:33,783 that we used up here to sign up a user. 66 00:03:34,650 --> 00:03:37,290 The auth user property right here 67 00:03:37,290 --> 00:03:40,080 all that really does is flip the authenticated piece 68 00:03:40,080 --> 00:03:42,330 of state in our auth reducer. 69 00:03:42,330 --> 00:03:44,760 And so it's kind of a multipurpose type. 70 00:03:44,760 --> 00:03:46,740 We can reuse this type right here 71 00:03:46,740 --> 00:03:49,440 but rather than trying to set the authenticated piece 72 00:03:49,440 --> 00:03:51,786 of state to some JSON token 73 00:03:51,786 --> 00:03:55,230 we can assign it an empty string and set 74 00:03:55,230 --> 00:03:57,510 which essentially means sign this user out 75 00:03:57,510 --> 00:03:59,853 by clearing that authenticated piece of state. 76 00:04:02,670 --> 00:04:04,270 Okay, so that looks pretty good. 77 00:04:05,700 --> 00:04:06,810 Let's take a pause right here. 78 00:04:06,810 --> 00:04:08,160 When we come back in the next section 79 00:04:08,160 --> 00:04:10,560 we'll wire up the Signout action creator 80 00:04:10,560 --> 00:04:13,410 up to our signup component versus be Signout component 81 00:04:13,410 --> 00:04:15,690 and make sure that it gets called anytime the sign 82 00:04:15,690 --> 00:04:17,790 out component is shown on the screen. 83 00:04:17,790 --> 00:04:20,240 So quick break and I'll see you in just a minute.