Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
00:00:02,120 --> 00:00:04,740
So, let's now work on that AuthPage
2
00:00:04,740 --> 00:00:08,140
and make sure that when we log in
3
00:00:08,140 --> 00:00:10,430
so here in the auth-form component,
4
00:00:10,430 --> 00:00:15,430
that if we called signIn and we did sign in successfully
5
00:00:15,530 --> 00:00:18,870
that we then redirect and that if we load this page
6
00:00:18,870 --> 00:00:21,590
even though we are logged in already,
7
00:00:21,590 --> 00:00:24,430
we also maybe navigate away.
8
00:00:24,430 --> 00:00:26,170
Now let's start with the redirecting
9
00:00:26,170 --> 00:00:28,840
after logging in successfully.
10
00:00:28,840 --> 00:00:31,390
We can simply do this here in this, if ($check).
11
00:00:31,390 --> 00:00:34,090
Here, we check if we don't have an error.
12
00:00:34,090 --> 00:00:36,410
So, if signing in succeeded,
13
00:00:36,410 --> 00:00:38,930
and that is when we want to redirect.
14
00:00:38,930 --> 00:00:42,330
Now we could again redirect with window.location.ref,
15
00:00:42,330 --> 00:00:46,490
but that basically resets the entire application.
16
00:00:46,490 --> 00:00:49,440
That is fine for an initial page load
17
00:00:49,440 --> 00:00:52,020
but if we already worked in this application,
18
00:00:52,020 --> 00:00:55,660
and we have two single-page application already going on,
19
00:00:55,660 --> 00:00:59,230
then we probably don't wanna reset the entire application
20
00:00:59,230 --> 00:01:01,730
and lose all our state.
21
00:01:01,730 --> 00:01:03,120
Even though in this app,
22
00:01:03,120 --> 00:01:04,220
we wouldn't lose much,
23
00:01:04,220 --> 00:01:08,310
but of course that's not necessarily the case for every app.
24
00:01:08,310 --> 00:01:10,770
So therefore, instead here for redirecting,
25
00:01:10,770 --> 00:01:14,593
the better way of doing that is by using the Next router.
26
00:01:15,840 --> 00:01:19,460
So we can import from 'next/router,'
27
00:01:19,460 --> 00:01:22,923
and from there we can import the useRouter hook.
28
00:01:23,810 --> 00:01:25,970
And then in our component function,
29
00:01:25,970 --> 00:01:30,970
we simply call useRouter here to get access to that router.
30
00:01:31,140 --> 00:01:33,430
We already were with the router earlier
31
00:01:33,430 --> 00:01:34,610
in the course already.
32
00:01:34,610 --> 00:01:36,650
Now we work with it again.
33
00:01:36,650 --> 00:01:37,950
And once we got access to it,
34
00:01:37,950 --> 00:01:42,470
here, we can simply call replace.
35
00:01:42,470 --> 00:01:44,880
And replace will basically redirect us.
36
00:01:44,880 --> 00:01:48,830
It will replace the current URL with a different one.
37
00:01:48,830 --> 00:01:52,173
And we can for example go to ('/profile') here.
38
00:01:53,280 --> 00:01:54,490
And if we do that,
39
00:01:54,490 --> 00:01:56,300
if we implement this,
40
00:01:56,300 --> 00:01:59,220
now, if I go back and I do log in
41
00:01:59,220 --> 00:02:01,833
with valid credentials here.
42
00:02:04,130 --> 00:02:05,280
After logging in,
43
00:02:05,280 --> 00:02:08,449
I'm redirected to that profile page.
44
00:02:08,449 --> 00:02:10,270
Of course, on the login page
45
00:02:10,270 --> 00:02:11,970
we could show some loading state
46
00:02:11,970 --> 00:02:15,380
whilst this log in request is on its way,
47
00:02:15,380 --> 00:02:18,890
but that is some UI feedback which you of course can add.
48
00:02:18,890 --> 00:02:21,090
The core functionality works.
49
00:02:21,090 --> 00:02:22,980
Now, I just want to make sure
50
00:02:22,980 --> 00:02:27,860
that I can't visit this AuthPage if I am logged in already.
51
00:02:27,860 --> 00:02:29,610
And we could again implement
52
00:02:29,610 --> 00:02:32,220
this with getService side props
53
00:02:32,220 --> 00:02:34,530
to check the authentication status,
54
00:02:34,530 --> 00:02:37,240
when a request reaches that route.
55
00:02:37,240 --> 00:02:41,240
Alternatively, we implement our client's side work around.
56
00:02:41,240 --> 00:02:44,220
And I'll do that here just to practice this again.
57
00:02:44,220 --> 00:02:49,220
For this on the AuthPage or in the AuthForm,
58
00:02:49,890 --> 00:02:50,910
doesn't really matter.
59
00:02:50,910 --> 00:02:53,310
Let's maybe do it here in the AuthPage.
60
00:02:53,310 --> 00:02:58,200
For this here, I want to use useEffect.
61
00:02:58,200 --> 00:03:00,350
So, import that from React
62
00:03:00,350 --> 00:03:03,410
so that we can call getSession in there.
63
00:03:03,410 --> 00:03:04,463
And for that,
64
00:03:04,463 --> 00:03:06,663
we need to import { getSession } from 'next-auth/client':
65
00:03:12,340 --> 00:03:13,880
and then here in useEffect,
66
00:03:13,880 --> 00:03:18,880
we have this effect function and our dependency array
67
00:03:19,300 --> 00:03:21,220
without any dependencies here,
68
00:03:21,220 --> 00:03:23,950
since we have no special dependencies.
69
00:03:23,950 --> 00:03:26,400
And we call getSession,
70
00:03:26,400 --> 00:03:30,300
and then here we find out whether we have a session or not.
71
00:03:30,300 --> 00:03:31,150
And then here,
72
00:03:31,150 --> 00:03:33,670
I wanna check if we do have a session,
73
00:03:33,670 --> 00:03:38,480
because here the problem is if we are authenticated already.
74
00:03:38,480 --> 00:03:40,510
And if we do have a session,
75
00:03:40,510 --> 00:03:43,500
then I want to redirect a way.
76
00:03:43,500 --> 00:03:44,340
For this here,
77
00:03:44,340 --> 00:03:48,010
we can either redirect with window.location.ref
78
00:03:48,010 --> 00:03:49,730
or with the router.
79
00:03:49,730 --> 00:03:54,730
So, we can import { useRouter } from 'next/Router':
80
00:03:55,330 --> 00:03:56,730
like this.
81
00:03:56,730 --> 00:03:58,310
Get access to the router,
82
00:03:58,310 --> 00:04:01,430
useRouter like that.
83
00:04:01,430 --> 00:04:05,280
And then in here simply call router.replace
84
00:04:05,280 --> 00:04:07,723
and go to the starting page for example.
85
00:04:08,600 --> 00:04:10,780
And now add router as a dependency
86
00:04:10,780 --> 00:04:12,630
since it's technically is one,
87
00:04:12,630 --> 00:04:14,743
though it of course shouldn't change.
88
00:04:16,060 --> 00:04:19,220
So now, we can redirect if we are authenticated.
89
00:04:19,220 --> 00:04:22,140
Of course, I don't wanna show the AuthForm
90
00:04:22,140 --> 00:04:23,800
whilst I'm still figuring out
91
00:04:23,800 --> 00:04:26,220
whether we are authenticated or not.
92
00:04:26,220 --> 00:04:30,170
And therefore again we can use useState here,
93
00:04:30,170 --> 00:04:34,150
importing it from react to have our IsLoading state,
94
00:04:34,150 --> 00:04:39,150
whilst we are figuring out whether we have a session or not.
95
00:04:39,320 --> 00:04:42,100
And this starts with a value of true,
96
00:04:42,100 --> 00:04:46,570
but here, if we don't have a session,
97
00:04:46,570 --> 00:04:48,450
and therefore we need to log in
98
00:04:48,450 --> 00:04:51,530
and therefore we wanna show the AuthForm.
99
00:04:51,530 --> 00:04:52,420
If that's the case,
100
00:04:52,420 --> 00:04:55,720
I'll setIsLoading{false}: here.
101
00:04:55,720 --> 00:04:56,553
And then again,
102
00:04:56,553 --> 00:04:59,850
we can show some fallback whilst we are loading,
103
00:04:59,850 --> 00:05:04,730
and return a paragraph where we say loading like this.
104
00:05:04,730 --> 00:05:06,810
And this will not be styled in any way,
105
00:05:06,810 --> 00:05:09,290
you could of course add some styling.
106
00:05:09,290 --> 00:05:14,290
With that if I enter /auth here in the URL,
107
00:05:15,990 --> 00:05:18,573
we see loading briefly and then I'm redirected.
108
00:05:19,670 --> 00:05:21,440
So that works.
109
00:05:21,440 --> 00:05:26,340
And with that, we now also protect our AuthPage
110
00:05:26,340 --> 00:05:28,350
and the profile page.
111
00:05:28,350 --> 00:05:30,010
And we make sure that depending
112
00:05:30,010 --> 00:05:32,260
on our authentication status,
113
00:05:32,260 --> 00:05:36,840
we can only reach and use different kinds of pages.
114
00:05:36,840 --> 00:05:40,350
And we can't visit all the pages all the time.
115
00:05:40,350 --> 00:05:44,483
And that of course is an important part of authentication.
8782
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.