1
00:00:01,170 --> 00:00:02,970
‫Now before we can actually

2
00:00:02,970 --> 00:00:05,520
‫go build that sign-up feature,

3
00:00:05,520 --> 00:00:09,720
‫we first need to fix a very important bug that we have left

4
00:00:09,720 --> 00:00:13,383
‫in our authentication and authorization code.

5
00:00:14,880 --> 00:00:18,360
‫And let me start by showing you that bug.

6
00:00:18,360 --> 00:00:21,930
‫So if we just log out and then log in,

7
00:00:21,930 --> 00:00:24,540
‫everything is gonna work just fine.

8
00:00:24,540 --> 00:00:29,160
‫And notice how here we don't have anything in our cache now,

9
00:00:29,160 --> 00:00:31,170
‫so this works just great.

10
00:00:31,170 --> 00:00:34,680
‫But watch what happens when we're not logged in

11
00:00:34,680 --> 00:00:38,823
‫and then we try to just access the page like this.

12
00:00:39,659 --> 00:00:41,160
‫So in the root URL.

13
00:00:41,160 --> 00:00:43,320
‫So what happens in this case is

14
00:00:43,320 --> 00:00:46,950
‫that we get immediately redirected to the login page,

15
00:00:46,950 --> 00:00:50,910
‫and we also then get this user in our cache,

16
00:00:50,910 --> 00:00:53,823
‫which is just bull right now.

17
00:00:55,112 --> 00:00:56,400
‫And the reason for this is that

18
00:00:56,400 --> 00:00:59,430
‫if we try to access the root URL,

19
00:00:59,430 --> 00:01:03,600
‫basically what we're accessing is this dashboard here.

20
00:01:03,600 --> 00:01:08,190
‫But this dashboard is of course inside the protected route.

21
00:01:08,190 --> 00:01:11,700
‫And so therefore if we are not authenticated,

22
00:01:11,700 --> 00:01:16,020
‫then we are immediately redirected to the login.

23
00:01:16,020 --> 00:01:17,040
‫Now that check,

24
00:01:17,040 --> 00:01:19,890
‫whether we are authenticated or not,

25
00:01:19,890 --> 00:01:22,180
‫happens here inside useUser,

26
00:01:24,751 --> 00:01:27,153
‫which will call this function, getCurrentUser.

27
00:01:28,260 --> 00:01:29,730
‫So this one right here,

28
00:01:29,730 --> 00:01:33,990
‫which will return null if there is currently no session.

29
00:01:33,990 --> 00:01:37,500
‫Or in other words if there is no logged in user.

30
00:01:37,500 --> 00:01:42,500
‫And so this null here is that null that we get right here.

31
00:01:43,230 --> 00:01:46,140
‫Now all of this is not the problem.

32
00:01:46,140 --> 00:01:48,510
‫So this is not the bug itself,

33
00:01:48,510 --> 00:01:50,880
‫but it's important to understand the bug

34
00:01:50,880 --> 00:01:53,643
‫that we do have here in useLogin.

35
00:01:54,720 --> 00:01:59,130
‫And so the bug that we have here is this line of code.

36
00:01:59,130 --> 00:02:02,160
‫So here it should not be setQueriesData,

37
00:02:02,160 --> 00:02:05,040
‫but actually setQueryData.

38
00:02:05,040 --> 00:02:08,433
‫And also the user that we have here is wrong.

39
00:02:09,300 --> 00:02:11,940
‫So let me actually log that user here

40
00:02:11,940 --> 00:02:15,240
‫to the console so we can check it out later.

41
00:02:15,240 --> 00:02:19,440
‫But the big problem that we have here is that since here,

42
00:02:19,440 --> 00:02:22,770
‫we are not adding the user to the cache,

43
00:02:22,770 --> 00:02:25,110
‫because here we have the wrong function,

44
00:02:25,110 --> 00:02:28,470
‫then here inside of useUser,

45
00:02:28,470 --> 00:02:31,980
‫this user that is then read from the cache

46
00:02:31,980 --> 00:02:35,370
‫because it has the same key will just be null.

47
00:02:35,370 --> 00:02:40,110
‫And so then here we have null.role==="authenticated"

48
00:02:40,110 --> 00:02:42,270
‫which will always be false

49
00:02:42,270 --> 00:02:44,940
‫because user will always be false.

50
00:02:44,940 --> 00:02:46,260
‫And so on false,

51
00:02:46,260 --> 00:02:48,813
‫we of course don't have the role property.

52
00:02:49,980 --> 00:02:52,710
‫And therefore even after here,

53
00:02:52,710 --> 00:02:55,500
‫we basically successfully log in,

54
00:02:55,500 --> 00:03:00,000
‫this isAuthenticated state will still not change to true.

55
00:03:00,000 --> 00:03:03,300
‫And so therefore we are then not redirected

56
00:03:03,300 --> 00:03:04,860
‫to the content itself.

57
00:03:04,860 --> 00:03:07,053
‫So basically to the dashboard.

58
00:03:08,820 --> 00:03:09,653
‫All right.

59
00:03:10,530 --> 00:03:15,530
‫Let me just log in here again just so we can see that user.

60
00:03:17,130 --> 00:03:19,290
‫And so now it did actually work.

61
00:03:19,290 --> 00:03:20,850
‫And the reason for that is

62
00:03:20,850 --> 00:03:24,090
‫that I guess the five minutes have passed,

63
00:03:24,090 --> 00:03:26,340
‫after which React Query automatically

64
00:03:26,340 --> 00:03:28,800
‫deletes all entries here.

65
00:03:28,800 --> 00:03:32,010
‫So probably we didn't have the user there anymore

66
00:03:32,010 --> 00:03:35,790
‫after those five minutes, and so that's why this worked.

67
00:03:35,790 --> 00:03:38,850
‫But anyway, here I just wanted to show you that the user

68
00:03:38,850 --> 00:03:42,720
‫that we are adding to React cache is actually wrong.

69
00:03:42,720 --> 00:03:46,410
‫Because we have this object which contains

70
00:03:46,410 --> 00:03:48,000
‫both the session and the user.

71
00:03:48,000 --> 00:03:50,490
‫So this is not what we want.

72
00:03:50,490 --> 00:03:55,490
‫So let's just log out again. Let's come here again.

73
00:03:57,040 --> 00:03:58,990
‫And so now we will be able to see again

74
00:03:59,861 --> 00:04:01,440
‫that this doesn't work indeed.

75
00:04:01,440 --> 00:04:03,600
‫And so after all this talk,

76
00:04:03,600 --> 00:04:05,970
‫which I think is actually pretty important

77
00:04:05,970 --> 00:04:09,420
‫for you to understand what is actually going on here,

78
00:04:09,420 --> 00:04:12,063
‫let's now finally fix this bug.

79
00:04:13,080 --> 00:04:18,080
‫So here in useLogin, here what we want is setQueryData.

80
00:04:23,040 --> 00:04:26,160
‫So just like this.

81
00:04:26,160 --> 00:04:30,303
‫And then here, what we want is user.user.

82
00:04:34,860 --> 00:04:37,113
‫And so let's reload this.

83
00:04:38,370 --> 00:04:43,260
‫Let's then recreate the situation, and well,

84
00:04:43,260 --> 00:04:44,913
‫I guess we have to log out again.

85
00:04:49,110 --> 00:04:50,430
‫And so here, again,

86
00:04:50,430 --> 00:04:52,740
‫we have that initial situation where here,

87
00:04:52,740 --> 00:04:54,780
‫the user is set to null,

88
00:04:54,780 --> 00:04:56,520
‫which again is not the problem,

89
00:04:56,520 --> 00:04:59,340
‫but the problem is the one that we just fixed.

90
00:04:59,340 --> 00:05:01,983
‫And so now that's working great.

91
00:05:02,820 --> 00:05:06,780
‫Now okay, so hopefully that made sense to you.

92
00:05:06,780 --> 00:05:11,040
‫And as always, I made sure to include this bug here

93
00:05:11,040 --> 00:05:13,830
‫in this video because bugs like this

94
00:05:13,830 --> 00:05:17,220
‫really happen all the time in web development.

95
00:05:17,220 --> 00:05:21,120
‫And I believe it's very important to show you this reality

96
00:05:21,120 --> 00:05:25,500
‫and how we can go through our code in order to fix it.

97
00:05:25,500 --> 00:05:27,690
‫But anyway, with that being said,

98
00:05:27,690 --> 00:05:32,133
‫let's now finally implement our sign-up functionality.