Current section: Logout 6 exercises

Implementing Automatic Logout with Modals

Loading exercise


00:00 In this exercise, we're actually going to do something that we don't need for this app, but it's common enough that we're going to just do the exercise and then Kelly will remove all the code later. So Kelly actually added a bit of code for a modal that'll pop up when the user's been logged in for a little bit. So I'm going to log in as Cody

00:18 and then we'll just wait for a little bit, no activity. I'm going to say remain logged in so we can see that. So that modal pops up after a certain amount of time. For this exercise, we've made it obviously quite short, but the user has to say remain logged in or if they don't say anything at all, they get logged out automatically.

00:35 And then of course, there's also, whoops, Cody loves you. There's also the option to instantly log out and you've probably seen this sort of thing on like bank websites and stuff like that. There are some applications where you really want to make sure that the user's being like actively

00:53 using the application before and if it's been a while that you just log people out, but before you do that, you show a modal to let them know that they need to continue to use the app or they're going to get kicked out automatically. So automatic logout, pretty common use case. Certainly not something that we would need

01:12 for this kind of an app and like social media apps, they don't even want users to log out ever for various unfortunate reasons. And so it's not necessary for every application, but in this particular one, definitely makes a lot of sense or in this, it doesn't make a lot of sense, but there are definitely use cases

01:32 for this type of an experience. And in addition to that, there are various ways that you can use to detect the user's activity. So you could say like, if they're moving the mouse or they're clicking on buttons or whatever, that can determine their activity.

01:50 In this exercise, we're actually going to rely on if they're navigating around the app. And so if they have navigated recently, then we won't lock them out. So here, I'll give you an example. This is the solution again, Kodi, Kodi loves you. And that modal won't pop up so long as I'm actively using the application, going around and doing things.

02:10 But as soon as I stopped navigating and doing that sort of thing, then it pops up and then it locks me out. So that is the objective for this exercise is to make that log out thing happen. And yeah, if we log in in the exercise,

02:30 then all the stuff is all set up for you to like to pop up the modal and all the timers and stuff, that's already done for you. Your job is just to actually render this modal and so that it does pop up

02:47 and handle the automatic log out piece, as well as like submitting the log out button to intentionally and proactively log out. So that's what you're gonna be doing in this exercise. Lots of log in, log out to test it out, but have a good time with it. We'll see you when you're done.