Okay, so we have a way to check if we have a mr. token or a mr. token inside our cookies.
And we can based on that, we can redirect to movies, but we will also need to do it inside our component
in inside our movies.
What we need to do is we need to check the same.
So I will copy whatever we have here and go to app.js here and we can actually check it.
And so we will use Usestate here.
Useeffect sorry.
We will check it from here if we have that token from our cookie.
So we'll need to also do this thing here.
So basically I will revert it to the way we have it there.
So if I will import this so I will have import token.
I don't need to set a token from here.
I will have this and navigate as well.
And that hasn't been imported.
So I will just.
Copy import from here because we'll need it in this component here.
So use effect basically inside our app.js which is list of movies.
We will use it and check if we don't have the token here.
And then we will navigate back to out.
So this is our here.
So we basically have done the same thing that we reverted.
So if we don't have a token we navigate it back here.
So if we have a token here we'll navigate it to to movie.
So basically that will give us a kind of a use effect is not defined.
Sorry I have to also import use effect in here we have used state but we don't have a use effect.
So it's fine.
Now I can refresh it now.
And since we have that token then we are here in the movies.
But if I will remove that and I'm here in the movies here, if I refresh it, you see, I'm back in
the out because I don't have that Mr..
Mr..
Token here.
I have that it's still not not acting like it if changed now, but if I will refresh it.
You see, I'm in the movie so I can actually go from movies to to authentication there.
But since we have that token, it doesn't mean that we actually use it.
So it is available here in our cookies.
But if you go to our API service, we still have it hardcoded.
So what we will do is we'll replace the hardcoded token from here, from the one that we have in the
cookies.
The way we design our class API with a static methods is we can't really use our cookies here because
this is not allowed.
So it has to be a functional component to use it like that.
So what we will do is we will basically if we want to use that token, we will provide it in as an extra
argument.
So we use the token here.
So what we need to do is we need to pass that token into that method.
So I will change it for lowercase here.
And then we use token here.
So also I will need to provide it like this.
And then I will do that.
Basically for every single function I will ask for extra parameter there just to be provided.
So that means we can have that tokens in different components wherever we use that.
And we'll need to pass that token here.
And that token will be passed to our authorization in there.
So we'll do that for every single method we have in our application.
So this is done I don't use this anymore so I can remove it completely.
Now it required for me to send that token.
I don't need to do send one for login because login doesn't have a token yet.
But for all the rest of this like fetch movies, I will need to do that.
So let's go back here.
We don't use any methods there.
I will close it for now and I can close the rest of the things for.
For now.
What we have is we need to go to our movie list.
This is where we actually.
Use our API.
So we have that API.
And this is where we fetch our movie.
So fetch movies now require a token.
So how can we get that token.
Here basically we are inside a component.
So the same way as we've done it here in the app.js you see we have that token here.
Use cookie.
So we'll need to import cookies inside our movie list.
I can close that.
And also I will need to have that token like this.
And I will put it here.
So basically my token is here and I will need to use a fetch movies.
I will need to do token, and then I will also need to know which one I'm using.
So Mr. Token, basically that's the name of my token.
Basically this is a cookie.
We we name it token.
But this is a basically a cookie.
And I could say this is a cookie.
And then I will pass the cookie Mr. token in there.
So this is one method.
We have another method here.
So I will do exactly the same there.
So we'll put it here.
And I will have remove movie like that.
So we have two methods here from the API.
And for both of them I pass Mr. Token.
So if I will go here and if I will refresh this.
So this is the list of the movies.
And you can see here it has been fetched with my token, despite the fact I don't use the hard coded
one because it is coming now from this.
So we can keep on going and we can replace the rest of them.
So movie list is one.
Then we need to have movie details.
In the movie details we use it here.
So as a last argument we need to also provide that token.
So what we will do is we will repeat the same thing.
So we'll use cookies.
Import that here I will also need to.
Have this.
And once I have this I can provide it as a last argument token.
And this is Mr. Token like that.
And once I have it here I can also include that in the get movies here.
And the last place where we need to do it is in our movie form.
So if we go here we have two different methods, and we also need to provide the token here.
So if I will go back here, I will copy that into movie form.
So we have used cookies and I can also copy that.
In the movie form.
And once I have that token I can pass it as a last argument here.
Token.
Mr..
Token.
So copy that and also put it here as the last argument in that function on our API.
So basically we have a way to get the cookies, that token from the cookies in any component.
And we can pass to this to to the methods there.
So we can see here all of them.
And sorry if you go here all of the the methods that require a token, you need to pass it here as an
argument and then it will be used.
So let's go back to our application and see if everything is working fine as it was.
So I have a list of movie which is good.
I can click on this one and I can change this so if I will update it, it is working fine.
I can also go to the network and see them.
Here is how I can create new movie.
Create movie.
I have a new movie and I can remove it.
And also I can do that.
So everything is working fine.
And now the token is dynamic and it's coming from the cookie.
So if I will have this removed application and if I will remove all cookies, clear cookies from here.
And if I will refresh the page here.
You see, I'm back here and I won't be able to even go back to movies, but I'm not going to be able
to fetch anything from there, because every time I will go to App Root, which is slash movies, then
it will be checked for for that token and it will be kicked out in here.
So at the moment token is dynamic used from our cookies.