Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
00:00:02,130 --> 00:00:04,610
Now to take a closer look at API routes
2
00:00:04,610 --> 00:00:06,310
and how we can protect those,
3
00:00:06,310 --> 00:00:09,520
I will take this change password example.
4
00:00:09,520 --> 00:00:13,620
This clearly is an operation that should be restricted.
5
00:00:13,620 --> 00:00:17,130
Not every user should be allowed to change a password.
6
00:00:17,130 --> 00:00:20,320
It only makes sense for authenticated users
7
00:00:20,320 --> 00:00:22,880
and hence, I will add a new API route
8
00:00:22,880 --> 00:00:26,110
and we can add it in the API auth folder,
9
00:00:26,110 --> 00:00:28,560
but we could also add it somewhere else,
10
00:00:28,560 --> 00:00:32,280
and to show that it does not have to be in the auth folder,
11
00:00:32,280 --> 00:00:36,620
I will create another folder, in the pages API folder,
12
00:00:36,620 --> 00:00:38,950
and that will be the user folder,
13
00:00:38,950 --> 00:00:41,570
but you could add it in auth, as well,
14
00:00:41,570 --> 00:00:45,670
and in there, I'll add the change-password.js file
15
00:00:45,670 --> 00:00:47,870
because I want to create an API route,
16
00:00:47,870 --> 00:00:50,560
which can be reached by sending a request
17
00:00:50,560 --> 00:00:54,870
to /api/user/change-password,
18
00:00:54,870 --> 00:00:56,783
that's reaching this file then.
19
00:00:57,980 --> 00:01:01,470
Now in this file, we're not going to use NextAuth,
20
00:01:01,470 --> 00:01:03,000
at least not as we did it
21
00:01:03,000 --> 00:01:06,430
in this square bracket nextauth file.
22
00:01:06,430 --> 00:01:09,650
Instead, we're going to create our own API route,
23
00:01:09,650 --> 00:01:12,220
just as we learned it in this course.
24
00:01:12,220 --> 00:01:14,640
So I'll create a handler function here,
25
00:01:14,640 --> 00:01:17,170
which gets a request and a response,
26
00:01:17,170 --> 00:01:20,853
and I'll then export this as a default here,
27
00:01:21,720 --> 00:01:24,240
and now in this handler function,
28
00:01:24,240 --> 00:01:28,740
we want to extract the old and new password,
29
00:01:28,740 --> 00:01:30,293
which the user entered here.
30
00:01:31,300 --> 00:01:33,810
We want to verify that the request is coming
31
00:01:33,810 --> 00:01:36,010
from an authenticated user
32
00:01:36,010 --> 00:01:39,540
and deny for reaction, if it's not.
33
00:01:39,540 --> 00:01:41,470
We want to get the email address
34
00:01:41,470 --> 00:01:43,860
of that authenticated user then,
35
00:01:43,860 --> 00:01:46,630
and then we want to look into the database,
36
00:01:46,630 --> 00:01:49,000
see if we find that user there,
37
00:01:49,000 --> 00:01:52,410
see if the old password that was entered matches
38
00:01:52,410 --> 00:01:54,710
the current password in the database,
39
00:01:54,710 --> 00:01:56,010
and if that's the case,
40
00:01:56,010 --> 00:01:59,760
we want to replace that old password with the new password.
41
00:01:59,760 --> 00:02:01,340
So that's what we're now going to do
42
00:02:01,340 --> 00:02:03,050
over the next minutes.
43
00:02:03,050 --> 00:02:05,140
Now for that, in the handler function,
44
00:02:05,140 --> 00:02:07,580
the change-password.js file here,
45
00:02:07,580 --> 00:02:10,490
let's first of all, check if the incoming request
46
00:02:10,490 --> 00:02:13,570
has the right method, and for changing the password,
47
00:02:13,570 --> 00:02:18,160
a POST, or a PUT, or a PATCH request makes sense.
48
00:02:18,160 --> 00:02:21,870
These are the three kinds of requests that imply
49
00:02:21,870 --> 00:02:26,070
that resources on the server should be created or changed,
50
00:02:26,070 --> 00:02:29,440
and you can argue whether changing a password
51
00:02:29,440 --> 00:02:32,870
is creating a new resource, a new password,
52
00:02:32,870 --> 00:02:36,720
or changing an existing resource and existing user,
53
00:02:36,720 --> 00:02:39,910
and I will go for the latter argument,
54
00:02:39,910 --> 00:02:43,410
and I want to say that I only want to continue here,
55
00:02:43,410 --> 00:02:47,420
if the incoming request has a method of PATCH.
56
00:02:47,420 --> 00:02:51,220
So if it's not PATCH, then we will just return
57
00:02:51,220 --> 00:02:53,370
and not continue at all.
58
00:02:53,370 --> 00:02:56,600
We will only continue for PATCH requests,
59
00:02:56,600 --> 00:02:59,040
which of course means that in the front-end,
60
00:02:59,040 --> 00:03:02,060
so in our client-side code, we'll have to make sure
61
00:03:02,060 --> 00:03:07,060
that we do send a PATCH request to this API route later.
62
00:03:08,250 --> 00:03:09,723
So that's check number one.
63
00:03:10,670 --> 00:03:14,190
Check number two, is whether that request is coming
64
00:03:14,190 --> 00:03:17,020
from an authenticated user or not,
65
00:03:17,020 --> 00:03:21,170
and if it's not, we also want to return with an error,
66
00:03:21,170 --> 00:03:23,540
and for this, we can again use
67
00:03:23,540 --> 00:03:26,120
this getSession function here,
68
00:03:26,120 --> 00:03:29,170
which we already used on the profile page.
69
00:03:29,170 --> 00:03:33,290
There we are already using it in server-side code,
70
00:03:33,290 --> 00:03:34,873
inside of getServerSideProps.
71
00:03:35,920 --> 00:03:38,550
So we already see that it runs on the server,
72
00:03:38,550 --> 00:03:40,250
as well as on the client,
73
00:03:40,250 --> 00:03:42,490
and that of course means that we can again,
74
00:03:42,490 --> 00:03:47,130
use it in our API route, which also is server-side code.
75
00:03:47,130 --> 00:03:49,900
So therefore, in the change-password.js file,
76
00:03:49,900 --> 00:03:54,900
I will again, import getSession from next-auth/client.
77
00:03:58,390 --> 00:04:02,090
The /client can be confusing, but this does work
78
00:04:02,090 --> 00:04:04,810
on the server, as well, as we saw,
79
00:04:04,810 --> 00:04:08,090
and then we want to check if we do get a session.
80
00:04:08,090 --> 00:04:11,180
For this we can store a session a constant,
81
00:04:11,180 --> 00:04:13,560
and we get it by calling getSession,
82
00:04:13,560 --> 00:04:16,200
and then as you learned, on the server-side,
83
00:04:16,200 --> 00:04:20,339
we can pass in an object where we set the req key
84
00:04:20,339 --> 00:04:22,493
to the request we're getting here.
85
00:04:23,900 --> 00:04:25,960
GetSession needs that incoming request,
86
00:04:25,960 --> 00:04:28,270
because it will then look into that request,
87
00:04:28,270 --> 00:04:31,780
see if a session token cookie is part of the request.
88
00:04:31,780 --> 00:04:34,830
If it is, it will validate and extract that data
89
00:04:34,830 --> 00:04:37,830
from that cookie, and if that all then makes sense,
90
00:04:37,830 --> 00:04:39,843
it will give us the session object.
91
00:04:40,710 --> 00:04:43,110
Now, getSession actually returns a promise,
92
00:04:43,110 --> 00:04:44,830
and to use async await,
93
00:04:44,830 --> 00:04:47,290
I'll turn this into a async function
94
00:04:47,290 --> 00:04:48,793
and I'll wait here.
95
00:04:49,930 --> 00:04:52,050
So now we get our session,
96
00:04:52,050 --> 00:04:55,180
or we don't get one if the user is not authenticated,
97
00:04:55,180 --> 00:04:57,930
and therefore, we can check if not session,
98
00:04:57,930 --> 00:04:59,290
if that's undefined,
99
00:04:59,290 --> 00:05:02,420
which means the request is not authenticated,
100
00:05:02,420 --> 00:05:04,810
and in that case, we also want to return
101
00:05:04,810 --> 00:05:08,220
and here, we may be also want to send back a response.
102
00:05:08,220 --> 00:05:11,320
We could send one back in this first if check as well,
103
00:05:11,320 --> 00:05:13,220
a special response,
104
00:05:13,220 --> 00:05:15,440
but I don't care about that here, but here,
105
00:05:15,440 --> 00:05:18,410
I actually do want to send back a response
106
00:05:18,410 --> 00:05:21,690
with a status code of 401,
107
00:05:21,690 --> 00:05:24,850
which basically is the standard status code
108
00:05:24,850 --> 00:05:28,130
for saying that authentication is missing,
109
00:05:28,130 --> 00:05:30,520
and then possibly some extra data attached,
110
00:05:30,520 --> 00:05:34,880
like a message of not authenticated,
111
00:05:34,880 --> 00:05:35,970
but of course, it's up to you,
112
00:05:35,970 --> 00:05:39,453
which kind of data, if any, you want to send back.
113
00:05:40,790 --> 00:05:42,398
So that's now another important check,
114
00:05:42,398 --> 00:05:45,860
and that is the key check of this module,
115
00:05:45,860 --> 00:05:47,790
of this course module,
116
00:05:47,790 --> 00:05:51,300
because this line here or this block of code,
117
00:05:51,300 --> 00:05:55,410
that's the code where we validate whether a request
118
00:05:55,410 --> 00:05:57,880
is authenticated or not.
119
00:05:57,880 --> 00:06:02,220
This is the code with which we protect our API route
120
00:06:02,220 --> 00:06:04,990
against unauthenticated access,
121
00:06:04,990 --> 00:06:08,560
and every API route that does something
122
00:06:08,560 --> 00:06:12,410
that should only be allowed to authenticated users,
123
00:06:12,410 --> 00:06:14,800
needs code like this.
124
00:06:14,800 --> 00:06:17,940
Everything else we're going to write in this API route
125
00:06:17,940 --> 00:06:21,620
is not directly related to authentication.
126
00:06:21,620 --> 00:06:24,290
Yes, we're going to change the password of a user,
127
00:06:24,290 --> 00:06:27,470
and that of course, has something to do with authentication,
128
00:06:27,470 --> 00:06:30,260
but on the other hand, changing a password is really not
129
00:06:30,260 --> 00:06:32,600
that different from creating a product.
130
00:06:32,600 --> 00:06:35,503
We're just changing some data in the database in the end.
10423
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.