00:00 Let's go to our root and let's get this thing rendered first. We're going to have an is logged in option to our document, and we'll grab the type for that, that's a Boolean. Then when we go to document right here, we're going to say is logged in,

00:18 will be true if the user is a Boolean user. There we go. Actually, we'll make this optional as well. Then right down here, we'll say if is logged in, then we'll render the logout timer.

00:37 There's that, otherwise, no. This is saying lowercase env is not defined. That is a mistake. There we go. Great. Now we can come down. Actually, if I save, we should get the modal pop-up. Yeah, because now we're rendering it.

00:57 That's exactly what we want. But our modal doesn't actually do anything yet because we haven't coded it to do anything. Eventually, it doesn't go anywhere. Yeah, okay, we can say remain logged in and that works now. But then our logout doesn't work. Let's do the logout first.

01:13 Right down here is where we have this form. This form, we're going to say method. This will actually be similar to something we already did. Method post action is logout. With that, now, I can click logout and it does log me out.

01:32 That's step 1, done. Check that off. Then for the next step, we need to have it automatically log the user out when that logout period time, when the logout time is up. What we're going to do is we've got this logout function.

01:50 This is going to be called when the time is up. Then we also want to have it reset the timer whenever the location changes. That's how we're determining that the user is active. Let's do that first, actually. We'll say location.key. That's where we're going to get that. Now, this is complaining because the location we're

02:09 using is actually the location that's global on the window. The key is set by a router and that's where it's accessible by. The key is what identifies each individual entry in the history. As the user navigates around, we're adding new locations to our history and each one of those will have a unique key.

02:28 By putting the key in the use effect dependencies, we will recall this reset timers every time the key changes. Now, this is not coming from the router though, this is coming from global, so we need to bring that in right here. Cons location, use location from Remix Run React.

02:48 Now, as we navigate around, this model will not show up. Let's save that and navigate here, navigate here, navigate here, navigate there, all of that is working. But then if I wait and I don't navigate, now it pops up. Great. Now, let's implement the automatic logout.

03:05 We're going to bring in submit to do this. This is for imperative mutations. We're going to say submit from use submit. We're using use submit rather than use fetcher like what it looks like Copilot wanted us to do. The reason we're using use submit instead of use fetcher is because this is a navigation.

03:25 We're navigating the user to logout, and then from there, they'll be navigated somewhere else. So the fact that we're on the homepage when this pops up is happenstance, we could be anywhere, and so we want to navigate them back to the homepage. So that's where we're using submit

03:43 because it involves navigation. If it was just a thing like our theme switcher, that's a case for use fetcher. Okay, great. So now that we have use submit, we can imperatively submit the data. Now, what's interesting is our logout route,

04:00 log out, actually doesn't care about any data from the request. It only uses the headers, which will come out automatically. So we actually don't need to pass any data when we call submit. So we could say no, we could say whatever. It really, whatever you want, it doesn't matter. It doesn't make a difference for us.

04:19 So we're going to say no. But what is important is that the method is post and the action is slash logout. So it goes to the right place. And then we want to include submit in our dependencies. So we're going to do that because we are good upstanding React users.

04:38 And now after some time, it will automatically log us out. Ta-da! So we're good. Let's talk really quickly about what we did. So first of all, we need to pass the is logged in state to our document because our document is responsible for rendering this logout timer.

04:56 So the timer doesn't even show up when we're not logged in. That's a good idea. We don't want to have the modal show up. The timer is unnecessary for users who are not logged in. So that's why we were doing that. And then in our timer, we brought in location and submit. The location is used to determine the user's activity. So anytime the location changes,

05:16 the key will change. And so anytime that changes, we're going to call reset timers. And then we have this logout function that is used when the time is up. And that logout function, we're calling submit with nobody because we have nobody that's interested,

05:36 that is of necessity here. And then we set our method to post and our action to logout. We also do the same for the form so that users could proactively log themselves out if they're ready to be done. And the rest of this stuff is also very interesting. Feel free to peruse this code, but Kelly did it for you because your goal

05:56 or your learning outcome here was how do I imperatively log the user out? And this is precisely how you do that. So hope that was interesting and fun and well done.