1
00:00:08,430 --> 00:00:15,450
Let's continue to implement the authentication system using JSON Web token.

2
00:00:15,690 --> 00:00:20,580
But before we continue, guys, I made some slight mistake here.

3
00:00:20,610 --> 00:00:29,730
Inside the verification token, we need to return from this function because let's say that if I tamper

4
00:00:29,730 --> 00:00:33,180
with the token, so let me change the token like this one.

5
00:00:33,330 --> 00:00:38,460
And if I go ahead and run the file, let's see.

6
00:00:38,460 --> 00:00:39,660
You can see that.

7
00:00:39,660 --> 00:00:47,610
Let me run the file again where you can see that I got nothing because at this point the token has.

8
00:00:49,200 --> 00:00:51,880
You can see that I got nothing down here.

9
00:00:51,900 --> 00:00:55,280
I was expecting this message to be displayed.

10
00:00:55,290 --> 00:01:05,790
So let's go ahead and then assign the result to a variable called the user verified so it can be user

11
00:01:05,790 --> 00:01:06,920
or user verified.

12
00:01:06,930 --> 00:01:10,110
So let's go ahead and then console the user.

13
00:01:10,440 --> 00:01:19,770
Well, you can see that I got undefined simply means that we are not returning this function from our

14
00:01:19,770 --> 00:01:21,180
verification token.

15
00:01:21,180 --> 00:01:25,290
So here, let's go ahead and return from this function.

16
00:01:25,290 --> 00:01:27,780
And with this one, let's have a look.

17
00:01:27,780 --> 00:01:35,280
You can see that we have the message called status failed and message invalid, token or token expired.

18
00:01:35,370 --> 00:01:45,900
But if I provide the right token, which is this one and let me pass it inside the function call and

19
00:01:45,900 --> 00:01:46,890
let's save it.

20
00:01:46,890 --> 00:01:49,710
And you can see that we got the user back.

21
00:01:49,710 --> 00:01:50,940
That is perfect.

22
00:01:50,940 --> 00:01:55,080
So now we have fixed that particular back.

23
00:01:55,170 --> 00:01:57,870
So let's continue the flow.

24
00:01:57,900 --> 00:01:59,970
Now we've got all what we need.

25
00:01:59,970 --> 00:02:03,960
That is we're able to generate and able to verify.

26
00:02:03,960 --> 00:02:08,340
So what is the next step looking at this flow?

27
00:02:08,580 --> 00:02:17,670
What it says is that upon every request we need to send the token as part of the header.

28
00:02:17,970 --> 00:02:23,760
So how are we going to send the token as a header when making requests?

29
00:02:23,820 --> 00:02:29,910
So let's work with the profile roots, which is down here.

30
00:02:30,120 --> 00:02:38,670
So what we are going to do is that when a user visit this root, we want to have access to the token

31
00:02:38,670 --> 00:02:42,360
and then we take that token to verify.

32
00:02:42,360 --> 00:02:50,250
And after verification we have the user, then we can pass to this template and show it on the page

33
00:02:50,250 --> 00:02:52,830
and that is what we are going to do.

34
00:02:52,860 --> 00:02:59,010
So because we are dealing with API, let's go ahead and then refactor this route a little bit.

35
00:02:59,010 --> 00:03:05,910
So let's remove this one and let's remove everything from this root and let's start from scratch because

36
00:03:05,910 --> 00:03:10,080
we are dealing with API, we are not going to send any template for now.

37
00:03:10,080 --> 00:03:11,910
So here we go.

38
00:03:11,910 --> 00:03:24,960
So inside here, let's send a message by saying that welcome to your profile page and let's provide

39
00:03:24,960 --> 00:03:25,890
status.

40
00:03:26,920 --> 00:03:29,620
Is going to be success.

41
00:03:29,830 --> 00:03:30,220
All right.

42
00:03:30,220 --> 00:03:32,230
So let's go ahead and hit that route.

43
00:03:32,230 --> 00:03:35,110
So let's create one requests.

44
00:03:35,110 --> 00:03:38,050
So let me let me duplicate this one.

45
00:03:38,260 --> 00:03:44,800
And this one is going to be let me rename it as profile.

46
00:03:45,340 --> 00:03:47,110
Here we go.

47
00:03:47,980 --> 00:03:48,480
Good.

48
00:03:48,490 --> 00:03:51,700
So here you're going to be profile.

49
00:03:51,910 --> 00:03:54,280
When I hit send is get request.

50
00:03:54,280 --> 00:03:59,410
So let's change to get and let's save the roots and hit send.

51
00:03:59,410 --> 00:04:03,520
And we have what is called welcome for this one.

52
00:04:03,520 --> 00:04:04,690
There is no payload.

53
00:04:04,690 --> 00:04:09,100
So let's remove this one and let's have some enough room.

54
00:04:09,130 --> 00:04:12,450
A good lesson again we have.

55
00:04:12,460 --> 00:04:14,440
Welcome to your profile.

56
00:04:14,470 --> 00:04:21,490
So when I hit this profile, I want to display the log in user.

57
00:04:21,490 --> 00:04:28,150
So let's see how we are going to implement that back to the root core profile.

58
00:04:28,300 --> 00:04:33,970
We want to have access to the token and how are we going to get it.

59
00:04:33,970 --> 00:04:41,230
And remember we said that when making the request, which means we are making requests to this endpoint

60
00:04:41,230 --> 00:04:44,770
core profile and we want to send the token.

61
00:04:44,770 --> 00:04:49,750
So how are we going to pass the token when making requests to this route?

62
00:04:49,750 --> 00:04:55,000
And this is how we're going to do it and our headers click on that.

63
00:04:55,000 --> 00:04:57,130
Let's have some enough room here.

64
00:04:57,430 --> 00:05:06,910
And, and the HTTP is we are going to pass additional payload call authorization and the value here

65
00:05:06,910 --> 00:05:11,260
is going to be bearer, make sure you type in that name.

66
00:05:11,440 --> 00:05:24,100
And next is we pass in the token the token as that copy it and let's paste it here after borough space

67
00:05:24,100 --> 00:05:29,140
once paste and then let's paste that and let's make the requests.

68
00:05:29,140 --> 00:05:30,190
All right.

69
00:05:30,280 --> 00:05:35,800
Now, you can see that there is nothing being displayed than the static text.

70
00:05:35,830 --> 00:05:44,800
But as soon as we do that inside here, we have access to the rec.

71
00:05:45,790 --> 00:05:55,000
Dot headers, so let's go ahead and console.log the rec dot headers and let's see.

72
00:05:55,060 --> 00:06:01,350
So with this one, if I make the request to the root, let's see.

73
00:06:01,360 --> 00:06:03,460
And there we go.

74
00:06:03,460 --> 00:06:10,090
And we have some properties on the header called the user agent, meaning the two that we are using

75
00:06:10,090 --> 00:06:17,710
to make the request which is the ten dot client and we have accept don't worry about this one, but

76
00:06:17,710 --> 00:06:23,200
what we care most is the authorization and you can see that we have.

77
00:06:23,200 --> 00:06:29,620
Bera And then our token which is this and this is what we want.

78
00:06:29,620 --> 00:06:38,650
So the whole logic is that we want to grab the token from this header and looking at this structure

79
00:06:39,190 --> 00:06:46,600
is going to be a little bit difficult to get the token because one, we can quickly make use of that

80
00:06:46,600 --> 00:06:47,800
authorization.

81
00:06:48,220 --> 00:06:49,930
But what about the value?

82
00:06:49,960 --> 00:06:53,920
We have a value called bearer, but we don't want this one.

83
00:06:53,920 --> 00:06:55,720
What we want is this.

84
00:06:55,720 --> 00:06:58,930
So we need to write some JavaScript to get it done.

85
00:06:59,110 --> 00:07:02,440
So here we go back to the file.

86
00:07:03,400 --> 00:07:06,280
So now how can we get the headers?

87
00:07:06,460 --> 00:07:14,800
And this is how we are going to do so let's declare a variable called header object.

88
00:07:14,920 --> 00:07:15,910
So here we go.

89
00:07:15,910 --> 00:07:18,310
Const header.

90
00:07:20,300 --> 00:07:31,940
Object is equal to req dart headers as you saw on the console and if you console log header object,

91
00:07:31,940 --> 00:07:33,770
you're going to get what we saw.

92
00:07:34,190 --> 00:07:38,210
So the next is let's go ahead and grab the token.

93
00:07:38,210 --> 00:07:47,480
So const token is equal to remember we have header object dot authorization.

94
00:07:47,870 --> 00:07:58,580
So with this one, if you go ahead and console.log the token, let's have a look inside our terminal.

95
00:07:58,610 --> 00:08:01,370
Let's see if you have the token.

96
00:08:01,370 --> 00:08:05,660
Let's make the request again and we have the token.

97
00:08:05,660 --> 00:08:10,220
But instead we have bearer and then token.

98
00:08:10,460 --> 00:08:18,560
So let's ignore this one and take this and we can use split to split this one and take the second index

99
00:08:18,560 --> 00:08:19,550
of this.

100
00:08:19,550 --> 00:08:23,300
So this is how we are going to do so.

101
00:08:23,300 --> 00:08:33,470
Back here we can add what is called dot splits and you want to split, wait, empty space as we saw,

102
00:08:33,650 --> 00:08:36,260
and then you want to take the first index.

103
00:08:36,260 --> 00:08:39,289
So this one before we take that, let's save it.

104
00:08:39,289 --> 00:08:42,799
And now let's try again make the requests.

105
00:08:42,799 --> 00:08:50,300
And you can see that we have an array with the first value which is index zero and the second value

106
00:08:50,330 --> 00:08:55,490
at index one, we can get that one from here as index one.

107
00:08:55,490 --> 00:09:04,910
So with this one, again, if I make the request and now I have the token down here with that bearer

108
00:09:04,910 --> 00:09:09,800
and for this one we can write it as using the square bracket.

109
00:09:09,800 --> 00:09:17,270
So here, remember how we can get property from objects, we can go by this or using the square bracket

110
00:09:17,270 --> 00:09:17,990
as that.

111
00:09:17,990 --> 00:09:25,940
And let's remove the let's remove the dot from here and put this one in code.

112
00:09:25,940 --> 00:09:30,440
And this one also in this one is more dynamic.

113
00:09:30,680 --> 00:09:31,100
All right.

114
00:09:31,100 --> 00:09:36,640
So now, again, if I make the requests I have to took him.

115
00:09:36,680 --> 00:09:38,750
That is great, guys.

116
00:09:39,110 --> 00:09:46,490
So when we get that one, what we want to do is that we want to verify the token.

117
00:09:46,640 --> 00:09:49,100
Do you remember, as we did before?

118
00:09:49,130 --> 00:09:57,320
So back here, after getting this token, we want to verify the token here going to be verify.

119
00:09:58,520 --> 00:09:59,420
Tolkien.

120
00:09:59,420 --> 00:10:05,090
So here is going to be get Tolkien from header so here get.

121
00:10:08,690 --> 00:10:15,390
So let's go ahead and call the function for verifying token, which is this one.

122
00:10:15,410 --> 00:10:24,680
Let's remove this function here and now let's go ahead and call the function inside the profile root,

123
00:10:24,680 --> 00:10:25,640
which is this.

124
00:10:25,640 --> 00:10:35,420
So we're going to call verify token, then pass in the token we got and now I have access to the user

125
00:10:35,420 --> 00:10:46,070
code, decoded user code to what I got back from verification so I can go ahead and then send the user

126
00:10:46,100 --> 00:10:49,400
as a response code decoded user.

127
00:10:49,790 --> 00:10:52,280
So here is a magic.

128
00:10:52,310 --> 00:11:00,260
Now if I go to the profile root and now as part of the response, let's have a look.

129
00:11:00,470 --> 00:11:05,240
Hey, we have the user back as that.

130
00:11:05,240 --> 00:11:06,350
That is great.

131
00:11:06,770 --> 00:11:15,800
Well, so with this one, we can pass this user to a template to be rendered on the page as we did for

132
00:11:15,800 --> 00:11:18,200
session and cookie based authentication.

133
00:11:18,320 --> 00:11:19,370
Do you get it?

134
00:11:19,520 --> 00:11:27,950
Yeah, but a caveat thing here is that, guys, you don't need to expose the user details like this

135
00:11:27,950 --> 00:11:28,340
one.

136
00:11:28,340 --> 00:11:35,870
You see that we are retaining everything from here, like the user name, the foo, name, the password,

137
00:11:35,870 --> 00:11:36,680
everything.

138
00:11:37,130 --> 00:11:45,830
So the idea way is that we got this details because upon generating or signing in the token we use the

139
00:11:45,830 --> 00:11:56,750
entire user, which is let me show you here the general token function which is up here.

140
00:11:56,960 --> 00:11:58,280
Let me show you the generate.

141
00:11:58,280 --> 00:12:08,300
This one can see that we are using the and how user details, but ideally we use the ID only and then

142
00:12:08,300 --> 00:12:17,330
when we go the ID inside any route, we can get the ID and then make a request to MongoDB to find that

143
00:12:17,330 --> 00:12:21,230
particular user with that particular ID.

144
00:12:21,380 --> 00:12:33,110
So by convention we only sign a user with ID as that and you can get a one from the user underscore

145
00:12:33,110 --> 00:12:35,600
ID as that.

146
00:12:35,600 --> 00:12:44,090
So when registering instead of just passing in the entire user details, which is here, we are going

147
00:12:44,090 --> 00:12:49,040
to sign in the user with all the ID.

148
00:12:49,040 --> 00:12:53,300
So here going to be going to pass in as an object.

149
00:12:53,300 --> 00:13:01,280
But instead what I want is the user and remember the user represents this one.

150
00:13:01,280 --> 00:13:05,210
Let me show you the generate here is this.

151
00:13:05,210 --> 00:13:10,130
And because it's an object, we can get the ID to get it.

152
00:13:10,130 --> 00:13:11,750
Yes, I get it.

153
00:13:11,750 --> 00:13:16,940
Or better so we can provide ID here to be more specific.

154
00:13:17,210 --> 00:13:22,040
To be more specific as the ID.

155
00:13:22,460 --> 00:13:23,360
All right.

156
00:13:23,360 --> 00:13:28,640
So let's see how we are going to get the ID also and pass N.

157
00:13:29,000 --> 00:13:30,740
So here we go.

158
00:13:30,770 --> 00:13:38,510
We can quickly pass in the user found and then dot underscore ID.

159
00:13:38,510 --> 00:13:39,980
So that is it.

160
00:13:39,980 --> 00:13:43,010
We are passing in the ID only.

161
00:13:43,040 --> 00:13:52,190
So it means that upon verification we are going to get the ID of the user only without the payload like

162
00:13:52,190 --> 00:13:54,080
foo name and username.

163
00:13:54,170 --> 00:13:56,000
So let's have a look.

164
00:13:56,060 --> 00:14:04,520
Now if I log in again, you can see that I gave back the token and I'm going to grab this token and

165
00:14:04,520 --> 00:14:09,590
then send as part of the request as payload to my header.

166
00:14:09,620 --> 00:14:13,730
Now let me change the token to this token.

167
00:14:13,730 --> 00:14:22,280
Now when I save it and the user, I'm not going to see all this details, but instead only the ID.

168
00:14:22,310 --> 00:14:23,960
So let's save it.

169
00:14:24,320 --> 00:14:33,680
If we see that now we have the ID only, but if you want you can also ignore the issue, add and retain

170
00:14:33,680 --> 00:14:36,620
only the user ID only.

171
00:14:36,650 --> 00:14:45,110
So inside our profile now to be able to get the actual user, you want to make a request to our database

172
00:14:45,110 --> 00:14:46,280
to fetch that.

173
00:14:46,310 --> 00:14:51,050
So after I here what we are going to do is that.

174
00:14:51,940 --> 00:14:57,370
Step number three is make requests to fetch.

175
00:14:59,470 --> 00:15:02,140
The decoded user.

176
00:15:02,230 --> 00:15:03,040
So here we go.

177
00:15:03,040 --> 00:15:13,420
Remember we have the ID as decoded user dot user dot ID, which is this user dot id.

178
00:15:13,420 --> 00:15:15,430
So const.

179
00:15:16,300 --> 00:15:18,010
User details.

180
00:15:19,040 --> 00:15:24,920
Our user is equal to less away that we making async here.

181
00:15:24,940 --> 00:15:25,570
Yes.

182
00:15:25,610 --> 00:15:36,950
And on the user model, let's find the user by ID and which is under decoded user dot user.

183
00:15:37,910 --> 00:15:39,460
Dart eyed.

184
00:15:39,650 --> 00:15:43,520
So now let's send the user details here.

185
00:15:44,210 --> 00:15:45,290
All right.

186
00:15:45,290 --> 00:15:46,360
So let's see.

187
00:15:46,370 --> 00:15:48,300
Let's go ahead and make the requests.

188
00:15:48,320 --> 00:15:49,790
Well, I guess some error.

189
00:15:49,790 --> 00:15:52,150
I think we are making something wrong here.

190
00:15:52,460 --> 00:15:53,600
Let's see.

191
00:15:54,770 --> 00:15:59,140
Cannot read properly of ID, I think.

192
00:15:59,150 --> 00:16:05,240
Well, let's go ahead and console.log the decoded user and see more details about the structure.

193
00:16:05,360 --> 00:16:07,400
I believe some of you have seen it.

194
00:16:08,280 --> 00:16:10,690
Let's try out and see what we have.

195
00:16:10,710 --> 00:16:11,460
Okay.

196
00:16:11,970 --> 00:16:14,690
We have got ID.

197
00:16:14,760 --> 00:16:15,300
Sorry.

198
00:16:15,340 --> 00:16:16,620
Is the ID?

199
00:16:16,650 --> 00:16:18,060
There is no user here.

200
00:16:18,090 --> 00:16:27,000
All right, so now let's remove this one and let's go to the file like that and let's send and we are

201
00:16:27,000 --> 00:16:27,660
here.

202
00:16:27,690 --> 00:16:36,240
So for this one, you can choose to sign the username and then the full name by doing this way.

203
00:16:36,540 --> 00:16:41,580
So here what you can do is we can structure that and retain what you want.

204
00:16:41,610 --> 00:16:41,980
Good.

205
00:16:42,000 --> 00:16:44,290
So that is how we can make use of it.

206
00:16:44,310 --> 00:16:48,860
Now we are able to access the user in our route.

207
00:16:48,870 --> 00:16:51,870
But what about protecting a route?

208
00:16:51,900 --> 00:16:58,920
So what we are going to do is that we are going to create a middleware instead of just writing inside

209
00:16:58,920 --> 00:17:00,540
this route here.

210
00:17:00,570 --> 00:17:08,730
We are going to create a modular and then pass into this route or any route to check if there is a user.

211
00:17:08,760 --> 00:17:11,900
Then you can go ahead and access any route.

212
00:17:11,910 --> 00:17:18,599
Otherwise, we need to log in to have a token before you can go ahead and access any route.

213
00:17:18,630 --> 00:17:21,119
Let's get into that in the next video.