Original subtitles

Now to do all of that,

it would make sense to not just expect the token here

in the login handler but also the expiration time

and then we can calculate the remaining time

by taking the current time

and deducting it from the expiration time.

And we also want to store that expiration time

in local storage,

so that if we reloaded this app,

we can recalculate that expiration time correctly.

So there are a couple of steps we need to take now.

Now let's start with setting that time

when login handler is called.

I will add a new helper function

outside of the auth context provider function here,

which I'll name calculateRemainingTime

which I'll name calculateRemainingTime

and here I get the expiration time

as a parameter like this

and I want to return the remaining duration in milliseconds

because if I return it in milliseconds,

we can use it just like that in set timeout.

So here I'll then get the current time by calling new date.

This gives me the current timestamp.

To be precise, I'll call get time on that then

and get time gives me that current timestamp

in milliseconds as it says here.

Then I expect expiration time to be a string, let's say,

Then I expect expiration time to be a string, let's say,

and hence, I'll get my adjusted expiration time--

whoops, adjusted expiration time

by first of all passing expiration time to new date

to convert it to a date object

and then we also call get time on that

to get that timestamp in milliseconds.

And that then should typically be some time in the future,

this on the other end is the current timestamp.

And now we got the remaining time

in milliseconds or the remaining duration,

however you want to name it,

by taking this adjusted expiration time,

which is in the future minus the current time,

which is now.

Of course, if we already passed this expiration time,

this will be a negative value but that's okay.

We can then handle this.

So here I'll just return this remaining duration.

So this is now a helper function,

which we can use now in the login handler.

Here, I want to calculate the remaining time

and I'll pass my expiration time to that.

And then here I get this remaining time.

And here, since we adjust logged in,

we know that this will definitely be a positive value

we know that this will definitely be a positive value

around one hour in milliseconds

and we can then set a timer.

And when that timer expires, we can log the user out.

So what I'll do here is I'll actually switch order

and move login handler after the logout handler,

so that here I can call set timeout

and point at the logout handler as a callback,

so that the logout handler is executed if that timer expires

and the time for that timer is that remaining time

because that should be a number in milliseconds,

since I calculated from two timestamps

that are expressed in milliseconds.

So that should automatically log the user out

after that time expired.

Now this also means that for the login handler,

we now need to provide this expiration time.

So in the auth form here

where I do call this login function,

it's not enough to just pass the ID token.

Instead, we now also have to pass this expiration time.

Now, when we do log in,

when we send the request to the sign in

or sign up API routes here,

we do get this expires in part in the response

but that's the number of seconds until the ID token expires.

That's not a timestamp, which is what I'm expecting here

in the login handler though.

Now we could change what we expect here

or we transform the data here and I'll do the latter.

So here I got my expiration time

by simply calculating a new date,

creating a new date object from a timestamp in milliseconds,

which I will derive by getting the current time

in milliseconds plus data expires in,

so that expiresin key and the response,

which is the number of seconds

but please note that it will be a string actually.

So I get that here and I'll wrap this in brackets here

to make it a bit easier to read

and I'll convert this to a number with a plus here

and then once it is converted to a number,

I take it times 1,000

to convert it from seconds to milliseconds

and then here we got a number in milliseconds

and there's a missing bracket,

so here we got a number in milliseconds,

which I add to the current timestamp in milliseconds

and that then is added together

and passed to new date again to construct a new date object

and passed to new date again to construct a new date object

from that timestamp in milliseconds.

And we can actually also get rid of

that outer pair of brackets here.

This should then be the expiration time as a date object

and I'll pass this here to the login function,

the expiration time, and actually I'll pass it as a string.

We could also pass it as a date object

but since I do actually convert it

to a date object here in my helper function already,

I'll pass it as a string.

Now that's just one possible approach.

Definitely not the only one.

And you can come up with a different one if you prefer it

but that should set us that expiration time

and it should set a timer that expires

after one hour as a default.

Now to verify this,

I will temporarily manually change that timeout here

and change that to just 3,000.

So three seconds.

And with that if I now go back and I log out,

if I do log in again,

we should be logged out automatically after three seconds

and that's looking good.

You see that the navigation changed after three seconds.

I'll quickly try this again.

I'll navigate to the profile page and after three seconds,

we are navigated away.

So that works and therefore,

I'll now go back to the remaining time here

but that's just a start because at the moment,

we're not storing that expiration time in local storage,

so if I ever log in and reload this page,

we'll not set a new timer

and we should, of course, be doing that.

In addition, I also want to clear that timer here

if the user logged out manually in the mean time

because it doesn't make any sense

to keep a timer around if the user did already log out.

So let's work on that next.