Loading
Current section: Managed Sessions 6 exercises
solution

Managing Sessions and Sign Out in Web Applications

Loading solution

Transcript

00:00 So let's go to our profile index file here, and we'll start in the loader. We need to count how many sessions there are, so we can display how many sessions there are and let the user delete the other ones. So we'll add a count here of the sessions, or yeah, we'll select sessions where

00:18 the expiration date is greater than the current date. So all the active sessions. We don't want to display the expired sessions that would just confuse the user and be unnecessary because they can't log in expired sessions anyway. Okay. So with that now,

00:36 we come down to the UI that's responsible for our button here, and this is going to need the data. Cons data is use loader data and type of loader, and then this is going to be the number of other sessions there are. So that's going to be the number of sessions minus one.

00:53 So data.user.count sessions minus one. We save that, and we get sign out of one other session. So I've got another session over here that we can possibly sign out of here. So once they are happy with that and they want to sign out, they're going to click on this button, the status button that will submit the form.

01:13 That is ultimately going to end up in the sign out of sessions action. This is like a sub action. So here is our regular action. It's going to get the user ID. It's going to parse the form data, verify the CSRF token, and then determine the intent, and then it will pass additional data

01:30 onto all these other sub actions that we've got on the page. So we get the request and we need to get the cookie session from await, session storage from our session server util, get session from the request. Then with that, this is complaining

01:48 because the request is not assignable to string. Yep, that's right. We need to pass in the cookie header. There we go. Thank you TypeScript again. And that's going to be headers. My goodness, TypeScript is just saving my bacon left and right. So let's get the session ID from the cookie session.

02:07 That's going to be get session key, which we'll get from the auth server util. And now we can delete all other sessions. So Prisma session, delete many. Yeah, make sure you add the user ID. You don't want to delete all sessions that don't match this one.

02:26 That would allow any user to log out all other users except for themselves, which would be so awful. So yes, we're going to filter it to just the user ID and then where the ID itself, the session ID is not the session ID that's in the cookie that the user used to click on this button.

02:45 So with that done, we are all set. So I'll save that. We'll click on this. We've got this, are you sure thing? That's the cool use double check hook. Feel free to look into that if you want to. And so I say, yes, I'm sure. And I click on that. Now this is my only session. I come over here and I'm booted out.

03:02 So got exactly what I wanted. Booyah. All right, so let's review that pretty quick. This is like, now this hopefully brings, helps you appreciate why managed sessions are so cool. So what we did here is first we uploaded or updated our loader

03:22 so that we could count the number of sessions that the user currently has that are active. And then we got our loader data and calculated how many other sessions they've got. And if they have other sessions, then we display this form. Otherwise we display, this is your only active session. And when they submit this form,

03:43 it will end up in the sign out of sessions action, which will grab the session ID out of their current cookie session and delete all the other sessions that are not the one that was in their cookie. And that takes care of that. Now you can log out of other sessions.

04:01 You could expand this further to, I've seen like Facebook, for example, will show you all of the sessions and also show you the IP address of where that session is currently managed and like when it was created, all of that stuff. And then you can delete specific sessions.

04:18 And this is largely because Facebook is in the business of keeping you logged in as long as possible so they can track you on the internet. So like they do wanna have this feature, but they also wanna make it so that you're not just signing out of all your sessions all the time. So you could go really deep and just make it so that you limit the amount of sessions

04:38 that the user can delete all at once or whatever. But yeah, this works pretty well for us. So we're gonna leave it right here. Feel free to take it as far as you want though, be kind of fun practice.