Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
00:00:02,150 --> 00:00:06,160
So, we are now protecting that profile page
2
00:00:06,160 --> 00:00:09,250
and we redirect away for not authenticated.
3
00:00:09,250 --> 00:00:12,060
If I do log in, on the other hand,
4
00:00:12,060 --> 00:00:14,440
if I use valid credentials,
5
00:00:14,440 --> 00:00:17,370
I can go to profile and I see that page.
6
00:00:17,370 --> 00:00:21,620
And I can also direct the enter profile and I see that page.
7
00:00:21,620 --> 00:00:25,950
But that brief moment of loading, which flashes
8
00:00:25,950 --> 00:00:30,020
on the screen when we enter profile when not authenticated
9
00:00:30,020 --> 00:00:33,320
that is maybe something we want to get rid of.
10
00:00:33,320 --> 00:00:35,400
Now, we can't really get rid of it
11
00:00:35,400 --> 00:00:39,640
with just client side code, because if we visit this page
12
00:00:39,640 --> 00:00:42,570
and we then use client side JavaScript code
13
00:00:42,570 --> 00:00:46,190
to determine whether we are authenticated or not,
14
00:00:46,190 --> 00:00:49,730
then we'll always need to wait that fraction
15
00:00:49,730 --> 00:00:53,120
of a second to find out if we are.
16
00:00:53,120 --> 00:00:58,120
But we must not forget that Next.js blends server side
17
00:00:58,450 --> 00:01:03,450
and client side code, so we can use server side code
18
00:01:03,640 --> 00:01:05,580
to determine whether the user,
19
00:01:05,580 --> 00:01:08,960
who sent the request, is authenticated or not
20
00:01:08,960 --> 00:01:11,620
and return different page content
21
00:01:11,620 --> 00:01:16,620
and possibly a redirect if the user is not authenticated.
22
00:01:16,900 --> 00:01:19,620
For this, we need to go to the profile page
23
00:01:19,620 --> 00:01:22,160
and then add an extra function.
24
00:01:22,160 --> 00:01:25,360
The question now, just is, which function?
25
00:01:25,360 --> 00:01:30,360
We could, of course, add the getStaticProps function here.
26
00:01:31,260 --> 00:01:34,940
This would allow us to fetch data for this page in advance.
27
00:01:34,940 --> 00:01:37,680
But that's the wrong function, why?
28
00:01:37,680 --> 00:01:39,290
Because you must not forget
29
00:01:39,290 --> 00:01:43,110
that getStaticProps runs during build time.
30
00:01:43,110 --> 00:01:47,260
Yes, it can also run thereafter with revalidate set
31
00:01:47,260 --> 00:01:50,880
to a certain duration, but it mainly runs during build time.
32
00:01:50,880 --> 00:01:55,880
It does absolutely not run for every incoming request.
33
00:01:56,340 --> 00:01:59,580
Now here, in this case, every incoming request matters
34
00:01:59,580 --> 00:02:01,150
though because we need to find out,
35
00:02:01,150 --> 00:02:03,570
if that user is logged in or not.
36
00:02:03,570 --> 00:02:07,257
And that's why instead we should use getServiceSideProps
37
00:02:08,320 --> 00:02:10,680
that will then get a context object
38
00:02:10,680 --> 00:02:13,530
where we get access to the incoming request.
39
00:02:13,530 --> 00:02:15,483
And the good thing about getSession,
40
00:02:16,500 --> 00:02:19,023
which I'm using in the profile,
41
00:02:19,970 --> 00:02:21,630
the user profile component here.
42
00:02:21,630 --> 00:02:25,210
getSession, the good thing about this function is that
43
00:02:25,210 --> 00:02:29,700
you're not limited to using it on client side code only.
44
00:02:29,700 --> 00:02:32,830
You can, as you see, it works in a component.
45
00:02:32,830 --> 00:02:37,130
But you can also use getSession on the server side,
46
00:02:37,130 --> 00:02:40,970
even though it's imported from next-auth/client.
47
00:02:40,970 --> 00:02:43,046
So, we can copy that import,
48
00:02:43,046 --> 00:02:46,374
and bring that over to Profile.js here
49
00:02:46,374 --> 00:02:49,900
and import that on this page, in this page file.
50
00:02:50,850 --> 00:02:53,000
And then, here, in getServerSideProps
51
00:02:54,230 --> 00:02:58,150
we can also call getSession and actually pass
52
00:02:58,150 --> 00:03:03,150
in an object where we set a request key, a req key
53
00:03:03,410 --> 00:03:05,420
to the incoming request, which we get
54
00:03:05,420 --> 00:03:09,690
out of the context we're receiving here, context.req.
55
00:03:09,690 --> 00:03:12,950
Don't forget that you have access to the request object
56
00:03:12,950 --> 00:03:15,793
through that context when using getServerSideProps.
57
00:03:16,850 --> 00:03:20,040
And we pass this request which we get here
58
00:03:20,040 --> 00:03:24,210
into this getSession function through that req key
59
00:03:24,210 --> 00:03:26,700
in that configuration object.
60
00:03:26,700 --> 00:03:29,290
And then, getSession will automatically look
61
00:03:29,290 --> 00:03:32,820
into that request and extract the data it needs
62
00:03:32,820 --> 00:03:36,200
the session token cookie, to be precise,
63
00:03:36,200 --> 00:03:39,710
and see if that's valid, and if the user is authenticated
64
00:03:39,710 --> 00:03:43,030
and if that cookie even exists to begin with.
65
00:03:43,030 --> 00:03:45,390
So, that will all happen behind the scenes.
66
00:03:45,390 --> 00:03:48,260
We just need to call getSession here,
67
00:03:48,260 --> 00:03:51,100
and we can convert this into a async function
68
00:03:51,100 --> 00:03:55,350
and await this, since this will return a promise.
69
00:03:55,350 --> 00:03:57,970
And as a result, we'll get our session.
70
00:03:57,970 --> 00:04:01,250
And this will be null if the user is not authenticated
71
00:04:01,250 --> 00:04:03,730
and it will be a valid session object,
72
00:04:03,730 --> 00:04:06,170
if the user is authenticated.
73
00:04:06,170 --> 00:04:10,420
So now, with that in place, we can act accordingly.
74
00:04:10,420 --> 00:04:14,070
We can check if not session, so if it's null,
75
00:04:14,070 --> 00:04:15,600
if we don't have a session,
76
00:04:15,600 --> 00:04:18,540
if the visiting user is not authenticated.
77
00:04:18,540 --> 00:04:21,970
And, in that case, we return an object here inside
78
00:04:21,970 --> 00:04:26,750
of getServerSideProps where we maybe set redirect
79
00:04:26,750 --> 00:04:29,610
to an object to redirect the user.
80
00:04:29,610 --> 00:04:31,270
That is something you learned about
81
00:04:31,270 --> 00:04:34,490
in an earlier course section.
82
00:04:34,490 --> 00:04:37,714
This object, which you return in getServerSideProps
83
00:04:37,714 --> 00:04:40,138
and in getStaticProps, typically,
84
00:04:40,138 --> 00:04:41,663
is a object where you set props for the component.
85
00:04:44,010 --> 00:04:46,600
But, as you learned, you're not limited to that.
86
00:04:46,600 --> 00:04:50,040
You can also set the not found key
87
00:04:50,040 --> 00:04:53,120
to true to show the 404 page.
88
00:04:53,120 --> 00:04:55,760
Or you set the redirect to an object
89
00:04:55,760 --> 00:04:59,390
where you describe the redirect you want to issue.
90
00:04:59,390 --> 00:05:03,310
And that will then redirect the user to a different page
91
00:05:03,310 --> 00:05:06,833
without even flashing that user profile page.
92
00:05:07,730 --> 00:05:11,440
This redirect object then, wants a destination key
93
00:05:11,440 --> 00:05:13,440
where you specify the path you want
94
00:05:13,440 --> 00:05:16,583
to redirect to, for example, to the auth page.
95
00:05:17,630 --> 00:05:21,260
And you can add permanent to indicate
96
00:05:21,260 --> 00:05:22,970
if that's a permanent redirect,
97
00:05:22,970 --> 00:05:26,490
which will always apply, or only a temporary one.
98
00:05:26,490 --> 00:05:28,870
And here we definitely want to set permanent
99
00:05:28,870 --> 00:05:32,120
to false to make it clear that it's only this time
100
00:05:32,120 --> 00:05:34,993
that we redirect because the user is not logged in.
101
00:05:36,200 --> 00:05:38,290
Now, if we don't make it into this if block,
102
00:05:38,290 --> 00:05:42,190
we know that there is a session, the user is logged in
103
00:05:42,190 --> 00:05:45,180
and, hence, we want to return a object
104
00:05:45,180 --> 00:05:48,520
where we don't set not found to anything
105
00:05:48,520 --> 00:05:50,600
and where we don't redirect,
106
00:05:50,600 --> 00:05:53,570
but where we instead just set our props.
107
00:05:53,570 --> 00:05:56,410
And if we want, we can then pass the session
108
00:05:56,410 --> 00:05:59,853
as a prop to the page, like this.
109
00:06:01,060 --> 00:06:04,100
So, now we use getServerSideProps for that.
110
00:06:04,100 --> 00:06:07,120
And that means that in the user profile component
111
00:06:07,120 --> 00:06:10,410
we can now get rid of our client side code,
112
00:06:10,410 --> 00:06:12,710
we can comment this out, or delete this
113
00:06:12,710 --> 00:06:16,920
because this component, this user profile component here,
114
00:06:16,920 --> 00:06:20,060
let me remove the imports, this component,
115
00:06:20,060 --> 00:06:22,030
which is used by the profile page
116
00:06:22,030 --> 00:06:25,060
will only be rendered if that page renders.
117
00:06:25,060 --> 00:06:28,770
And that page will only render if we are authenticated
118
00:06:28,770 --> 00:06:32,530
because of our getServerSideProps logic.
119
00:06:32,530 --> 00:06:34,410
And that might be the more elegant way
120
00:06:34,410 --> 00:06:37,750
of handling this because with this, if we save that,
121
00:06:37,750 --> 00:06:42,480
if I'm not logged in and I then visit /profile
122
00:06:42,480 --> 00:06:45,490
I don't even see the profile page flashing.
123
00:06:45,490 --> 00:06:47,363
Instead, I'm instantly redirected.
124
00:06:48,330 --> 00:06:53,330
Now, if I do log in, though, if I do enter valid credentials
125
00:06:53,530 --> 00:06:56,100
then I can go to the profile page,
126
00:06:56,100 --> 00:07:00,180
and I can also enter it like this and it loads.
127
00:07:00,180 --> 00:07:04,090
And that is, maybe, the more elegant way of handling this,
128
00:07:04,090 --> 00:07:06,633
which is why I also wanted to show it to you.
129
00:07:08,340 --> 00:07:10,890
Now with that, however, let's make sure
130
00:07:10,890 --> 00:07:14,720
that we also implement something similar for the auth page.
131
00:07:14,720 --> 00:07:17,380
Here, after logging in successfully,
132
00:07:17,380 --> 00:07:21,880
I also want to redirect away to the profile page, let's say,
133
00:07:21,880 --> 00:07:24,120
and I want to make sure that we can't load
134
00:07:24,120 --> 00:07:27,840
the auth page if I am logged in already.
135
00:07:27,840 --> 00:07:31,130
So, let's see if we can find a solution for this as well.
136
00:07:31,130 --> 00:07:33,820
Just a side note, because I see it, this warning
137
00:07:33,820 --> 00:07:36,480
which is showing up here, we can ignore it for now.
138
00:07:36,480 --> 00:07:39,253
We will set this environment variable later.
11469
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.