Welcome back.
In this video, let's continue the authentication system from the client side.
What we have done is what we call the authentication.
What has left is what we call authorization.
But we lack something.
And here is what I mean, remember?
As soon as we look in our server does not remember who has logged in.
Unless we send a token and pass it to a header upon every request.
But in one case, when you log in, we are just dumping the logging user details into the console and
that is it.
So to avoid that, we are going to save the logging user into local storage and this is what we are
going to do.
But we faced some error here, meaning that logging field was not found.
We have log in failed or I think I made some typo mistake.
Here is failed id where again we still have the error I think.
Oh I need to add ID to it.
Yeah.
Go to it now.
Is happy.
All right.
So let's continue.
So what we are going to do is that we are going to save the logging user into local storage.
So let's see how we are going to implement that.
Remember this way, we are handling the success, so we are going to save the user into local storage.
So let's add a comment here and say that add user to storage, that is the look at storage.
So here we go.
We bring the local storage set item.
And for this I want to use a property called user off.
And here I'm going to string ify the data as JSON string file and I'm going to pass in the entire payload
and that is it.
So moment of truth.
Let's check our thing.
Have some error here.
Don't worry.
It's from TV.
Yes, for our HTML, let's open our local storage by going to application and our link.
That is it.
So let's move or remove any data inside your storage.
So let's have a look.
When I make use of atom at gmail.com.
The password.
One, two, three, four, five.
And let me hit send.
Let me refresh my local storage.
For some reasons, I'm not seeing the data inside our local storage and also I'm not seeing the response
down here, meaning that I am not handling the type well.
So inside the dispatch, remember I changed this one.
So now it's going to be the constant as look in success.
So now moment of truth.
Let me clear it and let me open my storage again.
Provide right looking credentials at gmail.com.
One, two, three, four, five.
And it's sent.
And you can see that I have a property user off with a value from the back end.
So now that we have the user inside the local storage, we want to update our initial state by using
the data inside here to update the initial state of user.
Oh, and to achieve that, it's going to be pretty simple here by making use of low cost storage, low
cost storage dot get item and I want the user off make sure that you provide the same property name
as we see here.
Otherwise you're going to see some box.
Great.
But I want to convert this one to object so I need to pass the entire function to Jason Dot pass.
So in my component, which is the log in, any time I refresh my page, I will see the log in user right
inside my components.
So let me see the log in here where we are console logging it.
Now let's go to console and let's refresh it.
Let me play this one and now let me refresh it.
And here you can see that we have the log in user.
So it is how we can set a token or a user into look at storage.