1 00:00:00,510 --> 00:00:04,860 The last thing that we have to implement on the head or component is the log out button up here. 2 00:00:04,860 --> 00:00:08,550 Now you might be thinking to yourself Stephen hey this is really straightforward. 3 00:00:08,580 --> 00:00:11,000 Why are we making such a big deal about log out. 4 00:00:11,010 --> 00:00:16,270 All we really have to do to log out of the application is visit our local host 5000 slashy API slash 5 00:00:16,280 --> 00:00:18,360 log out and that logs our user out. 6 00:00:18,660 --> 00:00:23,940 Well it's a little bit more of a big deal than that and you might be thinking when I say that OK this 7 00:00:23,940 --> 00:00:25,880 is going to be like another proxy thing. 8 00:00:25,890 --> 00:00:29,650 And we have to make sure we like set up a proxy or blah blah blah something like that. 9 00:00:29,880 --> 00:00:31,070 Well not quite. 10 00:00:31,080 --> 00:00:37,770 So let me go into detail here and tell you why how we'd log out a user is actually a rather large consideration. 11 00:00:37,770 --> 00:00:43,840 So first off I want to remind you how we track a user or how we even consider them to be logged in when 12 00:00:43,840 --> 00:00:45,330 the user first logs in. 13 00:00:45,360 --> 00:00:50,750 We put some little token inside of their cookie that says OK include this on any follow up request. 14 00:00:50,810 --> 00:00:56,070 Any time you come back to our application send the cookie along so we know who you are in order to log 15 00:00:56,370 --> 00:00:57,120 out. 16 00:00:57,120 --> 00:01:01,830 All we really have to do on the server side of our application is make sure that that cookie value gets 17 00:01:01,920 --> 00:01:03,090 on set. 18 00:01:03,090 --> 00:01:08,250 So we want to take the token in there just dump it and all of sudden magically the user is now logged 19 00:01:08,250 --> 00:01:10,030 out of our application. 20 00:01:10,080 --> 00:01:16,620 Now how we actually empty the cookie or the request type that is used to empty the cookie is the real 21 00:01:16,620 --> 00:01:17,610 question. 22 00:01:17,940 --> 00:01:24,450 So the real question here is when the user clicks on the log out button right here are we going to a 23 00:01:24,780 --> 00:01:31,410 make an Ajax request that's going to go to that log out route or B make this into a traditional anchored 24 00:01:31,410 --> 00:01:37,530 tag that will cause the entire browser to go to this log out route and then kill the user back to somewhere 25 00:01:37,530 --> 00:01:39,050 inside of our application. 26 00:01:39,420 --> 00:01:43,980 So let's really kind of dive into these two methods to make sure that the difference between them is 27 00:01:43,980 --> 00:01:45,670 really clear. 28 00:01:45,690 --> 00:01:49,820 So method number one would be a full HTP request. 29 00:01:49,860 --> 00:01:55,290 So when the user clicks on the Like button that is actually an anchor tag that causes the entire browser 30 00:01:55,290 --> 00:02:01,160 to forcibly redirect or forcibly navigate over to API slash log out. 31 00:02:01,290 --> 00:02:06,240 And when the user visits that route the back end server will say OK you're here we're going to log you 32 00:02:06,240 --> 00:02:09,630 out and then redirect you back to somewhere inside the application. 33 00:02:09,630 --> 00:02:13,290 So you still see something like that has to do with our application. 34 00:02:13,290 --> 00:02:19,200 The other possibility here is that when the user clicks on that button we do not do any type of in browser 35 00:02:19,220 --> 00:02:25,140 nav navigation or any like very forceable New Age TTP requests to the server. 36 00:02:25,140 --> 00:02:32,670 Instead we can make a little Ajax request to the back end to the API slash log out route Ajax request 37 00:02:32,670 --> 00:02:37,640 like that still get full access and all the handling that Assos is associate with cookies. 38 00:02:37,830 --> 00:02:43,290 And so when we make an Ajax request like this when we get the response back the response will say hey 39 00:02:43,290 --> 00:02:47,910 browser empty out your cookies you're no longer signed in and the browser of course is going to respect 40 00:02:47,910 --> 00:02:50,020 that. 41 00:02:50,070 --> 00:02:55,620 It would then be up to us to somehow update the redux side of our application to make sure that was 42 00:02:55,620 --> 00:02:58,560 clear to the user that they are no longer signed in. 43 00:02:58,770 --> 00:03:03,450 So we would have to do something like make an action creator that says hey log out the user we would 44 00:03:03,450 --> 00:03:07,430 have to update our producer to say hey after this log our request is complete. 45 00:03:07,440 --> 00:03:11,330 Make sure that the reducer correctly says we're no longer land land or law. 46 00:03:11,330 --> 00:03:12,170 Dan excuse me. 47 00:03:12,360 --> 00:03:16,650 And then finally we would want to make sure that we also redirect the user back to the route route of 48 00:03:16,650 --> 00:03:21,930 our application like the landing page essentially so that the user understands that they did just successfully 49 00:03:21,930 --> 00:03:22,910 log out. 50 00:03:22,920 --> 00:03:28,940 So essentially the big question here is do we handle log out within the context of the react and read 51 00:03:28,940 --> 00:03:36,210 up side the app or do we just use traditional browser behavior and say let the user go log out and then 52 00:03:36,210 --> 00:03:38,390 get kicked back to our application. 53 00:03:38,580 --> 00:03:42,740 Now obviously without a doubt handling it this way. 54 00:03:42,750 --> 00:03:48,300 So not with the Ajax request not going through the whole redux side of things is way easier to take 55 00:03:48,300 --> 00:03:53,640 care of but the big difference between these two are kind of the benefit to going with the Ajax request 56 00:03:53,640 --> 00:03:59,900 route right here is that it would be a much faster process because the browser is not changing HDMI 57 00:03:59,940 --> 00:04:05,700 documents we're just making a single Ajax request when we get the response just tell the redux side 58 00:04:05,700 --> 00:04:08,400 of everything to update itself. 59 00:04:08,400 --> 00:04:13,740 So this would definitely be faster than Ajax request for the faster from the user's perspective than 60 00:04:13,800 --> 00:04:16,500 the full HTP request right here. 61 00:04:16,560 --> 00:04:19,420 So it really comes down to the use case of your application here. 62 00:04:19,470 --> 00:04:21,850 You can go either route for us. 63 00:04:21,870 --> 00:04:24,020 I think we're going to go this direction. 64 00:04:24,090 --> 00:04:29,520 So we're going to make sure that when you click on that button we just redirect the browser over to 65 00:04:29,550 --> 00:04:31,350 API slash log out. 66 00:04:31,350 --> 00:04:36,000 But I could easily see cases in which in which you might want to go with this route down here and maybe 67 00:04:36,000 --> 00:04:41,880 that case would be something like I don't know maybe you want to give the user a very quick snappy experience 68 00:04:41,880 --> 00:04:47,630 or it's easy to kind of make up situations where you might want to have a faster log out. 69 00:04:47,790 --> 00:04:51,480 But for us really we have no requirement for this whatsoever. 70 00:04:51,480 --> 00:04:55,770 And in my mind when the user goes to log out of your application like that's it you're done. 71 00:04:55,770 --> 00:04:57,080 I don't really care about you anymore. 72 00:04:57,090 --> 00:04:57,970 You're trying to sign out. 73 00:04:57,990 --> 00:05:02,080 I don't really care if it takes you a little bit of extra time to sign out. 74 00:05:02,190 --> 00:05:05,300 Too bad you're leaving anyway so you know what are you doing for me. 75 00:05:05,340 --> 00:05:06,230 Right. 76 00:05:06,330 --> 00:05:07,950 Anyways let's go with this route. 77 00:05:07,950 --> 00:05:12,750 So we're going to wire this up inside the header and it is going to be awfully quick because we don't 78 00:05:12,750 --> 00:05:16,110 have to go with all this action creator stuff and whatnot. 79 00:05:16,140 --> 00:05:19,830 So back inside of our Hetter Here's our rendered content method. 80 00:05:20,020 --> 00:05:21,860 Here's the log out button right here. 81 00:05:21,990 --> 00:05:28,620 All we have to do is put on a Tref of slash API slash log out like so. 82 00:05:29,130 --> 00:05:32,010 And the other thing that we're going to have to do you know let's first test this. 83 00:05:32,030 --> 00:05:33,910 You're going to see very quickly what we have to do. 84 00:05:34,200 --> 00:05:39,930 If I click on the log out button now you'll see that the entire page does in fact refresh like so but 85 00:05:39,930 --> 00:05:41,880 we don't have any content on the screen. 86 00:05:42,060 --> 00:05:46,860 So we need to make sure that after the user comes to this route on our back and server the back end 87 00:05:46,890 --> 00:05:51,300 attempts to redirect the user over to the route route of our application. 88 00:05:51,300 --> 00:05:53,020 In other words the landing page. 89 00:05:53,160 --> 00:05:56,070 So the user will still see some content on the screen. 90 00:05:56,580 --> 00:06:05,010 So again we're going to open up our routes off route start G-S file inside of your we have a route handler 91 00:06:05,020 --> 00:06:11,280 defined to log the user out and then send them back the user model and we had previously put this together 92 00:06:11,280 --> 00:06:16,410 really just to do a little bit of testing now rather than send back the current user model which will 93 00:06:16,410 --> 00:06:19,750 always be essentially empty because no one is logged in. 94 00:06:19,750 --> 00:06:25,290 We are going to instead redirect the user over to the route route of our application similar to what 95 00:06:25,290 --> 00:06:29,460 we did up here when we redirect the user to the route slash surveys. 96 00:06:29,460 --> 00:06:36,380 So in this case we'll say redstart redirect back to the route route of just forward slash like so. 97 00:06:37,060 --> 00:06:37,360 OK. 98 00:06:37,410 --> 00:06:38,510 So let's test this out. 99 00:06:38,700 --> 00:06:41,600 I will go back to localhost three thousand. 100 00:06:42,360 --> 00:06:47,520 So I get logged in with Google a click the button I go through the water flow select my account I get 101 00:06:47,520 --> 00:06:53,100 kicked back to our application on the surveys route like so I see the dashboard of component appear 102 00:06:53,100 --> 00:06:53,830 on the screen. 103 00:06:53,910 --> 00:06:59,820 Now when I click on log out that makes request to the API slash log out route that redirects us back 104 00:06:59,820 --> 00:07:01,780 to the route routed the application. 105 00:07:01,860 --> 00:07:05,960 And I again see our re-act up with the landing component on the page. 106 00:07:06,360 --> 00:07:06,870 All right. 107 00:07:06,870 --> 00:07:14,510 So yes this was far easier to wire up this way than going with the entire kind of built in a jacksie 108 00:07:14,520 --> 00:07:15,660 sort of route right here. 109 00:07:15,690 --> 00:07:19,810 That would have certainly worked as well but it would have been a lot more work on our side. 110 00:07:20,640 --> 00:07:26,160 So I think that the header from an authentication standpoint is now in a pretty good spot because we 111 00:07:26,160 --> 00:07:30,010 are easily able to both log in and log out of the application. 112 00:07:30,030 --> 00:07:31,490 So let's take a quick break. 113 00:07:31,500 --> 00:07:35,070 We'll come back in the next section and we'll continue working on our app. 114 00:07:35,070 --> 00:07:36,830 I'll see you in just a sec.