1
00:00:01,290 --> 00:00:03,900
‫Next up, let's allow users

2
00:00:03,900 --> 00:00:06,363
‫to log out of the application.

3
00:00:08,100 --> 00:00:09,930
‫So basically, for that,

4
00:00:09,930 --> 00:00:13,530
‫we will just add a small button somewhere here

5
00:00:13,530 --> 00:00:16,350
‫into this header, and then by clicking there,

6
00:00:16,350 --> 00:00:19,203
‫the user will just get logged out.

7
00:00:20,100 --> 00:00:22,290
‫So here in authentication

8
00:00:22,290 --> 00:00:25,060
‫let's actually now create a new component

9
00:00:26,460 --> 00:00:29,380
‫called Logout dot JSX

10
00:00:30,780 --> 00:00:33,120
‫So this is a real simple one,

11
00:00:33,120 --> 00:00:36,693
‫and so there is no need for any pre-written code.

12
00:00:37,620 --> 00:00:41,550
‫So here all we're gonna do is to return a button

13
00:00:41,550 --> 00:00:46,470
‫and for that we have the ButtonIcon component.

14
00:00:46,470 --> 00:00:51,030
‫So for some reason, that's again not being included here.

15
00:00:51,030 --> 00:00:54,153
‫So I will just import this one and then rename it.

16
00:00:56,490 --> 00:00:58,010
‫So ButtonIcon.

17
00:01:02,460 --> 00:01:05,490
‫And so basically this is just a styled component

18
00:01:05,490 --> 00:01:09,993
‫ready to display as the name says, an icon in there.

19
00:01:11,310 --> 00:01:13,470
‫And the one that we want is

20
00:01:13,470 --> 00:01:16,043
‫the H1ArrowRightOnRectangle.

21
00:01:21,270 --> 00:01:23,370
‫So just like this.

22
00:01:23,370 --> 00:01:27,262
‫And then let's come into our header component

23
00:01:27,262 --> 00:01:29,853
‫which should be somewhere here in the UI.

24
00:01:33,000 --> 00:01:34,260
‫Right here.

25
00:01:34,260 --> 00:01:36,240
‫And then let's just include

26
00:01:36,240 --> 00:01:37,743
‫that here for now,

27
00:01:40,170 --> 00:01:41,550
‫so that later we will then

28
00:01:41,550 --> 00:01:44,310
‫actually build this header component.

29
00:01:44,310 --> 00:01:48,180
‫But for now, this is all we need.

30
00:01:48,180 --> 00:01:50,730
‫So this button here will be responsible

31
00:01:50,730 --> 00:01:52,890
‫for logging out the user.

32
00:01:52,890 --> 00:01:55,080
‫And so now let's write the logic

33
00:01:55,080 --> 00:01:57,453
‫that's gonna be responsible for that.

34
00:01:58,500 --> 00:01:59,673
‫So right here,

35
00:02:01,290 --> 00:02:05,760
‫let's first get rid of all this empty space

36
00:02:05,760 --> 00:02:09,990
‫and then here we will create our next function

37
00:02:09,990 --> 00:02:12,123
‫to interact with our API.

38
00:02:13,410 --> 00:02:15,780
‫And this one, as you can imagine

39
00:02:15,780 --> 00:02:18,423
‫is simply gonna be called logout.

40
00:02:19,260 --> 00:02:21,360
‫And this will be really simple

41
00:02:21,360 --> 00:02:24,760
‫because all that we need here is await

42
00:02:26,640 --> 00:02:31,640
‫the supabase client dot auth dot sign out.

43
00:02:34,290 --> 00:02:35,410
‫And then here we can

44
00:02:37,470 --> 00:02:42,470
‫just in case there is some error, store that and throw that.

45
00:02:44,370 --> 00:02:47,850
‫So basically something like this

46
00:02:47,850 --> 00:02:50,040
‫but this doesn't return any data

47
00:02:50,040 --> 00:02:54,720
‫and so therefore there is no need to return anything.

48
00:02:54,720 --> 00:02:59,720
‫And so then as always, we will call this using React Query.

49
00:02:59,880 --> 00:03:04,443
‫And so let's do useLogout dot JS.

50
00:03:05,370 --> 00:03:08,270
‫So export function, useLogout,

51
00:03:11,190 --> 00:03:12,870
‫and then just like logging in,

52
00:03:12,870 --> 00:03:16,740
‫logging out will also be a mutation.

53
00:03:16,740 --> 00:03:19,830
‫So we will receive mutate function

54
00:03:19,830 --> 00:03:21,960
‫called logout

55
00:03:21,960 --> 00:03:25,560
‫and isLoading

56
00:03:25,560 --> 00:03:26,983
‫from useMutation.

57
00:03:30,180 --> 00:03:33,270
‫Then here we mute our mutation function

58
00:03:33,270 --> 00:03:37,383
‫which will just be the logout function that we just created.

59
00:03:38,700 --> 00:03:41,340
‫So for some reason, that's not importing,

60
00:03:41,340 --> 00:03:44,310
‫but yeah, we wrote that correctly.

61
00:03:44,310 --> 00:03:48,550
‫So let's just grab this one here

62
00:03:53,220 --> 00:03:54,370
‫and then let's import

63
00:03:55,470 --> 00:03:59,627
‫logout as logout

64
00:03:59,627 --> 00:04:03,123
‫API, and then here we can use that.

65
00:04:06,180 --> 00:04:10,200
‫Then next, whenever that is actually successful

66
00:04:10,200 --> 00:04:13,410
‫we of course want the user to immediately

67
00:04:13,410 --> 00:04:16,380
‫leave the application, or in other words,

68
00:04:16,380 --> 00:04:20,790
‫we want them to be redirected to the login page.

69
00:04:20,790 --> 00:04:24,723
‫So that's basically always the entry of our application.

70
00:04:25,590 --> 00:04:27,213
‫So once again, we useNavigate.

71
00:04:33,927 --> 00:04:38,927
‫And here let's also then use the replace option set to true.

72
00:04:40,140 --> 00:04:45,140
‫And we should also do the same thing in the login one.

73
00:04:46,140 --> 00:04:47,913
‫So right here.

74
00:04:49,521 --> 00:04:50,520
‫And so with this

75
00:04:50,520 --> 00:04:55,020
‫we then basically erase the place that we were earlier.

76
00:04:55,020 --> 00:04:57,120
‫So otherwise going back,

77
00:04:57,120 --> 00:05:00,840
‫using this back button here is not really gonna work.

78
00:05:00,840 --> 00:05:04,840
‫So we explored that already earlier

79
00:05:05,730 --> 00:05:07,320
‫in some other project.

80
00:05:07,320 --> 00:05:10,380
‫So here we then return logout

81
00:05:10,380 --> 00:05:12,720
‫and isLoading.

82
00:05:12,720 --> 00:05:15,723
‫And with this, everything looks good to me.

83
00:05:16,590 --> 00:05:20,220
‫Well actually there's something else that we should do here

84
00:05:20,220 --> 00:05:22,950
‫which is indeed really important.

85
00:05:22,950 --> 00:05:25,890
‫And that is to remove the current user

86
00:05:25,890 --> 00:05:28,470
‫from the React Query cache.

87
00:05:28,470 --> 00:05:32,580
‫So just logging out, we'll of course remove the user here

88
00:05:32,580 --> 00:05:35,520
‫from local storage and also from the server

89
00:05:35,520 --> 00:05:39,120
‫but they will stay inside the cache.

90
00:05:39,120 --> 00:05:42,360
‫So because we stored it right here.

91
00:05:42,360 --> 00:05:46,410
‫And so if, for some reason, some malicious actor gets access

92
00:05:46,410 --> 00:05:49,350
‫to that, that would be very bad.

93
00:05:49,350 --> 00:05:53,160
‫And so we can actually remove all queries.

94
00:05:53,160 --> 00:05:55,950
‫So actually not just the user, but really

95
00:05:55,950 --> 00:06:00,360
‫all queries that have been accumulated in that cache.

96
00:06:00,360 --> 00:06:04,893
‫And for that, once again, we need the Query client.

97
00:06:08,400 --> 00:06:09,730
‫And so then on there

98
00:06:11,310 --> 00:06:15,090
‫we just call removeQueries.

99
00:06:15,090 --> 00:06:17,460
‫And here, we can specify which one,

100
00:06:17,460 --> 00:06:22,460
‫but here we simply remove all of them now, right?

101
00:06:23,070 --> 00:06:24,900
‫And now all we need to do

102
00:06:24,900 --> 00:06:27,273
‫is to come to our logout component,

103
00:06:29,610 --> 00:06:31,650
‫then receive that.

104
00:06:31,650 --> 00:06:35,500
‫So logout and isLoading

105
00:06:36,600 --> 00:06:37,803
‫from useLogout

106
00:06:41,580 --> 00:06:43,803
‫let's bring that in here as always.

107
00:06:46,680 --> 00:06:48,690
‫Not as always but whenever

108
00:06:48,690 --> 00:06:51,093
‫this doesn't work for some reason.

109
00:06:57,330 --> 00:06:59,100
‫And there we go.

110
00:06:59,100 --> 00:07:01,710
‫So now, first, the disabled state,

111
00:07:01,710 --> 00:07:04,770
‫which is gonna be isLoading.

112
00:07:04,770 --> 00:07:06,693
‫And then of course,

113
00:07:07,590 --> 00:07:12,030
‫the onClick handler which is just logout.

114
00:07:12,030 --> 00:07:14,400
‫And then here we can do something nice

115
00:07:14,400 --> 00:07:18,210
‫which is to again, use our small spinner.

116
00:07:18,210 --> 00:07:20,910
‫So if we are not loading,

117
00:07:20,910 --> 00:07:23,640
‫then just display this regular icon

118
00:07:23,640 --> 00:07:27,283
‫and otherwise, we want our SpinnerMini.

119
00:07:30,990 --> 00:07:33,407
‫Okay, so let's test this now.

120
00:07:37,620 --> 00:07:40,020
‫So sometimes it's taking some time.

121
00:07:40,020 --> 00:07:43,740
‫So basically that was loading the user in the background

122
00:07:43,740 --> 00:07:46,950
‫but now watch what happens as we click here.

123
00:07:46,950 --> 00:07:49,590
‫So we expect this one to be removed

124
00:07:49,590 --> 00:07:53,310
‫and then, also the user to disappear from the Query

125
00:07:53,310 --> 00:07:58,310
‫and us to be reloaded or redirected to the login page.

126
00:07:59,490 --> 00:08:02,463
‫So let's click here and see if all of that happens.

127
00:08:03,390 --> 00:08:06,420
‫And indeed, there we are.

128
00:08:06,420 --> 00:08:09,420
‫So the user is gone, the data is gone from here

129
00:08:09,420 --> 00:08:12,960
‫and we are back in the login page.

130
00:08:12,960 --> 00:08:15,300
‫And so if now we were trying to access,

131
00:08:15,300 --> 00:08:18,732
‫for example, that dashboard,

132
00:08:18,732 --> 00:08:20,760
‫then that wouldn't work,

133
00:08:20,760 --> 00:08:25,320
‫and we would again get redirected to the login page.

134
00:08:25,320 --> 00:08:27,990
‫Now, okay, so another piece

135
00:08:27,990 --> 00:08:32,990
‫of the authorization and authentication part is implemented.

136
00:08:33,240 --> 00:08:36,360
‫And so next up comes another really important part

137
00:08:36,360 --> 00:08:40,920
‫which is to actually sign users up to our application.

138
00:08:40,920 --> 00:08:45,460
‫So instead of us having to create them here manually

139
00:08:46,410 --> 00:08:47,784
‫like we did initially.

140
00:08:47,784 --> 00:08:49,440
‫So of course this is not

141
00:08:49,440 --> 00:08:52,260
‫how it's going to work in the real application.

142
00:08:52,260 --> 00:08:54,690
‫And so we will sign users up

143
00:08:54,690 --> 00:08:57,453
‫in our application in the next lecture.