Current section: Logout 6 exercises

Implementing Remember Me Functionality

Loading solution


00:00 So let's go over to the login and right here we want to commit the session with an expiration that is 30 days into the future. So let's go here, we'll say expires and new date, date.now plus 30 days in the future, thank you Copilot.

00:18 Okay, and that we only want to do if the user has checked the remember me checkbox. And so Kelly put that together for us so we can just grab that off this submission value. And then we can say if remember, then we'll do that new date. Otherwise, we can do undefined.

00:34 There we go. And let's make sure that that works that that should be everything, but let's just make sure it works. So we'll come over here. We'll log out of Cody, then we'll log in. And I want to make sure that the original behavior still works. So let's scooch this over. We'll clear all of our cookies out. There we go. And Cody, Cody loves you.

00:53 And boom, we've got our session and it expires with the session. So exactly what we want it to be. Now, if I log out again, and now we're going to log in with Cody and Cody loves you and remember me. Now we'll log in and boom, we've got our expires and that's the max age.

01:11 Now, let's just test that whole flow out. So I'm going to copy that. Come over here and let's quit brave totally then say brave. And we'll go to localhost and boom, I'm still logged in.

01:26 So the ultimate functionality that we were looking for definitely still works. Awesome job, everyone. OK, so we also want this to be applied to the sign up flow. So sign up. And you know what? This seems like a pretty reasonable thing to abstract.

01:42 So I'm going to take this and we're going to go to off server. And we're going to create a session expiration time as well as a function export function called get session expiration.

01:56 I think date something like that. I can't remember what my final version of that was, but it doesn't really matter. And we don't need to export this. We'll just say const expiration time is going to be 30 days in the future. And so that way we just have a little bit more communication with the intent of this is.

02:15 And so with that, then we can come over here and get the expiration date there and we can do the exact same thing for our sign up flow as well. So go to sign up that. And remember, comes from our submission as well.

02:29 Remember, save that. And then, of course, we need to import this and we get that same behavior in both places. And so now our users will be able to stay signed in for a 30 day period.

02:42 And so hopefully they won't get mad at us because the remember remember me checkbox works, except people don't know how that thing works. And so they probably will still get mad, but they will be remembered even when they close down the browser.

02:54 Now, one additional thing that you could do if you wanted to spend a little more time on this is have a mechanism for refreshing expiration on a cookie. That requires a little bit of extra work, which actually will do some of that later on in the workshop,

03:10 where we need to remember what the expiration was and kind of refresh that expiration. But you could add as a part of that an additional mechanism to like as the users using the site, let's keep this refresh or this expiration at that point in the future.

03:27 But that is not something we're going to dive too deep into in this workshop. This is pretty typical standard way to handle expiration of a user session. So, yeah, in quick review, if the user says, hey, I want you to remember me.

03:42 We simply add an expiration when we commit the session that will generate an expires directive for this particular cookie. And then the browser will say, OK, I'll store that in my cookie jar for until that date. So, well done.