1
00:00:02,000 --> 00:00:06,000
So, we are now protecting that profile page

2
00:00:06,000 --> 00:00:09,000
and we redirect away for not authenticated.

3
00:00:09,000 --> 00:00:12,000
If I do log in, on the other hand,

4
00:00:12,000 --> 00:00:14,000
if I use valid credentials,

5
00:00:14,000 --> 00:00:17,000
I can go to profile and I see that page.

6
00:00:17,000 --> 00:00:21,000
And I can also direct the enter profile and I see that page.

7
00:00:21,000 --> 00:00:25,000
But that brief moment of loading, which flashes

8
00:00:25,000 --> 00:00:30,000
on the screen when we enter profile when not authenticated

9
00:00:30,000 --> 00:00:33,000
that is maybe something we want to get rid of.

10
00:00:33,000 --> 00:00:35,000
Now, we can't really get rid of it

11
00:00:35,000 --> 00:00:39,000
with just client side code, because if we visit this page

12
00:00:39,000 --> 00:00:42,000
and we then use client side JavaScript code

13
00:00:42,000 --> 00:00:46,000
to determine whether we are authenticated or not,

14
00:00:46,000 --> 00:00:49,000
then we'll always need to wait that fraction

15
00:00:49,000 --> 00:00:53,000
of a second to find out if we are.

16
00:00:53,000 --> 00:00:58,000
But we must not forget that Next.js blends server side

17
00:00:58,000 --> 00:01:03,000
and client side code, so we can use server side code

18
00:01:03,000 --> 00:01:05,000
to determine whether the user,

19
00:01:05,000 --> 00:01:08,000
who sent the request, is authenticated or not

20
00:01:08,000 --> 00:01:11,000
and return different page content

21
00:01:11,000 --> 00:01:16,000
and possibly a redirect if the user is not authenticated.

22
00:01:16,000 --> 00:01:19,000
For this, we need to go to the profile page

23
00:01:19,000 --> 00:01:22,000
and then add an extra function.

24
00:01:22,000 --> 00:01:25,000
The question now, just is, which function?

25
00:01:25,000 --> 00:01:30,000
We could, of course, add the getStaticProps function here.

26
00:01:31,000 --> 00:01:34,000
This would allow us to fetch data for this page in advance.

27
00:01:34,000 --> 00:01:37,000
But that's the wrong function, why?

28
00:01:37,000 --> 00:01:39,000
Because you must not forget

29
00:01:39,000 --> 00:01:43,000
that getStaticProps runs during build time.

30
00:01:43,000 --> 00:01:47,000
Yes, it can also run thereafter with revalidate set

31
00:01:47,000 --> 00:01:50,000
to a certain duration, but it mainly runs during build time.

32
00:01:50,000 --> 00:01:55,000
It does absolutely not run for every incoming request.

33
00:01:56,000 --> 00:01:59,000
Now here, in this case, every incoming request matters

34
00:01:59,000 --> 00:02:01,000
though because we need to find out,

35
00:02:01,000 --> 00:02:03,000
if that user is logged in or not.

36
00:02:03,000 --> 00:02:07,000
And that's why instead we should use getServiceSideProps

37
00:02:08,000 --> 00:02:10,000
that will then get a context object

38
00:02:10,000 --> 00:02:13,000
where we get access to the incoming request.

39
00:02:13,000 --> 00:02:15,000
And the good thing about getSession,

40
00:02:16,000 --> 00:02:19,000
which I'm using in the profile,

41
00:02:19,000 --> 00:02:21,000
the user profile component here.

42
00:02:21,000 --> 00:02:25,000
getSession, the good thing about this function is that

43
00:02:25,000 --> 00:02:29,000
you're not limited to using it on client side code only.

44
00:02:29,000 --> 00:02:32,000
You can, as you see, it works in a component.

45
00:02:32,000 --> 00:02:37,000
But you can also use getSession on the server side,

46
00:02:37,000 --> 00:02:40,000
even though it's imported from next-auth/client.

47
00:02:40,000 --> 00:02:43,000
So, we can copy that import,

48
00:02:43,000 --> 00:02:46,000
and bring that over to Profile.js here

49
00:02:46,000 --> 00:02:49,000
and import that on this page, in this page file.

50
00:02:50,000 --> 00:02:53,000
And then, here, in getServerSideProps

51
00:02:54,000 --> 00:02:58,000
we can also call getSession and actually pass

52
00:02:58,000 --> 00:03:03,000
in an object where we set a request key, a req key

53
00:03:03,000 --> 00:03:05,000
to the incoming request, which we get

54
00:03:05,000 --> 00:03:09,000
out of the context we're receiving here, context.req.

55
00:03:09,000 --> 00:03:12,000
Don't forget that you have access to the request object

56
00:03:12,000 --> 00:03:15,000
through that context when using getServerSideProps.

57
00:03:16,000 --> 00:03:20,000
And we pass this request which we get here

58
00:03:20,000 --> 00:03:24,000
into this getSession function through that req key

59
00:03:24,000 --> 00:03:26,000
in that configuration object.

60
00:03:26,000 --> 00:03:29,000
And then, getSession will automatically look

61
00:03:29,000 --> 00:03:32,000
into that request and extract the data it needs

62
00:03:32,000 --> 00:03:36,000
the session token cookie, to be precise,

63
00:03:36,000 --> 00:03:39,000
and see if that's valid, and if the user is authenticated

64
00:03:39,000 --> 00:03:43,000
and if that cookie even exists to begin with.

65
00:03:43,000 --> 00:03:45,000
So, that will all happen behind the scenes.

66
00:03:45,000 --> 00:03:48,000
We just need to call getSession here,

67
00:03:48,000 --> 00:03:51,000
and we can convert this into a async function

68
00:03:51,000 --> 00:03:55,000
and await this, since this will return a promise.

69
00:03:55,000 --> 00:03:57,000
And as a result, we'll get our session.

70
00:03:57,000 --> 00:04:01,000
And this will be null if the user is not authenticated

71
00:04:01,000 --> 00:04:03,000
and it will be a valid session object,

72
00:04:03,000 --> 00:04:06,000
if the user is authenticated.

73
00:04:06,000 --> 00:04:10,000
So now, with that in place, we can act accordingly.

74
00:04:10,000 --> 00:04:14,000
We can check if not session, so if it's null,

75
00:04:14,000 --> 00:04:15,000
if we don't have a session,

76
00:04:15,000 --> 00:04:18,000
if the visiting user is not authenticated.

77
00:04:18,000 --> 00:04:21,000
And, in that case, we return an object here inside

78
00:04:21,000 --> 00:04:26,000
of getServerSideProps where we maybe set redirect

79
00:04:26,000 --> 00:04:29,000
to an object to redirect the user.

80
00:04:29,000 --> 00:04:31,000
That is something you learned about

81
00:04:31,000 --> 00:04:34,000
in an earlier course section.

82
00:04:34,000 --> 00:04:37,000
This object, which you return in getServerSideProps

83
00:04:37,000 --> 00:04:40,000
and in getStaticProps, typically,

84
00:04:40,000 --> 00:04:41,000
is a object where you set props for the component.

85
00:04:44,000 --> 00:04:46,000
But, as you learned, you're not limited to that.

86
00:04:46,000 --> 00:04:50,000
You can also set the not found key

87
00:04:50,000 --> 00:04:53,000
to true to show the 404 page.

88
00:04:53,000 --> 00:04:55,000
Or you set the redirect to an object

89
00:04:55,000 --> 00:04:59,000
where you describe the redirect you want to issue.

90
00:04:59,000 --> 00:05:03,000
And that will then redirect the user to a different page

91
00:05:03,000 --> 00:05:06,000
without even flashing that user profile page.

92
00:05:07,000 --> 00:05:11,000
This redirect object then, wants a destination key

93
00:05:11,000 --> 00:05:13,000
where you specify the path you want

94
00:05:13,000 --> 00:05:16,000
to redirect to, for example, to the auth page.

95
00:05:17,000 --> 00:05:21,000
And you can add permanent to indicate

96
00:05:21,000 --> 00:05:22,000
if that's a permanent redirect,

97
00:05:22,000 --> 00:05:26,000
which will always apply, or only a temporary one.

98
00:05:26,000 --> 00:05:28,000
And here we definitely want to set permanent

99
00:05:28,000 --> 00:05:32,000
to false to make it clear that it's only this time

100
00:05:32,000 --> 00:05:34,000
that we redirect because the user is not logged in.

101
00:05:36,000 --> 00:05:38,000
Now, if we don't make it into this if block,

102
00:05:38,000 --> 00:05:42,000
we know that there is a session, the user is logged in

103
00:05:42,000 --> 00:05:45,000
and, hence, we want to return a object

104
00:05:45,000 --> 00:05:48,000
where we don't set not found to anything

105
00:05:48,000 --> 00:05:50,000
and where we don't redirect,

106
00:05:50,000 --> 00:05:53,000
but where we instead just set our props.

107
00:05:53,000 --> 00:05:56,000
And if we want, we can then pass the session

108
00:05:56,000 --> 00:05:59,000
as a prop to the page, like this.

109
00:06:01,000 --> 00:06:04,000
So, now we use getServerSideProps for that.

110
00:06:04,000 --> 00:06:07,000
And that means that in the user profile component

111
00:06:07,000 --> 00:06:10,000
we can now get rid of our client side code,

112
00:06:10,000 --> 00:06:12,000
we can comment this out, or delete this

113
00:06:12,000 --> 00:06:16,000
because this component, this user profile component here,

114
00:06:16,000 --> 00:06:20,000
let me remove the imports, this component,

115
00:06:20,000 --> 00:06:22,000
which is used by the profile page

116
00:06:22,000 --> 00:06:25,000
will only be rendered if that page renders.

117
00:06:25,000 --> 00:06:28,000
And that page will only render if we are authenticated

118
00:06:28,000 --> 00:06:32,000
because of our getServerSideProps logic.

119
00:06:32,000 --> 00:06:34,000
And that might be the more elegant way

120
00:06:34,000 --> 00:06:37,000
of handling this because with this, if we save that,

121
00:06:37,000 --> 00:06:42,000
if I'm not logged in and I then visit /profile

122
00:06:42,000 --> 00:06:45,000
I don't even see the profile page flashing.

123
00:06:45,000 --> 00:06:47,000
Instead, I'm instantly redirected.

124
00:06:48,000 --> 00:06:53,000
Now, if I do log in, though, if I do enter valid credentials

125
00:06:53,000 --> 00:06:56,000
then I can go to the profile page,

126
00:06:56,000 --> 00:07:00,000
and I can also enter it like this and it loads.

127
00:07:00,000 --> 00:07:04,000
And that is, maybe, the more elegant way of handling this,

128
00:07:04,000 --> 00:07:06,000
which is why I also wanted to show it to you.

129
00:07:08,000 --> 00:07:10,000
Now with that, however, let's make sure

130
00:07:10,000 --> 00:07:14,000
that we also implement something similar for the auth page.

131
00:07:14,000 --> 00:07:17,000
Here, after logging in successfully,

132
00:07:17,000 --> 00:07:21,000
I also want to redirect away to the profile page, let's say,

133
00:07:21,000 --> 00:07:24,000
and I want to make sure that we can't load

134
00:07:24,000 --> 00:07:27,000
the auth page if I am logged in already.

135
00:07:27,000 --> 00:07:31,000
So, let's see if we can find a solution for this as well.

136
00:07:31,000 --> 00:07:33,000
Just a side note, because I see it, this warning

137
00:07:33,000 --> 00:07:36,000
which is showing up here, we can ignore it for now.

138
00:07:36,000 --> 00:07:39,000
We will set this environment variable later.