Imperative Mutations Solution

[00:00:00]
>> Welcome back to exercise six. Hopefully, you had a great time working through that. Let's work through this together. So pretty much as soon as you show up on this page, we're going to get this modal that comes up. Again, I mentioned this is already built for you.

[00:00:14]
And it has this handy little feature where if the user is actually using the app, the model doesn't show up. It only shows up when the user stops navigating around, stops performing mutations all that stuff. And then it says, hey, kind of want you to get out of here I guess.

[00:00:31]
So this code is inside of this logout timer. Feel free to peruse how all of this stuff works, but it's really not anything crazy complicated. Also it only renders when there's a user logged in. So if the user ever logs out, then we're not rendering the LogoutTimer. It doesn't.

[00:00:52]
The logged out user isn't gonna get the modal. Okay, so for what our job is, is we want to have a submit hook that will trigger a logout. And we are going to use that in this logout function which is then used when the timer times out and all of that stuff, all the React things that we're not gonna be covering today.

[00:01:17]
So, let's add that submit hook let's say submit useSubmit. And then I just shorten the time for you so it shows up quicker so we can skip over that and now when it's time to log out, we're going to use this submit hook or the submit function to submit.

[00:01:39]
Actually, you typically don't need to submit anything when you're just logging out. But for us our logout has this fancy little feature where if you provide a redirect to that will go into the URL and that tells the login form that when they've logged in, they're gonna redirect to whatever that redirect to is set to.

[00:01:57]
And so for us, we want to redirect to where we came from. And so we're gonna say redirect. RedirectTo is location.pathname. So wherever we're at currently, that's where I want this to come back to, so that the user can log back in and just pick up where they left off.

[00:02:16]
The other thing that we wanna make sure that we do is specify the action as logout otherwise, this will submit to the current URL we don't want to do that. We're actually trying to send them somewhere ultimately, they'll end up at login. But we're sending them over to the logout route.

[00:02:35]
And then the logout route will redirect them to the login. And then we also want to post to the logout. And the reason this is actually important web stuff. The reason that you post to a logout, and you normally only do mutations on post requests is because otherwise you open up your users to cross or what is it called CSRF cross site request forgery.

[00:03:02]
Where the malicious actor can trigger a get request on your server using that user's browser and without the user interacting with that at all. So we're gonna use a method of which effectively would mean they could log users out of your site without their express permission but could be even more malicious.

[00:03:29]
So you typically want to do mutation type things on postponing. Okay, great. So then we have Dan, fill that in for us. And we should be all set. So we come back in here, they're gonna refresh just to make sure modal pops up, and we log out. And then if I go login, cody@remix.run.

[00:03:50]
Cody loves you. And here we are. And then yeah, I want to remain logged in or I wanna log out, cool? And then of course, you wouldn't typically have it be this long, so, we've got it set to 24 hours, it's probably a little much, right? Maybe 30 minutes, might be better, but yeah, that's all going to be your PMS decision so.

[00:04:16]
[LAUGH]