00:00
(upbeat music)
00:02
Now it's pretty typical for login forms
00:06
to have a little checkbox right down here
00:08
that says something like remember me,
00:10
that informs the application whenever you have that checked
00:12
that you want it to remember your logged in session
00:15
for a long duration.
00:17
Sessions within AdonisJS have a default lifespan
00:19
of about two hours.
00:20
We can verify that within our application
00:21
by jumping into our config folder and into our session file.
00:25
If we scroll down a little bit here,
00:26
we'll see age is set to two hours.
00:28
So from our last point of activity with an application,
00:32
it will expire the session two hours
00:34
after that point in time.
00:35
So it's two hours of straight inactivity,
00:37
then it will expire out the session.
00:39
And that's for sessions as a whole,
00:41
not just your authenticated user.
00:42
So if you're storing information within a session,
00:44
it will apply to that as well.
00:46
The remember me feature allows us
00:47
to expand authentication state beyond this two hours.
00:51
And to enable it, if we jump back into our browser
00:53
and dive into the session guard authentication,
00:55
documentation, we're gonna need to create a new migration.
00:58
So we can give this here a copy
00:59
directly from the documentation,
01:00
jump into our terminal, give our server a stop,
01:02
clear that out and paste this migration,
01:04
create call for ACLI into our terminal and give it a run.
01:08
Let's go ahead and boot our server back up
01:09
while we're here, close that out.
01:10
And now we need to define these columns
01:13
as the columns for this remember me tokens table.
01:16
So we'll give that a copy,
01:17
tie our browser back away,
01:19
dive into our database folder, migrations,
01:21
and into our new create remember me tokens table migration.
01:25
Give everything inside of the create table here
01:27
a highlight and paste in what we've copied
01:29
directly from the documentation.
01:30
To give a quick overview of what we have,
01:32
we have our default increments ID column right here,
01:35
which will serve as a primary key for this table.
01:37
Then we have a tokenable ID that's unsigned,
01:39
meaning that it can't be negative.
01:40
And it's going to reference the user's ID.
01:43
So if you placed your users anywhere else
01:44
besides a user's table and you have their primary key column
01:47
called anything other than ID,
01:49
you'll wanna swap that out accordingly.
01:50
And this will cascade on delete.
01:52
So if we were to delete that user,
01:53
these remember me tokens would automatically
01:55
clear out for them as well.
01:56
Then we have a hash.
01:57
This is used to verify that this remember me token
02:00
is valid for the current user that we're working with.
02:03
And then we have the created at and updated at timestamps,
02:05
as well as an expires at timestamp
02:07
that contains what time and day
02:09
the actual remember me token expires.
02:12
So let's give that a save.
02:13
We should have our down right here as well.
02:14
That will just drop the table, which is a okay.
02:16
So actually let's dive back into our terminal one more time,
02:19
give our server one more stop and let's run our migration.
02:21
Although we have that defined.
02:22
So node ace migration run.
02:24
Okay, cool.
02:25
So we'll clear that out and we can run npm run dev
02:27
to boot our server back.
02:27
Slide that back away.
02:28
And now we're done with our migrations
02:30
and our database folder as well.
02:31
So we'll clear that out and we're done with our set.
02:32
And the next thing that we need to do
02:34
is scroll up to our user model.
02:36
Within this user model,
02:37
we're going to want to define a static property.
02:39
So static called remember me tokens.
02:42
And we're gonna want to set the value of this
02:44
to db remember me tokens provider.
02:47
And we can import that from AdonisJS auth.
02:49
From this, we're gonna wanna call a method
02:50
called for model and provide in our user model.
02:54
This gives AdonisJS's auth package
02:56
the ability to create remember me tokens for us
02:59
on our behalf with our user model.
03:01
Okay, next we need to configure our remember me behavior.
03:04
So we'll dive down into our config
03:06
and into our auth file here.
03:07
So within our web session guard,
03:09
you'll see that we have used remember me token set to false.
03:12
Well, we're now enabling that.
03:13
So we're gonna wanna switch that to true.
03:15
And we're also gonna wanna define
03:16
how long we want to remember me token to last.
03:19
So how long we want it to keep a user authenticated.
03:21
So we can do that with remember me tokens age.
03:23
And let's say maybe two years for that.
03:25
The values for these dates are pretty forgiving.
03:27
So you could do two Y for years,
03:29
or you could do two years spelling it out
03:31
and it will understand it accordingly.
03:32
Okay, so with that, we should now have
03:34
our remember me behavior fully configured
03:36
and set up and ready to go.
03:37
So now we just need to add it into our login form
03:40
and account for it accordingly within our login method.
03:42
So let's hide our config away,
03:43
scroll back down to our login form
03:45
and right above our login button,
03:46
let's go ahead and add in a label class flex item center,
03:50
maybe a gap of two.
03:52
We'll have our input type equals checkbox name
03:55
is remember me.
03:57
And then we'll do a span here
03:58
for our actual remember me label text.
04:01
Okay, let's give that a save.
04:02
Next, we're gonna need to account for this new body property
04:04
within our auth validator for our login.
04:06
So let's dive back to our validators auth
04:08
and specifically for our login validator.
04:10
Let's add in our is remember me field.
04:13
And there's a form helper specific type called accepted,
04:17
specifically meant to receive in checkbox based values
04:21
directly from form inputs.
04:22
So we can call that and then we can make it optional
04:25
so that it can be checked or unchecked and still be valid.
04:27
And so this accepted here,
04:29
we'll just normalize the various input values
04:31
that checkboxes can send up with like on, yes, one, true,
04:35
so on and so forth.
04:36
Okay, so now let's scroll up to our login controller
04:39
because now we have an additional field
04:40
for is remember me being passed in.
04:43
And if we take a look at our login validator,
04:44
we'll see exactly what that's being provided as.
04:46
So it's either true or it's undefined,
04:48
which is a falsy value.
04:50
So we can take this and provide it directly
04:52
into our login method,
04:53
which accepts in a remember flag as the second argument.
04:56
So let's put is remember me right there.
04:58
And now if this is true,
05:00
it will create a remember me token
05:01
and assign that to the user's cookies.
05:03
It will then use that cookie to track the user's login state
05:07
across multiple sessions.
05:08
As AdonisJS cycles through our expired sessions
05:10
and that recreates a new one for us,
05:12
it will take that remember me token
05:14
and just kind of use it to persist the authenticated state
05:17
across those various sessions that it creates,
05:19
allowing us to have a long lived authenticated session
05:22
despite an actual sessions lifetime
05:24
being two hours of inactivity.
05:26
So let's give that a save.
05:27
And if we did everything correctly,
05:28
we should now be able to jump back into our browser.
05:30
There is our remember me checkbox.
05:32
Let's do [email protected] .
05:34
Put in the accurate password here,
05:36
check out remember me box and log in.
05:38
Well, it looks like this errored out.
05:40
So let's see, you cannot use user model
05:41
for verifying remember me tokens.
05:43
Make sure to assign token provider to the model.
05:46
So this portion right here makes me think
05:47
we might've gotten something wrong
05:49
when we added that token provider into our user model.
05:51
So let's drive back into our text editor,
05:53
go into our user model, static remember me tokens,
05:56
DB remember me tokens provider for user model,
05:59
remember me tokens, there we go.
06:01
Give that a save.
06:01
And let's give that one more try.
06:02
So let's go back to our login, [email protected] ,
06:06
enter in their valid password,
06:08
check remember me, log in.
06:10
Okay, cool.
06:10
So now it did actually work.
06:11
Now that we have everything spelled correctly.
06:13
Furthermore, we can dive into PG admin.
06:15
Let's scroll up to our Adonis 6 database
06:18
and let's give it a refresh.
06:19
Scroll back down.
06:20
And we should now have this remember me tokens table.
06:22
Let's give that a right click, view edit data.
06:24
We can just do all rows
06:25
'cause it should just be one value here.
06:26
And there we go.
06:27
So there is a remember me token
06:28
for our user with an ID of seven,
06:30
which is our [email protected] user.
06:32
Here's the hash that we're using
06:33
to match a particular session to a user,
06:35
created at, updated at,
06:36
and here's when that token will expire.
06:38
So we are authenticated until 2026,
06:41
unless we were to come into here and lock out.
06:44
So while we're logged out,
06:45
let's go ahead and make sure that it works okay
06:46
without that being checked.
06:47
So [email protected] , password,
06:49
leave remember me unchecked here,
06:51
hit log in, and cool.
06:53
We're still A-okay there as well.
Join The Discussion! (0 Comments)
Please sign in or sign up for free to join in on the dicussion.
Be the first to Comment!