And I also want to show you how the Axios interceptors work just in case you ever want to use it in
your own application.
And I'm going to showcase that by implementing logout functionality if we get 401.
Response.
Remember, 401 was bad authentication.
So first, let me just showcase I'm going to log out in this case, I'm going to go with my demo user.
Explore the app.
Okay, good.
I do want to inspect.
The network, though.
And notice here, if I go to a profile, remember, we're not going to be able to do anything correct.
Since this is a demo user and such functionality is forbidden to a demo user.
And at the moment I'm getting 400, so that's a bad request.
However, what happens if I go to my application?
More specifically, I go to the cookies and then clean everything out and now make the request.
So I still get back the error, but this one is 401.
So this one is different.
This means that, well, there's something wrong with my JWT or cookie and therefore, in my opinion,
the user should be immediately logged out since there's really no point for the user to stay in the
application.
Now, like I said, we're going to use Axios interceptors, which is sort of like a middleware.
So essentially you can think of it as middleware.
Now you can set it up on a default.
Axios, let's say if you import Axios and then you can right away attach it, or you can also do it
to the custom instance, which of course is going to be our case.
So we'll go with custom fetch dot interceptors and then we have a few options we can either go with
request, so that is outgoing request.
And then also notice we have the response one.
So that's the response that's coming in and the syntax is used.
So we go with response dot use.
And then here we pass in two functions.
Now one is going to be if the response is successful and here we simply want to return the response.
And the second one is going to be for the error.
Now, if there is an error, then we want to implement some logic.
What logic?
Well, that's the one that we'll set it up right now.
First of all, let's navigate back to the dashboard layout page and I'm going to set up one more state
value.
And in my case, I'm going to call this is auth error.
Again, I'm looking for that 401.
So let's go with is auth error.
And then we also have a set function in this case I'm going to go set is auth error and we'll set it
equal to use state and then the default value will be false.
Then we want to set up those interceptors.
And in my case, I think I'm going to do it right after the logout user.
Now I'll still have to set up the user, but for now let's not worry about it.
So we're going to go here with custom fetch.
Since I'm already using it in the logout user, I don't have to import anything.
Then we go here with dot and then interceptors.
Again, you can go with the request with the outgoing request.
In our case, we're interested in the response.
We want to go with user.
And like I said, we want to provide over here two functions.
So that's the first function.
And then we also have the second one.
Now, as far as the first one, pretty straightforward.
We just go with response and then I'm just going to return the response.
So we're not going to do anything if everything is correct.
Now, if there is an error.
We actually have access to the error.
And effectively I'm just going to set up over here a condition I'll say if error, then I'm going to
chain it since again, we might get some other error and the properties are not going to be there in
that case, of course.
So if error, response and then status.
Is equal to 401.
What do I want to do?
Well, then I'm going to go set is auth error and I'll actually set it equal to true.
Now, regardless whether it is a 401 error or other one.
We want to go here with return, then promise and we want to provide a reject and we'll pass in the
error.
So essentially in this case, rest of the functionality that we have in the pages or in components still
works.
So we still pass here the error that we're getting back basically from our request.
Okay, good.
And now let's set up the use effect where I'm going to run some kind of functionality based on auth
error.
And if it's true, then essentially we want to log out the user.
Let's go here with use effect I believe.
Auto import worked.
Yep.
Notice over here I have my use effect.
So now let's pass in the callback function here.
Then we're going to invoke this when the application loads and also when is auth error changes.
And now I'm going to go with my condition.
I'll say if is auth error is false, well then I want to simply return.
Now if it's true, then we're going to go with log out user a function we already have over here.
So now let's save, let's navigate back and let's test it out.
So I'm going to go again with my demo one.
I'll navigate to a profile.
I'll try to make some kind of request.
Notice I'm just getting back 400.
All fine.
But if I go to application again, my cookies, if I clean it out, and now I make a request, remember?
I'm not sending back the JWT.
Now, of course I have authentication valid and I'm successfully logging out the user.