Instructor: We spent some time in the last section
doing a quick review of everything
we've done up to this point,
including redux thunk, the dispatch method,
and browser history here.
At this point in time,
in our success case where a user successfully authenticates
with our backend API,
there's only one last step we have to do,
and that is save the JWT token.
So remember the token is something
that the server is providing to us.
It's something that the server generates
and is gonna send back to us inside the response.
So we need to get a hold of that JWT token
and for any follow up request in the future,
that we wanna make that should be authenticated,
we need to include that token.
So when we put the line here,
the comment save the JWT token, the real question is,
well where do we save it?
That's kinda the question.
To save our token, we're going to employ something
called local storage.
So local storage is something that is available
in most modern browsers as a native API.
So in this diagram right here, let's take a look
at what local storage is and what is doing it for us.
This diagram is split into two columns.
The client or kind of web browser, you know,
your user's machine, and the server,
the server providing down some JavaScript, HTML CSS
and otherwise some kind of, JSON data of sorts.
And so we're very used to a back and forth interaction
between our user's client, which is the browser,
and the server, which is going to exchange
all these different resources,
whenever they come visit our server.
Local storage is something that is
sitting in the background, so to speak.
It is something that is managed entirely by a user's browser
and it is not something that ever touches a server at all.
Local storage, you can basically think of,
as kind of hard drive access,
on your user's machine, on your user's computer.
So if we save some data to local storage,
it is saved to the user's local device
or their local machine.
It is not saved or it's not shared in between users,
different machines, let's say they've got a phone
and a tablet and a laptop,
those are all completely different.
Local storage is just for one singular web browser.
So it makes local storage a fantastic place
to dump our token or to save it.
Remember the idea behind the JWT token.
Let me pull up another diagram here,
is that when the server returns a JWT and we save the JWT
to local storage, it's kind of a twofold thing there.
Whenever the user makes a request
that needs to be authenticated, we can attach the JWT,
and that's going to identify us to our server.
But then also very importantly,
whenever a user revisits our application,
local storage does not get cleared
when the user hits the refresh button
in their browser, it is persistent data.
It's persistent storage.
So when a user logs in, navigates away,
maybe comes back to the website tomorrow, the next day,
the token is still available in local storage.
Which again makes it a fantastic candidate
for sticking our token in there.
One last important thing,
the JWT token is not shared across domains, or excuse me,
the local storage is not shared across domains.
So if we on, say google.com, make use of local storage
and put some very critical or sensitive data in there,
and then a user goes over to hackerwebsite.com,
hackerwebsite.com is not going to have access
to the local storage that was contained over at google.com.
So it's unique to a domain.
Which again makes it a great candidate
for saving our token.
So that's gonna be our strategy here.
When we're going to save our token,
we're really just going to toss it into local storage.
And that's pretty much it.
That's all we have to do.
So to make use of our token, excuse me,
all we have to do is save it to local storage.
We can do so by referencing local storage,
and set item token.
And then the data that we want to save here,
which will be response.data.token.
So local storage is a native or,
it is a method that is available on Window scope.
It's an object that's available on Window scope.
So we don't have to import local storage
into this file or anything.
We can call it any time we want.
To save an item, we call the method set item,
which basically means we want to save something
to local storage.
We then provide kind of a key or a name
of the data that we want to save, and then the data
that we actually want to save.
And that's it.
That's all we have to do to get something saved
to local storage.
So let's give this a shot in the browser now.
I'm going to refresh the page.
Looks like we've got a little bit of a typo,
kinda a little bit of bleed over from a previous section.
We have a reference here saying
that auth user is not defined here.
That is due to our reducer, auth reducer,
we never imported the types in here,
so let's take care of that really quick,
sorry for the side diversion here.
We will import auth user and unauth user from actions types.
And now we're good to go.
I'm gonna put in test 1, 2, 3, password.
I'm gonna sign in.
We got an error about featured not matching any routes.
That's okay, that's just because we haven't
defined that route yet.
Now let's go ahead and refresh the page.
We still get the error saying that no route found.
Again, that's totally fine, in the Chrome console,
I'm now going to write local storage get item,
and I'm gonna get whatever saved to the string token
and you'll see that we get back here, the JWT token
even though we just refresh the page.
So we can refresh the page again,
run the local storage get item again,
and we get the token back again.
So looks like our token exists
even when a user refreshes the page.
This will also make logging the user out
in the future very easy, 'cause all we have to do
is remove this token from the local storage
and poof, the user will no longer be logged in.
So this is a great solution.
This looks good so far.
Let's go ahead and continue in the next section.