Okay, so we have our token in our context and it is shared in our application, but it doesn't really
give us a way to handle this information or hold that information between different sessions.
So what we are trying to do is wherever we are logging, we want to save it somewhere and then get it
wherever we open our application next time.
So we will use a for this, we will use cookies and there is a plugin React Cookie and I will install
that.
So I will copy that.
And so we are here on npm for react cookie.
And so basically we go here I will stop my server and I will paste it npm I install react cookie.
That's done and it will start that again.
So basically what we have here in the token or in that context here it's not needed anymore because
instead of this I think that was very beneficial to have that knowledge, to see how we can share the
information between my servers starting now.
So it kicks me out from here.
So basically, this is the way that you could communicate in between different components.
But if we want to preserve that data, we don't need to use actually a token.
What we can do is from that library import.
Cookie provider from react cookie.
And that's very similar to what we've done with our context.
So I will show you that in a second.
So cookie provider I can actually commented this here.
And instead of that token provider here, what we can do is we can replace all of it with my cookie
provider.
So that will also wrap it.
My entire application and my cookies will be available here.
So I don't need to create that context.
So I don't need to also use that function here, but you can leave it there for your reference if you
like.
So instead of having that token, then I have the cookies provider.
So that means it is not available.
This token is not available anymore from here.
So I also need to comment it out because it is not there.
And what we've done is we've used a context from here.
We also have another option.
So import.
Use cookies from react cookie.
So that's a hook that will be using for instead of use context we will use that cookies.
But this context doesn't exist so we don't use it anymore.
And basically what use cookies is allow us to do is to name the name of the cookie.
So I can say Mr., which is a movie writer.
And then I can say token, this is arbitrary name.
You can put anything you like.
And this is not an object anymore.
This will be an re array.
Something like a new state.
We have it here.
So we have a token and set token to different things.
And we have that in use cookies.
So now what we have is have similar setup as we had before.
But instead of context we have that on our cookies.
So we have that in the in the cookies.
And then we have token and set token and then we can console.log it here.
So basically this set token we need to provide or provide more information.
So first thing first when we set something into cookies we need to tell where we are sending or what
we are actually saving.
So basically this is the name a unique name for that cookie.
And I can put it that as a first argument here.
So so I will do that.
And the second argument will be the value.
So the first is the name, the second is the value.
So we will set token.
Basically this is our cookie.
We could call it whatever we like.
It could be a cookie set cookie but it can be our names as well.
So to talk.
And Mr. Token and then we will put it this as a value.
And then we will take that from the token from here.
And if I will save it now and let's go back and see how it works.
So I will, I see that I don't have anything in the token here in the whenever I'm trying to do a console
log it.
So token is basically empty here.
So if I will go here and clean this and I will also go to from here, I will go to application and we
can actually select the cookies here.
And we can select our local host here.
So I have some cookies set up by the IDs that I was using.
So I can clean this right click and I can say clear.
So all of it is gone.
So I don't have any cookies for the local local host here.
And you see this is local host 3000.
So if I will log in now.
And login here.
What I have here is I have Mr. Token is set up here.
So you can see here the value from my token has been set at in the cookies here if I will go to console.
And actually it's not printed here.
The application has that saved here.
So what will happen if I will refresh the entire page.
Now I will refresh it.
You see I still have that cookie.
So cookie basically preserves in between loaded.
So I can close this open again.
And that will be available.
So that means if I have that cookie here I can do something about it.
So I can go here.
You can see here when I refresh it it's basically automatically loaded.
It was empty before.
But whenever I refresh the page I had that cookie set up.
This is the name of my cookie.
So what I could do is I can go here and say console, log that token.
And that will be I want to have like Mr. A token from there.
So if I will save it here.
You see?
This is my token.
So basically, this is how the cookie comes as an object.
I can select the name of that, the parameter of that object.
And then the value value will be available for for here.
So what I can do is in the out JS I can say if I have the token and actually I can say if.
I have this token Mr. Token.
So it's not empty, then I can do something so I can consider myself as a login because I have that
token and I can go to movie.
So how can I go to movies?
I will need to use a router for this.
So we've done react router Dom.
Here we create a router, but we can also use that react router Dom to navigate in between our component.
So or our site we have that path and that path.
So I will go here and I will use import And I will import, use navigate.
And that's a hook that we can actually use it here.
So I will do constant navigate.
That will be my variable.
And I will do use navigate.
So basically this is an object that we can use or rather a method that we can use.
And it's coming from React Router Dom.
So this navigate if I have that token here what I can do is I can do navigate.
And where do I want to navigate.
So basically here I provide the URL.
And what I'm interested is to go to slash movies.
So if I will go here slash movies I can save it now.
So I don't need to console log it any anything here.
So what I'm checking here.
If I have a token.
This is inside of my out.
So whenever I start my application I check if I have a token or whatever the token change, I check
it.
If I have Mr. Token in my cookies because this is coming from the cookies turkey's cookies, then I
will navigate to movie.
So I will go back to my application and you see, I am already in the movies.
If even if I go back to out, you see, I'm strictly and go back to there because I already have that
cookie setup and I'm redirected to movie.
So if I will go here and I will remove this, so remove the mustard token and if I will go back here
now I'm not redirected here because I don't have the Mr. Token anymore.
So if I will log in again and log in I have that token.
It's still not been triggered.
But if I will refresh it now, you see, I'm going to movies straight away.
So this is how we use a cookie to store something in between different components as well, but also
in different in in sessions as well.
So it is stored in a browser.
We can store it there and we can read it from different components and have some logic based on that.