1
00:00:00,050 --> 00:00:06,440
And I also want to show you how the Axios interceptors work just in case you ever want to use it in

2
00:00:06,440 --> 00:00:07,790
your own application.

3
00:00:08,300 --> 00:00:14,960
And I'm going to showcase that by implementing logout functionality if we get 401.

4
00:00:15,470 --> 00:00:16,379
Response.

5
00:00:16,400 --> 00:00:20,390
Remember, 401 was bad authentication.

6
00:00:20,390 --> 00:00:27,350
So first, let me just showcase I'm going to log out in this case, I'm going to go with my demo user.

7
00:00:28,020 --> 00:00:28,750
Explore the app.

8
00:00:28,770 --> 00:00:29,570
Okay, good.

9
00:00:29,580 --> 00:00:31,440
I do want to inspect.

10
00:00:32,119 --> 00:00:33,470
The network, though.

11
00:00:33,800 --> 00:00:39,620
And notice here, if I go to a profile, remember, we're not going to be able to do anything correct.

12
00:00:39,620 --> 00:00:46,220
Since this is a demo user and such functionality is forbidden to a demo user.

13
00:00:47,010 --> 00:00:50,370
And at the moment I'm getting 400, so that's a bad request.

14
00:00:50,400 --> 00:00:53,300
However, what happens if I go to my application?

15
00:00:53,310 --> 00:00:58,870
More specifically, I go to the cookies and then clean everything out and now make the request.

16
00:00:58,890 --> 00:01:03,060
So I still get back the error, but this one is 401.

17
00:01:03,210 --> 00:01:04,560
So this one is different.

18
00:01:04,560 --> 00:01:12,060
This means that, well, there's something wrong with my JWT or cookie and therefore, in my opinion,

19
00:01:12,090 --> 00:01:18,720
the user should be immediately logged out since there's really no point for the user to stay in the

20
00:01:19,110 --> 00:01:20,130
application.

21
00:01:20,160 --> 00:01:26,760
Now, like I said, we're going to use Axios interceptors, which is sort of like a middleware.

22
00:01:26,760 --> 00:01:29,310
So essentially you can think of it as middleware.

23
00:01:29,340 --> 00:01:31,470
Now you can set it up on a default.

24
00:01:31,470 --> 00:01:37,380
Axios, let's say if you import Axios and then you can right away attach it, or you can also do it

25
00:01:37,380 --> 00:01:40,860
to the custom instance, which of course is going to be our case.

26
00:01:40,860 --> 00:01:47,210
So we'll go with custom fetch dot interceptors and then we have a few options we can either go with

27
00:01:47,230 --> 00:01:49,840
request, so that is outgoing request.

28
00:01:49,840 --> 00:01:52,750
And then also notice we have the response one.

29
00:01:52,750 --> 00:01:56,920
So that's the response that's coming in and the syntax is used.

30
00:01:56,920 --> 00:01:58,990
So we go with response dot use.

31
00:01:59,020 --> 00:02:01,180
And then here we pass in two functions.

32
00:02:01,210 --> 00:02:07,090
Now one is going to be if the response is successful and here we simply want to return the response.

33
00:02:07,090 --> 00:02:10,240
And the second one is going to be for the error.

34
00:02:10,270 --> 00:02:14,230
Now, if there is an error, then we want to implement some logic.

35
00:02:14,230 --> 00:02:15,100
What logic?

36
00:02:15,100 --> 00:02:17,680
Well, that's the one that we'll set it up right now.

37
00:02:17,680 --> 00:02:25,900
First of all, let's navigate back to the dashboard layout page and I'm going to set up one more state

38
00:02:25,900 --> 00:02:26,590
value.

39
00:02:26,770 --> 00:02:30,160
And in my case, I'm going to call this is auth error.

40
00:02:30,190 --> 00:02:32,560
Again, I'm looking for that 401.

41
00:02:32,740 --> 00:02:36,160
So let's go with is auth error.

42
00:02:36,160 --> 00:02:43,990
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

43
00:02:43,990 --> 00:02:48,340
equal to use state and then the default value will be false.

44
00:02:48,990 --> 00:02:51,270
Then we want to set up those interceptors.

45
00:02:51,270 --> 00:02:55,380
And in my case, I think I'm going to do it right after the logout user.

46
00:02:55,410 --> 00:02:59,700
Now I'll still have to set up the user, but for now let's not worry about it.

47
00:02:59,700 --> 00:03:01,750
So we're going to go here with custom fetch.

48
00:03:01,770 --> 00:03:05,850
Since I'm already using it in the logout user, I don't have to import anything.

49
00:03:06,120 --> 00:03:09,480
Then we go here with dot and then interceptors.

50
00:03:09,600 --> 00:03:12,810
Again, you can go with the request with the outgoing request.

51
00:03:12,810 --> 00:03:15,480
In our case, we're interested in the response.

52
00:03:15,570 --> 00:03:16,830
We want to go with user.

53
00:03:16,830 --> 00:03:21,420
And like I said, we want to provide over here two functions.

54
00:03:21,970 --> 00:03:23,800
So that's the first function.

55
00:03:23,800 --> 00:03:26,520
And then we also have the second one.

56
00:03:26,560 --> 00:03:29,500
Now, as far as the first one, pretty straightforward.

57
00:03:29,500 --> 00:03:33,700
We just go with response and then I'm just going to return the response.

58
00:03:33,700 --> 00:03:36,880
So we're not going to do anything if everything is correct.

59
00:03:36,910 --> 00:03:38,620
Now, if there is an error.

60
00:03:39,340 --> 00:03:42,100
We actually have access to the error.

61
00:03:42,100 --> 00:03:50,320
And effectively I'm just going to set up over here a condition I'll say if error, then I'm going to

62
00:03:50,320 --> 00:03:56,590
chain it since again, we might get some other error and the properties are not going to be there in

63
00:03:56,620 --> 00:03:57,550
that case, of course.

64
00:03:57,550 --> 00:04:01,000
So if error, response and then status.

65
00:04:01,760 --> 00:04:04,810
Is equal to 401.

66
00:04:04,820 --> 00:04:05,900
What do I want to do?

67
00:04:05,900 --> 00:04:11,510
Well, then I'm going to go set is auth error and I'll actually set it equal to true.

68
00:04:11,540 --> 00:04:15,740
Now, regardless whether it is a 401 error or other one.

69
00:04:15,740 --> 00:04:23,540
We want to go here with return, then promise and we want to provide a reject and we'll pass in the

70
00:04:23,540 --> 00:04:23,990
error.

71
00:04:23,990 --> 00:04:29,330
So essentially in this case, rest of the functionality that we have in the pages or in components still

72
00:04:29,330 --> 00:04:29,960
works.

73
00:04:29,960 --> 00:04:36,770
So we still pass here the error that we're getting back basically from our request.

74
00:04:36,890 --> 00:04:37,730
Okay, good.

75
00:04:37,730 --> 00:04:45,800
And now let's set up the use effect where I'm going to run some kind of functionality based on auth

76
00:04:45,830 --> 00:04:46,340
error.

77
00:04:46,340 --> 00:04:51,920
And if it's true, then essentially we want to log out the user.

78
00:04:52,190 --> 00:04:55,040
Let's go here with use effect I believe.

79
00:04:55,920 --> 00:04:57,270
Auto import worked.

80
00:04:57,300 --> 00:04:57,940
Yep.

81
00:04:57,960 --> 00:04:59,940
Notice over here I have my use effect.

82
00:05:00,030 --> 00:05:02,730
So now let's pass in the callback function here.

83
00:05:03,810 --> 00:05:11,630
Then we're going to invoke this when the application loads and also when is auth error changes.

84
00:05:11,640 --> 00:05:13,530
And now I'm going to go with my condition.

85
00:05:13,530 --> 00:05:19,530
I'll say if is auth error is false, well then I want to simply return.

86
00:05:19,740 --> 00:05:27,070
Now if it's true, then we're going to go with log out user a function we already have over here.

87
00:05:27,090 --> 00:05:33,480
So now let's save, let's navigate back and let's test it out.

88
00:05:33,480 --> 00:05:36,750
So I'm going to go again with my demo one.

89
00:05:36,780 --> 00:05:38,460
I'll navigate to a profile.

90
00:05:39,570 --> 00:05:41,820
I'll try to make some kind of request.

91
00:05:41,850 --> 00:05:44,310
Notice I'm just getting back 400.

92
00:05:44,700 --> 00:05:45,660
All fine.

93
00:05:45,660 --> 00:05:51,930
But if I go to application again, my cookies, if I clean it out, and now I make a request, remember?

94
00:05:52,750 --> 00:05:54,790
I'm not sending back the JWT.

95
00:05:55,060 --> 00:06:00,850
Now, of course I have authentication valid and I'm successfully logging out the user.