Original subtitles

So we achieved a lot here

but we got one big problem.

At the moment, whenever I reload or manually enter a URL

we lose our authentication status.

And that makes a lot of sense

because whenever we do that, we restart this React app,

that's how the browser works, there's no way around that,

but that means that all our state in the context is lost.

We get back to the initial state basically.

And that's why we lose this data whenever we reload.

Of course, that's not realistic though,

we typically don't wanna lose that.

We wanna ensure that the user stays logged in,

at least for a certain period of time.

Because for the token which we get here

it's actually important to understand

that this token will expire after a certain duration,

and we actually get debt duration as part of the response

when we do log in or sign up.

Then we get dead response in the number of seconds

that expiration time, I mean.

And the default here will be a one hour.

So the token which we get from Firebase

will expire after one hour

and that's simply a security mechanism.

You could then refresh it with that refresh token

but that's a bit too advanced here, so we'll ignore that.

But at least for this one hour it would be nice

if we would stay logged in,

so that if I reload the page, we still are logged in.

And that means that we need to store the token

somewhere outside of our React state.

Because when we store it in JavaScript

in a variable or anything like that,

this will be cleared when the page reloads,

because that's only stored in memory.

We need to store it somewhere else.

And thankfully browsers do have storage mechanisms

which we could use, for example, cookies.

But an even easier to use storage mechanism

is local storage.

Now, if we talk about local storage,

where there is these cookies and so on,

attached you will find a comparison article

where I talk about that, but long story short

using local storage here is fine,

it will only be a problem if your page is vulnerable

to Cross-site Scripting attacks.

And if that's the case, you have a lot of problems anyways.

So therefore here we will use this local storage mechanism

which is a storage built into the browser

which allows us to store simple data

that will then survive page reloads.

And what we wanna do is rather simple.

When we log in, we wanna store that token

not just in our state here,

we definitely do wanna do that, but not just

but also in that browser storage.

And when we log out, we wanna clear it there.

But in addition, when this page loads,

we wanna look into the storage

and if a token is found there, we wanna use that token

without forcing the user to send a new request first.

But we'll get there step-by-step.

First of all, let's start by storing a token.

If the user logs in, we wanna store that token

in local storage and we can do this

by calling Local Storage Set Item.

And that's a, an API built into the browser

just like the Fetch Function is provided by the browser.

Now a Set Item allows us to store a key value pair

in that local storage, and the key is up to you.

I will name it Token.

And the Value then should be that Token.

And since that's a string already, we can store it like this

because local storage is only able to store

basic primitive data, like strings or numbers.

If you would wanna store an object

you have to convert data to JSON first

which then is a string again.

Now, if you log out, I wanna reach out to Local Storage

and we can either call Clear to erase all data in there

for this site, or we target specific keys.

And in this case, I'll remove this Token Key,

which I set here.

So this now sets and clears that token and local storage.

But that's of course not all I wanna do.

Instead when this app starts

I wanna make sure that I look into my Local Storage

and see if I find a Token there.

And if I do find a token there, I wanna use that token

for authenticating the user automatically.

To be very precise, I wanna initialize my state

with that token then.

And therefore, instead of providing Null

as a starting value, I will get my Token here,

my Initial Token by checking Local Storage, Get Item, Token.

And that could of course, be hard to find

but I will still try doing that

and then set that as an Initial Token.

And it's either Undefined, if that token doesn't exist

or it is the Storage Token.

So we don't even need user fact here

or anything like that,

we can just set the initial token value

by looking into local storage.

And initial value will only be used once

by React when this state is first initialized.

So if that runs thereafter

we won't overwrite any state changes with that token.

So therefore now, if we save this

if I reload it I'm currently logged out.

But if I do now, log in, I am logged in.

But if I reload now, you see, I stay logged in.

If I, visit the profile page

and I reload there, that works.

If I manually enter slash profile,

that works because I did log in.

Now, if I do click log out here, I am redirected.

And now if I tried to manually visit slash profile

that fails again.

So now we have that persistence off that log in status

even after reloads.

But at the moment, this never expires.

And as I mentioned, it does expire after a certain duration,

the default here is one hour.

So we wanna make sure that we also automatically

remove the Token from Local Storage,

that will automatically log the user out

after the token expired.

And therefore of course we wanna set a timer,

but we also wanna store

the remaining duration in local storage,

or we wanna store the expiration

and time in local storage to be precise

so that we always set the timer correctly,

even after reloading the page.