1
00:00:02,000 --> 00:00:04,000
So let's start on the front end.

2
00:00:04,000 --> 00:00:07,000
And let's start utilizing the answer to the question

3
00:00:07,000 --> 00:00:11,000
whether a user is authenticated or not there.

4
00:00:11,000 --> 00:00:14,000
For example, I wanna make sure that the options

5
00:00:14,000 --> 00:00:16,000
in the header change based

6
00:00:16,000 --> 00:00:20,000
on whether we are authenticated or not.

7
00:00:20,000 --> 00:00:24,000
And again, Next.js makes that pretty easy for us.

8
00:00:24,000 --> 00:00:28,000
It is worth noting that after we locked in successfully,

9
00:00:28,000 --> 00:00:30,000
Next.js added a cookie.

10
00:00:30,000 --> 00:00:32,000
We can see this in the browser DevTools.

11
00:00:32,000 --> 00:00:34,000
If we go to application,

12
00:00:34,000 --> 00:00:37,000
cookies and select our domain.

13
00:00:37,000 --> 00:00:39,000
Here we see some cookies that were set

14
00:00:39,000 --> 00:00:43,000
and these are cookies which are generated

15
00:00:43,000 --> 00:00:46,000
and managed by Next.js.

16
00:00:46,000 --> 00:00:48,000
For example this session token

17
00:00:48,000 --> 00:00:51,000
is this Jason web token in the end.

18
00:00:52,000 --> 00:00:55,000
That was set automatically by Next.js

19
00:00:55,000 --> 00:00:58,000
when we logged in successfully.

20
00:00:58,000 --> 00:01:03,000
And it will also use that token automatically for us,

21
00:01:03,000 --> 00:01:06,000
when we try to change what we see on the screen,

22
00:01:06,000 --> 00:01:11,000
or when we try to send requests to protected resources.

23
00:01:11,000 --> 00:01:13,000
For example we can get the answer

24
00:01:13,000 --> 00:01:16,000
to whether the user is locked in or not,

25
00:01:16,000 --> 00:01:20,000
by finding out whether it's such a valid token exists.

26
00:01:20,000 --> 00:01:22,000
And we could come up with some code

27
00:01:22,000 --> 00:01:25,000
that allows us to do that manually though

28
00:01:25,000 --> 00:01:27,000
that code would involve that we need

29
00:01:27,000 --> 00:01:30,000
to send that cookie to the server

30
00:01:30,000 --> 00:01:34,000
and let the server decide whether it's valid or not.

31
00:01:34,000 --> 00:01:37,000
And hence, it's good that we don't have to do that.

32
00:01:37,000 --> 00:01:38,000
Instead if you wanna find out,

33
00:01:38,000 --> 00:01:40,000
if the user using this page

34
00:01:40,000 --> 00:01:43,000
at the moment is authenticated or not,

35
00:01:43,000 --> 00:01:47,000
Next.js gives us a convenient way of doing that.

36
00:01:47,000 --> 00:01:49,000
Let's say in our components,

37
00:01:49,000 --> 00:01:51,000
in the main navigation component,

38
00:01:51,000 --> 00:01:54,000
here I wanna show profile only

39
00:01:54,000 --> 00:01:57,000
if the user is authenticated.

40
00:01:57,000 --> 00:01:59,000
Since we use Next off,

41
00:01:59,000 --> 00:02:03,000
all we have to do for that is we have to import something

42
00:02:03,000 --> 00:02:06,000
from Next off client,

43
00:02:06,000 --> 00:02:11,000
and that's something now is to use session hook

44
00:02:11,000 --> 00:02:15,000
which we can use an any functional React component.

45
00:02:15,000 --> 00:02:20,000
Here we cannot call use session and use session

46
00:02:20,000 --> 00:02:25,000
will return an array with exactly two elements.

47
00:02:25,000 --> 00:02:28,000
It is an array where the first element

48
00:02:28,000 --> 00:02:32,000
is the session object describing the act of session,

49
00:02:32,000 --> 00:02:35,000
and the second element is loading

50
00:02:35,000 --> 00:02:37,000
which tells us wherever Next.js

51
00:02:37,000 --> 00:02:40,000
is currently still figuring out

52
00:02:40,000 --> 00:02:41,000
whether we are logged in or not.

53
00:02:43,000 --> 00:02:47,000
And then for the moment I'll just lock both all log loading

54
00:02:47,000 --> 00:02:50,000
and I will log session.

55
00:02:52,000 --> 00:02:55,000
If we do that and save this,

56
00:02:55,000 --> 00:02:56,000
and go back to the browser,

57
00:02:56,000 --> 00:02:59,000
to the console and reload,

58
00:02:59,000 --> 00:03:02,000
we see true and undefined and true

59
00:03:02,000 --> 00:03:04,000
and some object and false in some object.

60
00:03:04,000 --> 00:03:07,000
The first log is always the loading state.

61
00:03:08,000 --> 00:03:10,000
So you'll see, initially we're loading,

62
00:03:10,000 --> 00:03:15,000
we are finding out whether the user is authenticated or not.

63
00:03:15,000 --> 00:03:17,000
And hence, we got no session object yet,

64
00:03:17,000 --> 00:03:20,000
then at some point we're still loading

65
00:03:20,000 --> 00:03:22,000
but we actually do have that object yet,

66
00:03:22,000 --> 00:03:24,000
and hence then loading is false

67
00:03:24,000 --> 00:03:26,000
and we have that object still.

68
00:03:26,000 --> 00:03:27,000
And in that session object,

69
00:03:27,000 --> 00:03:32,000
we got that user data which we encoded into our token.

70
00:03:32,000 --> 00:03:34,000
And we got some expiration date

71
00:03:34,000 --> 00:03:38,000
which tells us when that session will expire automatically.

72
00:03:38,000 --> 00:03:40,000
Though it is worth noting

73
00:03:40,000 --> 00:03:43,000
that this session will be prolonged automatically,

74
00:03:43,000 --> 00:03:46,000
if the user is active.

75
00:03:46,000 --> 00:03:48,000
So now that we know what's in there,

76
00:03:48,000 --> 00:03:52,000
what we can do is we can change what we see based

77
00:03:52,000 --> 00:03:54,000
on these two pieces of information.

78
00:03:54,000 --> 00:03:59,000
And we can make sure that the profile link is only showing

79
00:03:59,000 --> 00:04:01,000
up if we have of a session.

80
00:04:01,000 --> 00:04:04,000
So note if we're still finding it out,

81
00:04:04,000 --> 00:04:08,000
and also note if we found it out but the answer is no.

82
00:04:08,000 --> 00:04:10,000
Only if we have a session

83
00:04:10,000 --> 00:04:15,000
then we showed this information in our header.

84
00:04:16,000 --> 00:04:18,000
So if I save this and reload,

85
00:04:18,000 --> 00:04:21,000
you'll see that profile flashes briefly

86
00:04:21,000 --> 00:04:24,000
because it's only loaded after a very short time duration.

87
00:04:24,000 --> 00:04:28,000
Once we found out that we do have a session to be precise.

88
00:04:28,000 --> 00:04:31,000
Now that flashing could be unpleasant here,

89
00:04:31,000 --> 00:04:34,000
and I'll come back to how we can optimize all

90
00:04:34,000 --> 00:04:37,000
of that later in this section.

91
00:04:37,000 --> 00:04:40,000
But that generally is how we can find out

92
00:04:40,000 --> 00:04:43,000
whether we are authenticated or not.

93
00:04:43,000 --> 00:04:45,000
Now we can utilize this to then

94
00:04:45,000 --> 00:04:46,000
for example, only show the log in link

95
00:04:46,000 --> 00:04:50,000
if we don't have a session.

96
00:04:50,000 --> 00:04:52,000
Only if we don't have a session,

97
00:04:52,000 --> 00:04:54,000
we wanna show the log in link.

98
00:04:54,000 --> 00:04:56,000
I actually also don't wanna show it

99
00:04:56,000 --> 00:04:58,000
whilst we're still loading though.

100
00:04:58,000 --> 00:05:01,000
So I wanna show it only if we don't have a session

101
00:05:01,000 --> 00:05:03,000
and we're not loading.

102
00:05:03,000 --> 00:05:04,000
So for not loading,

103
00:05:04,000 --> 00:05:06,000
and we then know that we have no session,

104
00:05:06,000 --> 00:05:09,000
then I wanna show the log in link.

105
00:05:09,000 --> 00:05:11,000
For the log out button,

106
00:05:11,000 --> 00:05:13,000
I only wanna show that if we do have a session

107
00:05:13,000 --> 00:05:16,000
because logging out only makes sense

108
00:05:16,000 --> 00:05:17,000
if we are logged in.

109
00:05:18,000 --> 00:05:20,000
With that out of the way,

110
00:05:20,000 --> 00:05:22,000
you'll see the log in link is now gone.

111
00:05:22,000 --> 00:05:25,000
Now I am still on the log in page

112
00:05:25,000 --> 00:05:28,000
because I can still visit that page.

113
00:05:28,000 --> 00:05:31,000
I'll show how we can prevent this later as well,

114
00:05:31,000 --> 00:05:33,000
but we now at least know how we can control

115
00:05:33,000 --> 00:05:36,000
what we see on the user interface.

116
00:05:36,000 --> 00:05:39,000
And that is an important first step.

117
00:05:39,000 --> 00:05:43,000
Now, before we dive deeper into route protection

118
00:05:43,000 --> 00:05:46,000
and how we can control which pages can be visited,

119
00:05:46,000 --> 00:05:49,000
and how we can optimize all of that,

120
00:05:49,000 --> 00:05:51,000
let's first of all, explore how we can log out

121
00:05:51,000 --> 00:05:55,000
so that we can also go back to log out state.