1
00:00:02,000 --> 00:00:04,000
So, let's now work on that AuthPage

2
00:00:04,000 --> 00:00:08,000
and make sure that when we log in

3
00:00:08,000 --> 00:00:10,000
so here in the auth-form component,

4
00:00:10,000 --> 00:00:15,000
that if we called signIn and we did sign in successfully

5
00:00:15,000 --> 00:00:18,000
that we then redirect and that if we load this page

6
00:00:18,000 --> 00:00:21,000
even though we are logged in already,

7
00:00:21,000 --> 00:00:24,000
we also maybe navigate away.

8
00:00:24,000 --> 00:00:26,000
Now let's start with the redirecting

9
00:00:26,000 --> 00:00:28,000
after logging in successfully.

10
00:00:28,000 --> 00:00:31,000
We can simply do this here in this, if ($check).

11
00:00:31,000 --> 00:00:34,000
Here, we check if we don't have an error.

12
00:00:34,000 --> 00:00:36,000
So, if signing in succeeded,

13
00:00:36,000 --> 00:00:38,000
and that is when we want to redirect.

14
00:00:38,000 --> 00:00:42,000
Now we could again redirect with window.location.ref,

15
00:00:42,000 --> 00:00:46,000
but that basically resets the entire application.

16
00:00:46,000 --> 00:00:49,000
That is fine for an initial page load

17
00:00:49,000 --> 00:00:52,000
but if we already worked in this application,

18
00:00:52,000 --> 00:00:55,000
and we have two single-page application already going on,

19
00:00:55,000 --> 00:00:59,000
then we probably don't wanna reset the entire application

20
00:00:59,000 --> 00:01:01,000
and lose all our state.

21
00:01:01,000 --> 00:01:03,000
Even though in this app,

22
00:01:03,000 --> 00:01:04,000
we wouldn't lose much,

23
00:01:04,000 --> 00:01:08,000
but of course that's not necessarily the case for every app.

24
00:01:08,000 --> 00:01:10,000
So therefore, instead here for redirecting,

25
00:01:10,000 --> 00:01:14,000
the better way of doing that is by using the Next router.

26
00:01:15,000 --> 00:01:19,000
So we can import from 'next/router,'

27
00:01:19,000 --> 00:01:22,000
and from there we can import the useRouter hook.

28
00:01:23,000 --> 00:01:25,000
And then in our component function,

29
00:01:25,000 --> 00:01:30,000
we simply call useRouter here to get access to that router.

30
00:01:31,000 --> 00:01:33,000
We already were with the router earlier

31
00:01:33,000 --> 00:01:34,000
in the course already.

32
00:01:34,000 --> 00:01:36,000
Now we work with it again.

33
00:01:36,000 --> 00:01:37,000
And once we got access to it,

34
00:01:37,000 --> 00:01:42,000
here, we can simply call replace.

35
00:01:42,000 --> 00:01:44,000
And replace will basically redirect us.

36
00:01:44,000 --> 00:01:48,000
It will replace the current URL with a different one.

37
00:01:48,000 --> 00:01:52,000
And we can for example go to ('/profile') here.

38
00:01:53,000 --> 00:01:54,000
And if we do that,

39
00:01:54,000 --> 00:01:56,000
if we implement this,

40
00:01:56,000 --> 00:01:59,000
now, if I go back and I do log in

41
00:01:59,000 --> 00:02:01,000
with valid credentials here.

42
00:02:04,000 --> 00:02:05,000
After logging in,

43
00:02:05,000 --> 00:02:08,000
I'm redirected to that profile page.

44
00:02:08,000 --> 00:02:10,000
Of course, on the login page

45
00:02:10,000 --> 00:02:11,000
we could show some loading state

46
00:02:11,000 --> 00:02:15,000
whilst this log in request is on its way,

47
00:02:15,000 --> 00:02:18,000
but that is some UI feedback which you of course can add.

48
00:02:18,000 --> 00:02:21,000
The core functionality works.

49
00:02:21,000 --> 00:02:22,000
Now, I just want to make sure

50
00:02:22,000 --> 00:02:27,000
that I can't visit this AuthPage if I am logged in already.

51
00:02:27,000 --> 00:02:29,000
And we could again implement

52
00:02:29,000 --> 00:02:32,000
this with getService side props

53
00:02:32,000 --> 00:02:34,000
to check the authentication status,

54
00:02:34,000 --> 00:02:37,000
when a request reaches that route.

55
00:02:37,000 --> 00:02:41,000
Alternatively, we implement our client's side work around.

56
00:02:41,000 --> 00:02:44,000
And I'll do that here just to practice this again.

57
00:02:44,000 --> 00:02:49,000
For this on the AuthPage or in the AuthForm,

58
00:02:49,000 --> 00:02:50,000
doesn't really matter.

59
00:02:50,000 --> 00:02:53,000
Let's maybe do it here in the AuthPage.

60
00:02:53,000 --> 00:02:58,000
For this here, I want to use useEffect.

61
00:02:58,000 --> 00:03:00,000
So, import that from React

62
00:03:00,000 --> 00:03:03,000
so that we can call getSession in there.

63
00:03:03,000 --> 00:03:04,000
And for that,

64
00:03:04,000 --> 00:03:06,000
we need to import { getSession } from 'next-auth/client':

65
00:03:12,000 --> 00:03:13,000
and then here in useEffect,

66
00:03:13,000 --> 00:03:18,000
we have this effect function and our dependency array

67
00:03:19,000 --> 00:03:21,000
without any dependencies here,

68
00:03:21,000 --> 00:03:23,000
since we have no special dependencies.

69
00:03:23,000 --> 00:03:26,000
And we call getSession,

70
00:03:26,000 --> 00:03:30,000
and then here we find out whether we have a session or not.

71
00:03:30,000 --> 00:03:31,000
And then here,

72
00:03:31,000 --> 00:03:33,000
I wanna check if we do have a session,

73
00:03:33,000 --> 00:03:38,000
because here the problem is if we are authenticated already.

74
00:03:38,000 --> 00:03:40,000
And if we do have a session,

75
00:03:40,000 --> 00:03:43,000
then I want to redirect a way.

76
00:03:43,000 --> 00:03:44,000
For this here,

77
00:03:44,000 --> 00:03:48,000
we can either redirect with window.location.ref

78
00:03:48,000 --> 00:03:49,000
or with the router.

79
00:03:49,000 --> 00:03:54,000
So, we can import { useRouter } from 'next/Router':

80
00:03:55,000 --> 00:03:56,000
like this.

81
00:03:56,000 --> 00:03:58,000
Get access to the router,

82
00:03:58,000 --> 00:04:01,000
useRouter like that.

83
00:04:01,000 --> 00:04:05,000
And then in here simply call router.replace

84
00:04:05,000 --> 00:04:07,000
and go to the starting page for example.

85
00:04:08,000 --> 00:04:10,000
And now add router as a dependency

86
00:04:10,000 --> 00:04:12,000
since it's technically is one,

87
00:04:12,000 --> 00:04:14,000
though it of course shouldn't change.

88
00:04:16,000 --> 00:04:19,000
So now, we can redirect if we are authenticated.

89
00:04:19,000 --> 00:04:22,000
Of course, I don't wanna show the AuthForm

90
00:04:22,000 --> 00:04:23,000
whilst I'm still figuring out

91
00:04:23,000 --> 00:04:26,000
whether we are authenticated or not.

92
00:04:26,000 --> 00:04:30,000
And therefore again we can use useState here,

93
00:04:30,000 --> 00:04:34,000
importing it from react to have our IsLoading state,

94
00:04:34,000 --> 00:04:39,000
whilst we are figuring out whether we have a session or not.

95
00:04:39,000 --> 00:04:42,000
And this starts with a value of true,

96
00:04:42,000 --> 00:04:46,000
but here, if we don't have a session,

97
00:04:46,000 --> 00:04:48,000
and therefore we need to log in

98
00:04:48,000 --> 00:04:51,000
and therefore we wanna show the AuthForm.

99
00:04:51,000 --> 00:04:52,000
If that's the case,

100
00:04:52,000 --> 00:04:55,000
I'll setIsLoading{false}: here.

101
00:04:55,000 --> 00:04:56,000
And then again,

102
00:04:56,000 --> 00:04:59,000
we can show some fallback whilst we are loading,

103
00:04:59,000 --> 00:05:04,000
and return a paragraph where we say loading like this.

104
00:05:04,000 --> 00:05:06,000
And this will not be styled in any way,

105
00:05:06,000 --> 00:05:09,000
you could of course add some styling.

106
00:05:09,000 --> 00:05:14,000
With that if I enter /auth here in the URL,

107
00:05:15,000 --> 00:05:18,000
we see loading briefly and then I'm redirected.

108
00:05:19,000 --> 00:05:21,000
So that works.

109
00:05:21,000 --> 00:05:26,000
And with that, we now also protect our AuthPage

110
00:05:26,000 --> 00:05:28,000
and the profile page.

111
00:05:28,000 --> 00:05:30,000
And we make sure that depending

112
00:05:30,000 --> 00:05:32,000
on our authentication status,

113
00:05:32,000 --> 00:05:36,000
we can only reach and use different kinds of pages.

114
00:05:36,000 --> 00:05:40,000
And we can't visit all the pages all the time.

115
00:05:40,000 --> 00:05:44,000
And that of course is an important part of authentication.