1
00:00:03,000 --> 00:00:05,526
We wrote this "user" API route

2
00:00:05,526 --> 00:00:09,399
that reads the JSON web token sent as a cookie

3
00:00:09,399 --> 00:00:13,525
and passes it to the CMS to get the user details.

4
00:00:14,194 --> 00:00:15,828
What we want to do now

5
00:00:15,828 --> 00:00:19,467
is call that API route from our NavBar component,

6
00:00:20,042 --> 00:00:22,296
so that we can get a real value

7
00:00:22,296 --> 00:00:24,114
for this "user" variable.

8
00:00:24,687 --> 00:00:26,180
Let's call "useState"

9
00:00:26,180 --> 00:00:28,526
to turn it into a state variable.

10
00:00:29,097 --> 00:00:30,972
And the hook returns an array

11
00:00:30,972 --> 00:00:33,946
where the second element is a setter function.

12
00:00:34,510 --> 00:00:36,360
Now we can call "useEffect"

13
00:00:36,360 --> 00:00:39,991
to call the API as soon as this component is mounted.

14
00:00:40,559 --> 00:00:42,401
But let's make sure to pass

15
00:00:42,401 --> 00:00:44,515
an empty array as dependencies,

16
00:00:44,515 --> 00:00:47,107
because we only want this to run once.

17
00:00:47,743 --> 00:00:51,411
And here we can call our "fetchJson" function

18
00:00:51,411 --> 00:00:53,041
passing "/api/user",

19
00:00:53,041 --> 00:00:56,138
that's the path for our new API route.

20
00:00:56,801 --> 00:00:59,161
Now, "fetchJson" returns a Promise

21
00:00:59,161 --> 00:01:02,145
so let's create an anonymous async function

22
00:01:02,145 --> 00:01:03,949
and immediately invoke it,

23
00:01:04,587 --> 00:01:06,825
so here we can get the result,

24
00:01:06,825 --> 00:01:09,660
that's a "user" object, using "await".

25
00:01:10,234 --> 00:01:13,499
At this point we can update our state variable

26
00:01:13,499 --> 00:01:14,989
by calling "setUser".

27
00:01:14,989 --> 00:01:16,905
So what will happen is that

28
00:01:16,905 --> 00:01:19,531
when this NavBar component is created

29
00:01:19,531 --> 00:01:22,157
"user" will initially be "undefined",

30
00:01:22,157 --> 00:01:24,428
because we're calling "useState"

31
00:01:24,428 --> 00:01:26,841
without passing any initial value.

32
00:01:26,841 --> 00:01:29,892
But then the effect function will be called

33
00:01:29,892 --> 00:01:32,376
and the "user" variable will be set

34
00:01:32,376 --> 00:01:35,144
to the value returned by the API route.

35
00:01:36,283 --> 00:01:39,492
That's assuming that the API request succeeds.

36
00:01:39,992 --> 00:01:42,972
But it's also possible that it might fail,

37
00:01:42,972 --> 00:01:45,385
because if we're not authenticated

38
00:01:45,385 --> 00:01:47,372
it will return a 401 status.

39
00:01:48,014 --> 00:01:50,538
So this is something we need to handle in our code.

40
00:01:51,038 --> 00:01:52,409
Try fetching the user,

41
00:01:53,304 --> 00:01:55,728
but if that fails then, what should we do?

42
00:01:56,737 --> 00:01:58,279
If we get to this point

43
00:01:58,279 --> 00:02:00,694
it simply means we're not signed in,

44
00:02:00,694 --> 00:02:03,310
so we don't really need to do anything,

45
00:02:03,310 --> 00:02:05,993
because that's the initial state anyway.

46
00:02:06,695 --> 00:02:10,092
Ok. Now, to make sure this is working as we hope

47
00:02:10,092 --> 00:02:11,934
let's add a log statement,

48
00:02:11,934 --> 00:02:14,341
printing the current "user" state.

49
00:02:14,983 --> 00:02:16,059
Now we can save,

50
00:02:16,059 --> 00:02:17,338
and go and test it.

51
00:02:19,416 --> 00:02:21,883
We can see in the browser console

52
00:02:21,883 --> 00:02:24,649
that "user" is initially "undefined",

53
00:02:24,649 --> 00:02:27,416
then there's a request to "/api/user"

54
00:02:27,416 --> 00:02:30,406
but that failed with "401 Unauthorized",

55
00:02:30,406 --> 00:02:33,322
so the "user" variable was not updated.

56
00:02:34,122 --> 00:02:36,382
As a result we're not authenticated,

57
00:02:36,882 --> 00:02:40,542
and in fact the NavBar shows a "Sign In" link.

58
00:02:41,042 --> 00:02:43,127
Now, let's go and sign in,

59
00:02:43,127 --> 00:02:44,972
as "alice@example.com",

60
00:02:45,552 --> 00:02:47,821
with password "Alice123".

61
00:02:47,821 --> 00:02:48,456
Submit!

62
00:02:49,218 --> 00:02:51,281
And in the logs we can see that

63
00:02:51,281 --> 00:02:53,276
the sign in request succeeded,

64
00:02:53,276 --> 00:02:56,003
and we received the correct user details.

65
00:02:56,637 --> 00:02:58,802
But in this page nothing changed.

66
00:02:58,802 --> 00:03:01,165
We should probably redirect the user

67
00:03:01,165 --> 00:03:03,658
to a different page after they log in.

68
00:03:04,289 --> 00:03:07,331
But if we manually go back to the HomePage for now,

69
00:03:07,831 --> 00:03:11,003
you can see that at this stage we are logged in,

70
00:03:11,003 --> 00:03:12,060
as user "Alice".

71
00:03:12,626 --> 00:03:14,265
Even if we reload this page,

72
00:03:15,292 --> 00:03:17,069
we will still be logged in,

73
00:03:17,069 --> 00:03:19,175
because we set a session cookie,

74
00:03:19,175 --> 00:03:22,531
that will be remembered until we close the browser.

75
00:03:23,162 --> 00:03:25,743
And in this case the "user" variable

76
00:03:25,743 --> 00:03:28,468
is still "undefined" at the beginning,

77
00:03:28,468 --> 00:03:31,407
but then we receive the data from the API

78
00:03:31,407 --> 00:03:34,059
and "user" is updated with that data.

79
00:03:34,774 --> 00:03:36,278
So this is working ok.

80
00:03:36,778 --> 00:03:39,976
Now, let's do that thing we said we wanted to do,

81
00:03:39,976 --> 00:03:42,195
that is redirect after signing in.

82
00:03:42,760 --> 00:03:44,987
After we get a successful response

83
00:03:44,987 --> 00:03:47,542
we could send the user to the HomePage.

84
00:03:48,107 --> 00:03:50,966
To do that we'll need to use the Next.js router,

85
00:03:51,466 --> 00:03:55,131
that we can access by importing the "useRouter" hook

86
00:03:55,131 --> 00:03:57,245
from the "next/router" module.

87
00:03:59,099 --> 00:04:02,644
So we can call this hook to get the "router" object,

88
00:04:03,432 --> 00:04:05,198
and once we have the "router"

89
00:04:05,198 --> 00:04:07,085
we can use it after signing in.

90
00:04:07,645 --> 00:04:09,570
This "router" object provides

91
00:04:09,570 --> 00:04:12,358
a number of methods to do with navigation.

92
00:04:12,924 --> 00:04:14,880
To send the user to another page

93
00:04:14,880 --> 00:04:16,406
we can simply call "push"

94
00:04:16,968 --> 00:04:18,277
and pass the path,

95
00:04:18,277 --> 00:04:20,386
that in this case is just "/"

96
00:04:20,386 --> 00:04:22,204
which means the HomePage.

97
00:04:22,850 --> 00:04:24,479
Let's see if this works.

98
00:04:24,479 --> 00:04:27,264
To test this we'll need to log out first,

99
00:04:27,264 --> 00:04:29,029
but we haven't implemented

100
00:04:29,029 --> 00:04:31,135
the Sign Out functionality yet.

101
00:04:31,838 --> 00:04:35,260
So what we could do is open the Developer Tools

102
00:04:35,260 --> 00:04:37,953
and manually delete the "jwt" cookie.

103
00:04:38,526 --> 00:04:40,180
If there is no cookie then

104
00:04:40,180 --> 00:04:41,772
we are not authenticated.

105
00:04:42,692 --> 00:04:44,901
We'll need to refresh the application though.

106
00:04:45,858 --> 00:04:48,239
Ok, now we can try signing in again,

107
00:04:48,239 --> 00:04:50,487
with the usual email and password,

108
00:04:51,290 --> 00:04:52,640
When we click "Sign In"

109
00:04:52,640 --> 00:04:54,224
we're sent to the HomePage,

110
00:04:54,783 --> 00:04:57,100
and the NavBar also shows that

111
00:04:57,100 --> 00:04:59,262
we are signed in as "Alice".

112
00:04:59,262 --> 00:05:01,425
The NavBar will try fetching

113
00:05:01,425 --> 00:05:04,360
the user data every time it's mounted,

114
00:05:05,092 --> 00:05:07,036
and that happens on every page

115
00:05:07,036 --> 00:05:10,341
as we could see if we look at the network requests.

116
00:05:10,906 --> 00:05:13,260
Here I have "XHR" selected

117
00:05:13,260 --> 00:05:16,700
and let's filter "/api" requests only.

118
00:05:17,291 --> 00:05:19,429
If we go and open another page,

119
00:05:19,429 --> 00:05:20,947
like the first product

120
00:05:20,947 --> 00:05:23,637
you can see in the Developer Tools that

121
00:05:23,637 --> 00:05:26,811
this caused a new "user" request to be loaded.

122
00:05:27,518 --> 00:05:29,745
And if we go back to the HomePage,

123
00:05:29,745 --> 00:05:32,365
again this makes another "user" request.

124
00:05:32,931 --> 00:05:35,024
Every time we click on a page

125
00:05:35,024 --> 00:05:37,695
the NavBar component will be mounted,

126
00:05:37,695 --> 00:05:39,788
fetching the user data again.

127
00:05:39,788 --> 00:05:41,882
In the next section we'll see

128
00:05:41,882 --> 00:05:43,903
how to cache the "user" data

129
00:05:43,903 --> 00:05:47,441
so it doesn't need to be re-requested every time.

130
00:05:48,302 --> 00:05:50,596
But this approach works fine for now,

131
00:05:50,596 --> 00:05:52,952
what we're doing in the NavBar I mean.

132
00:05:53,515 --> 00:05:56,990
We're making the API request inside "useEffect",

133
00:05:56,990 --> 00:05:59,163
so we'll get fresh "user" data

134
00:05:59,163 --> 00:06:01,842
every time this component is mounted.