1
00:00:02,000 --> 00:00:04,000
So of course, if we are not logged in

2
00:00:04,000 --> 00:00:08,000
we shouldn't be able to visit this profile page.

3
00:00:08,000 --> 00:00:10,000
And if we were on that page and we click log out

4
00:00:10,000 --> 00:00:12,000
we should be redirected

5
00:00:12,000 --> 00:00:16,000
and implementing that is never straight forward

6
00:00:16,000 --> 00:00:18,000
with next auth.

7
00:00:18,000 --> 00:00:21,000
All we have to do in the end is go to the pages

8
00:00:21,000 --> 00:00:25,000
which we wanna protect or restrict in some way.

9
00:00:25,000 --> 00:00:27,000
Like the profile page here.

10
00:00:27,000 --> 00:00:32,000
And then also use some next off functionality there.

11
00:00:32,000 --> 00:00:34,000
Either directly on that page

12
00:00:34,000 --> 00:00:36,000
or in a component of that page.

13
00:00:36,000 --> 00:00:38,000
like here to use a profile component.

14
00:00:38,000 --> 00:00:42,000
Here I want to redirect the way if we're not authenticated.

15
00:00:42,000 --> 00:00:45,000
And to implement this I will again import

16
00:00:45,000 --> 00:00:50,000
useSession from next-auth/client.

17
00:00:51,000 --> 00:00:54,000
And then again get access to my session data here.

18
00:00:54,000 --> 00:00:57,000
So here I'll then check session

19
00:00:57,000 --> 00:01:01,000
and maybe also loading extract these to pieces

20
00:01:01,000 --> 00:01:04,000
which we get when we call useSession.

21
00:01:05,000 --> 00:01:09,000
And now in the end, I want to do a couple of things.

22
00:01:09,000 --> 00:01:12,000
First of all, I want to check if we're loading

23
00:01:12,000 --> 00:01:16,000
if we're loading, then I and return a different content

24
00:01:16,000 --> 00:01:19,000
and show loading as text.

25
00:01:20,000 --> 00:01:23,000
By doing that if we saved this,

26
00:01:23,000 --> 00:01:26,000
I don't see all that content immediately

27
00:01:26,000 --> 00:01:28,000
if I shouldn't see it.

28
00:01:28,000 --> 00:01:32,000
Now to styling is a bit of to fix that.

29
00:01:32,000 --> 00:01:36,000
I'll give data class name of classes profile

30
00:01:36,000 --> 00:01:40,000
like this, and now at least it's centered.

31
00:01:40,000 --> 00:01:44,000
But at the moment I only see loading then it never changes.

32
00:01:44,000 --> 00:01:48,000
And indeed, that is how you useSession behaves.

33
00:01:48,000 --> 00:01:52,000
At least at the moment useSession returns to session

34
00:01:52,000 --> 00:01:55,000
and loading but there is this scenario

35
00:01:55,000 --> 00:01:57,000
that if you load a page,

36
00:01:57,000 --> 00:02:02,000
loading stays true and it doesn't really update.

37
00:02:02,000 --> 00:02:04,000
I'm not sure if it's a bug or a feature,

38
00:02:04,000 --> 00:02:06,000
but it is what it is.

39
00:02:06,000 --> 00:02:09,000
Thankfully, there is a way around that though.

40
00:02:09,000 --> 00:02:13,000
Besides useSession, there also is getSession.

41
00:02:14,000 --> 00:02:17,000
And the difference is that with useSession

42
00:02:17,000 --> 00:02:22,000
we immediately get this session and loading thing here,

43
00:02:22,000 --> 00:02:26,000
and then both session and loading could change

44
00:02:26,000 --> 00:02:28,000
if session data was fetched.

45
00:02:28,000 --> 00:02:31,000
If we have no session because we're logged out

46
00:02:31,000 --> 00:02:33,000
session will never change though

47
00:02:33,000 --> 00:02:37,000
and as we see loading unfortunately also doesn't change

48
00:02:37,000 --> 00:02:39,000
It stays true.

49
00:02:39,000 --> 00:02:40,000
getSession works differently.

50
00:02:40,000 --> 00:02:43,000
getSessions, sends a new request

51
00:02:43,000 --> 00:02:46,000
and gets to latest session data

52
00:02:46,000 --> 00:02:48,000
and we can then react the answer

53
00:02:48,000 --> 00:02:51,000
to the response for that request.

54
00:02:51,000 --> 00:02:55,000
And that allows us to manage our own loading state

55
00:02:55,000 --> 00:02:58,000
while forgetting the session and act accordingly.

56
00:02:58,000 --> 00:02:59,000
It's a bit more cumbersome

57
00:02:59,000 --> 00:03:01,000
requires more work from our side

58
00:03:01,000 --> 00:03:04,000
but it is the way around this issue

59
00:03:04,000 --> 00:03:05,000
which we have here.

60
00:03:06,000 --> 00:03:10,000
And it's not too difficult to implement in the end.

61
00:03:10,000 --> 00:03:14,000
We just need to manage our own state with use state.

62
00:03:14,000 --> 00:03:18,000
So we should import use state from react.

63
00:03:18,000 --> 00:03:21,000
And that will be our own loading state.

64
00:03:21,000 --> 00:03:25,000
So here I can manage is loading

65
00:03:25,000 --> 00:03:28,000
and set is loading.

66
00:03:28,000 --> 00:03:31,000
And actually we can set this to true initially

67
00:03:31,000 --> 00:03:35,000
to well start in that loading state.

68
00:03:36,000 --> 00:03:38,000
Then we can manage a number piece of data

69
00:03:38,000 --> 00:03:41,000
and that would be our session,

70
00:03:41,000 --> 00:03:42,000
which initially is undefined.

71
00:03:44,000 --> 00:03:47,000
So here we have the loaded session

72
00:03:47,000 --> 00:03:50,000
and set loaded session

73
00:03:50,000 --> 00:03:53,000
and now we can use effect,

74
00:03:53,000 --> 00:03:57,000
does use fact hook, which we also have to import from react

75
00:03:57,000 --> 00:04:01,000
to get the session when this component is rendered.

76
00:04:02,000 --> 00:04:04,000
So here in this effect function,

77
00:04:04,000 --> 00:04:06,000
I will call getSession

78
00:04:07,000 --> 00:04:10,000
so what I'm importing here from next-auth/client,

79
00:04:10,000 --> 00:04:15,000
I'll execute this and this will then return a promise.

80
00:04:16,000 --> 00:04:17,000
So here we can use it then

81
00:04:17,000 --> 00:04:19,000
or use a sync await for that

82
00:04:19,000 --> 00:04:22,000
we would wrap it into an extra function though,

83
00:04:22,000 --> 00:04:26,000
since we shouldn't make that effect function a sync.

84
00:04:26,000 --> 00:04:29,000
Hence here, I'll just work with then

85
00:04:29,000 --> 00:04:34,000
and I will get my session here eventually as our argument.

86
00:04:35,000 --> 00:04:39,000
And now here session may be null if we don't have a session.

87
00:04:39,000 --> 00:04:43,000
So if next off determines that this user is not logged in

88
00:04:43,000 --> 00:04:45,000
or it will be an object with the session data

89
00:04:45,000 --> 00:04:48,000
If the opposite is the case.

90
00:04:48,000 --> 00:04:51,000
And since here, we only care about whether

91
00:04:51,000 --> 00:04:53,000
we have a session or not

92
00:04:53,000 --> 00:04:57,000
the only thing we need to do here is call setloadedsession

93
00:04:57,000 --> 00:04:59,000
and set this to session once we're done

94
00:04:59,000 --> 00:05:04,000
and set is loading to false here eventually Like this,

95
00:05:05,000 --> 00:05:08,000
Now we don't use useSession anymore here

96
00:05:08,000 --> 00:05:11,000
because it didn't work as it should here

97
00:05:11,000 --> 00:05:14,000
and therefore now we have this approach and stat.

98
00:05:15,000 --> 00:05:17,000
Now what's the benefit of this approach?

99
00:05:17,000 --> 00:05:20,000
Well, now we can use our own isloading state here

100
00:05:20,000 --> 00:05:22,000
to show this loading message

101
00:05:22,000 --> 00:05:27,000
and we can now react to isloading being false

102
00:05:27,000 --> 00:05:31,000
So to loading being done and us not having a session.

103
00:05:31,000 --> 00:05:33,000
We can redirect a way then.

104
00:05:33,000 --> 00:05:35,000
And actually, if that's our goal

105
00:05:35,000 --> 00:05:39,000
instead of managing that extra session state

106
00:05:39,000 --> 00:05:41,000
if we don't need the session for anything else

107
00:05:41,000 --> 00:05:43,000
then navigating a way.

108
00:05:43,000 --> 00:05:46,000
Then the only thing we have to do here

109
00:05:46,000 --> 00:05:49,000
is check inside of this

110
00:05:49,000 --> 00:05:53,000
Then block, if session is not truthy.

111
00:05:53,000 --> 00:05:55,000
So if we don't have a session

112
00:05:55,000 --> 00:05:57,000
and then that case we navigate away.

113
00:05:57,000 --> 00:06:00,000
So set is loading, but if we don't have a session,

114
00:06:00,000 --> 00:06:04,000
I will actually navigate a way by using window location href

115
00:06:04,000 --> 00:06:07,000
which changes the URL in the browser

116
00:06:07,000 --> 00:06:10,000
and changing this to auth for example.

117
00:06:10,000 --> 00:06:12,000
So now if we don't find a session,

118
00:06:12,000 --> 00:06:15,000
we navigate a way with this code.

119
00:06:16,000 --> 00:06:19,000
Otherwise, eventually loading will be false

120
00:06:19,000 --> 00:06:20,000
and we do have a session.

121
00:06:20,000 --> 00:06:22,000
Then we rendered this content

122
00:06:24,000 --> 00:06:26,000
And With that work around implemented

123
00:06:26,000 --> 00:06:28,000
If we now go back and I reload,

124
00:06:28,000 --> 00:06:30,000
you see this page loads.

125
00:06:30,000 --> 00:06:33,000
If I log out on the apprehend I'm redirected.

126
00:06:33,000 --> 00:06:36,000
And if I now manually visit profile,

127
00:06:36,000 --> 00:06:39,000
I also am redirected eventually.

128
00:06:39,000 --> 00:06:44,000
Now we do see the average page content flash here

129
00:06:44,000 --> 00:06:46,000
for a brief moment.

130
00:06:46,000 --> 00:06:47,000
And the reason for that

131
00:06:47,000 --> 00:06:52,000
is me setting set as loading to false here, no matter what.

132
00:06:52,000 --> 00:06:54,000
actually I want to do this in the else case here,

133
00:06:54,000 --> 00:06:57,000
if we do have a session we stay on this page

134
00:06:57,000 --> 00:07:00,000
and only then I want to set as loading to false.

135
00:07:00,000 --> 00:07:04,000
If I do that and go to slash profile,

136
00:07:04,000 --> 00:07:05,000
we only see loading briefly

137
00:07:05,000 --> 00:07:07,000
and we see loading briefly

138
00:07:07,000 --> 00:07:09,000
because we do have that brief moment

139
00:07:09,000 --> 00:07:14,000
where we don't know yet whether we are authenticated or not.

140
00:07:14,000 --> 00:07:18,000
But with that, we implemented the desired behavior here

141
00:07:18,000 --> 00:07:19,000
and we need his work around

142
00:07:19,000 --> 00:07:22,000
because of how useSession works.

143
00:07:22,000 --> 00:07:26,000
It fulfills its purpose in the header

144
00:07:26,000 --> 00:07:28,000
and it updates the UI correctly there.

145
00:07:28,000 --> 00:07:30,000
But if we rely on the differences

146
00:07:30,000 --> 00:07:33,000
between being in a loading state

147
00:07:33,000 --> 00:07:36,000
and not having a session or not having a session

148
00:07:36,000 --> 00:07:38,000
because we're not authenticated

149
00:07:38,000 --> 00:07:40,000
directly after loading a page.

150
00:07:40,000 --> 00:07:43,000
In that case, useSession didn't help us

151
00:07:43,000 --> 00:07:45,000
and this is what (indistinct) does.

152
00:07:45,000 --> 00:07:48,000
it's not the only way of solving this problem though