1
00:00:00,000 --> 00:00:03,480
Instructor: In the last section we discussed JWTs

2
00:00:03,480 --> 00:00:05,790
and how we were gonna create them.

3
00:00:05,790 --> 00:00:07,140
We were gonna take a user ID,

4
00:00:07,140 --> 00:00:08,670
combine it with our secret string,

5
00:00:08,670 --> 00:00:11,400
and poof, here's our web token.

6
00:00:11,400 --> 00:00:13,110
Now, as you might imagine, we're not going

7
00:00:13,110 --> 00:00:14,850
to implement all the logic

8
00:00:14,850 --> 00:00:16,650
for creating a token from scratch.

9
00:00:16,650 --> 00:00:19,620
Instead, we're gonna use an existing library.

10
00:00:19,620 --> 00:00:20,970
So the library that we're going to use

11
00:00:20,970 --> 00:00:25,380
to create a JSON web token is called jwt-simple.

12
00:00:25,380 --> 00:00:28,650
So we'll need to install it as an NPM package.

13
00:00:28,650 --> 00:00:31,200
Over my terminal, I'm gonna stop my server,

14
00:00:31,200 --> 00:00:36,170
and then I'll run npm install --save jwt-simple.

15
00:00:41,760 --> 00:00:43,050
So this is a small library,

16
00:00:43,050 --> 00:00:44,580
it should only take a second to install,

17
00:00:44,580 --> 00:00:46,200
and boom, there we go.

18
00:00:46,200 --> 00:00:49,060
I'm gonna start my server back up with npm run dev

19
00:00:50,130 --> 00:00:52,263
and then flip back over to my code editor.

20
00:00:55,140 --> 00:00:57,000
So remember, to create a token,

21
00:00:57,000 --> 00:00:59,640
we have to provide a secret string of sorts

22
00:00:59,640 --> 00:01:00,473
and we wanna make sure

23
00:01:00,473 --> 00:01:03,630
that we never share this secret string with anyone else.

24
00:01:03,630 --> 00:01:07,170
So to house our secret string,

25
00:01:07,170 --> 00:01:10,050
I'm gonna create a new file in my project,

26
00:01:10,050 --> 00:01:12,750
I'm gonna call it config.js.

27
00:01:12,750 --> 00:01:15,100
I'm gonna make it in my root project directory.

28
00:01:16,890 --> 00:01:19,266
So the purpose of this file is

29
00:01:19,266 --> 00:01:23,523
to hold application secrets and config.

30
00:01:24,639 --> 00:01:27,273
I'm gonna create an object,

31
00:01:28,980 --> 00:01:33,300
and this object is going to hold my secret string.

32
00:01:33,300 --> 00:01:34,500
And as far as the string goes,

33
00:01:34,500 --> 00:01:37,080
it can be any sequence of characters you want.

34
00:01:37,080 --> 00:01:39,630
I'm gonna put in just some random sequence like so.

35
00:01:41,370 --> 00:01:43,710
Now to make sure that I never commit this file to GitHub

36
00:01:43,710 --> 00:01:45,390
and post it publicly,

37
00:01:45,390 --> 00:01:48,150
I'm gonna go over to my .gitignore file,

38
00:01:48,150 --> 00:01:52,170
and I'm gonna add config.js to it.

39
00:01:52,170 --> 00:01:53,460
That means that I'll never end up

40
00:01:53,460 --> 00:01:55,083
committing this file right here.

41
00:01:59,190 --> 00:02:02,073
Okay, so we've got our secret in place.

42
00:02:04,680 --> 00:02:07,890
It's a random string of characters, very good.

43
00:02:07,890 --> 00:02:10,740
I'm gonna go back over to the authentication controller.

44
00:02:10,740 --> 00:02:12,330
And at the top we will import

45
00:02:12,330 --> 00:02:15,000
both the JWT library that we just installed

46
00:02:15,000 --> 00:02:18,600
and the config object that we just created.

47
00:02:18,600 --> 00:02:23,600
So I will say const jwt = (require'jwt-simple')

48
00:02:25,680 --> 00:02:27,220
and then I will also import

49
00:02:28,380 --> 00:02:30,570
the config object that we just created.

50
00:02:30,570 --> 00:02:34,263
So I'll go up one directory and I'll get config.

51
00:02:35,700 --> 00:02:38,160
Now we need to make a function that is going

52
00:02:38,160 --> 00:02:42,300
to take a user's ID and encode it with our secret.

53
00:02:42,300 --> 00:02:43,770
So I'm gonna create a new function

54
00:02:43,770 --> 00:02:45,697
and I'm gonna call it tokenForUser.

55
00:02:48,780 --> 00:02:51,520
The only argument to this is going to be a user model

56
00:02:52,470 --> 00:02:53,853
and I'll return from it,

57
00:02:54,720 --> 00:02:57,550
I'm gonna use the JWT library to encode

58
00:02:59,430 --> 00:03:00,900
some amount of information

59
00:03:00,900 --> 00:03:02,610
that we'll add in here in just a second,

60
00:03:02,610 --> 00:03:06,453
and it's going to be encoded using our secret string.

61
00:03:07,470 --> 00:03:09,900
So the first argument here is the information

62
00:03:09,900 --> 00:03:11,310
that we want to encode.

63
00:03:11,310 --> 00:03:13,500
The second argument is the secret

64
00:03:13,500 --> 00:03:15,400
that we're going to use to encrypt it.

65
00:03:17,370 --> 00:03:19,200
So the question is now, well,

66
00:03:19,200 --> 00:03:20,880
what information do we wanna put in here?

67
00:03:20,880 --> 00:03:23,130
We could put in any information that we want.

68
00:03:24,510 --> 00:03:26,130
In the diagram they were looking at earlier,

69
00:03:26,130 --> 00:03:28,170
I said, "Hey, let's use the user ID."

70
00:03:28,170 --> 00:03:30,270
And that's actually a pretty reasonable idea.

71
00:03:30,270 --> 00:03:31,147
You might be thinking,

72
00:03:31,147 --> 00:03:33,487
"Well, "let's encode the user's email address

73
00:03:33,487 --> 00:03:36,180
"and then we can just look at the user by email."

74
00:03:36,180 --> 00:03:38,250
And that doesn't always quite work out.

75
00:03:38,250 --> 00:03:39,180
And the reason for that is

76
00:03:39,180 --> 00:03:41,550
that the user's email can change over time.

77
00:03:41,550 --> 00:03:43,620
If they ever wanna change their email

78
00:03:43,620 --> 00:03:46,320
and then they have some existing tokens sitting around

79
00:03:46,320 --> 00:03:49,500
that make reference to some old email address,

80
00:03:49,500 --> 00:03:52,620
that might lead to some weird stuff.

81
00:03:52,620 --> 00:03:55,800
Once we create a user, they should always have the same ID.

82
00:03:55,800 --> 00:03:58,293
So we will just encode the user's ID.

83
00:04:00,480 --> 00:04:01,980
The second thing we gotta think about is

84
00:04:01,980 --> 00:04:03,210
that this is an object.

85
00:04:03,210 --> 00:04:06,900
We need to assign the key, or excuse me, the ID to some key.

86
00:04:06,900 --> 00:04:09,900
I'm going to put a very particular key in here

87
00:04:09,900 --> 00:04:12,000
and then we'll talk about why I'm using it.

88
00:04:12,000 --> 00:04:16,320
I'm gonna put in sub: user.id.

89
00:04:16,320 --> 00:04:18,750
So what is sub exactly, right?

90
00:04:18,750 --> 00:04:21,120
What is sub doing for us?

91
00:04:21,120 --> 00:04:23,460
So JWT, JSON Web Token,

92
00:04:23,460 --> 00:04:24,960
is not something that I just made up,

93
00:04:24,960 --> 00:04:27,270
it's not something that any one guy made up.

94
00:04:27,270 --> 00:04:30,900
It is a standard, it is a convention.

95
00:04:30,900 --> 00:04:35,550
As a convention, JSON Web Tokens have a sub property

96
00:04:35,550 --> 00:04:38,100
which is short for subject.

97
00:04:38,100 --> 00:04:41,460
Subject meaning who is this token about?

98
00:04:41,460 --> 00:04:43,740
Who does this token belong to?

99
00:04:43,740 --> 00:04:45,780
So we're going to say that the subject

100
00:04:45,780 --> 00:04:49,653
of this token is this very specific user.

101
00:04:51,600 --> 00:04:53,250
I'm also gonna add in one other piece

102
00:04:53,250 --> 00:04:54,990
of information on here.

103
00:04:54,990 --> 00:04:57,930
I'm going to add in a timestamp

104
00:04:57,930 --> 00:04:59,850
of when this token was issued.

105
00:04:59,850 --> 00:05:03,387
So I'm gonna say new Date().getTime();

106
00:05:04,410 --> 00:05:06,840
and I'm gonna add on another property to my token,

107
00:05:06,840 --> 00:05:08,853
and it's gonna be iat.

108
00:05:11,640 --> 00:05:14,610
iat is another convention of JSON Web Tokens

109
00:05:14,610 --> 00:05:17,460
and it stands for issued at time.

110
00:05:17,460 --> 00:05:18,960
And so I'm gonna say that it was issued

111
00:05:18,960 --> 00:05:21,303
at this instant right now.

112
00:05:23,100 --> 00:05:24,720
All right, let's save this.

113
00:05:24,720 --> 00:05:25,950
I wanna do two things here.

114
00:05:25,950 --> 00:05:28,080
I wanna first add the token

115
00:05:28,080 --> 00:05:30,330
to our response to the signup route.

116
00:05:30,330 --> 00:05:32,400
And then I wanna go just quickly refer you

117
00:05:32,400 --> 00:05:34,380
to some documentation on JWT

118
00:05:34,380 --> 00:05:36,660
so you can do some reading if you want to look

119
00:05:36,660 --> 00:05:39,420
at all these different properties that are available.

120
00:05:39,420 --> 00:05:41,485
So I've got this token for user method

121
00:05:41,485 --> 00:05:46,110
and down inside of our success handler for user.save,

122
00:05:46,110 --> 00:05:49,540
we're going to replace success: true with

123
00:05:51,060 --> 00:05:53,910
token is tokenForUser(user).

124
00:05:57,810 --> 00:06:00,600
So let's give this a shot in Postman now.

125
00:06:00,600 --> 00:06:02,550
I'll flip over to Postman.

126
00:06:02,550 --> 00:06:04,230
I'm still on my signup route.

127
00:06:04,230 --> 00:06:08,313
I'm gonna put in a unique email, I'll send it,

128
00:06:09,150 --> 00:06:11,703
and I now get back a complete token.

129
00:06:12,840 --> 00:06:15,420
Cool, so this is looking pretty darn good.

130
00:06:15,420 --> 00:06:16,740
I'm gonna flip back over to the code

131
00:06:16,740 --> 00:06:19,263
and I'm gonna open up Chrome really quick.

132
00:06:23,070 --> 00:06:24,330
And inside of Chrome

133
00:06:24,330 --> 00:06:26,460
I just wanna give you some resources on JWT

134
00:06:26,460 --> 00:06:27,690
if you wanna do more reading.

135
00:06:27,690 --> 00:06:30,370
So we can just search for JWT token

136
00:06:31,260 --> 00:06:35,043
and the first result on here is gonna be jwt.io.

137
00:06:36,690 --> 00:06:40,440
So if you go here, there's a fantastic discussion

138
00:06:40,440 --> 00:06:42,960
about exactly what web token is

139
00:06:42,960 --> 00:06:46,350
and all the different libraries that are available

140
00:06:46,350 --> 00:06:47,640
and a lot of different properties

141
00:06:47,640 --> 00:06:49,743
that you can issue on JWTs as well.

142
00:06:51,300 --> 00:06:53,400
So feel free to give a read through this.

143
00:06:53,400 --> 00:06:56,250
Otherwise just know that we are using the sub

144
00:06:56,250 --> 00:07:00,096
and issued at time properties of JWT.

145
00:07:00,096 --> 00:07:02,100
Okay, So this is looking pretty good.

146
00:07:02,100 --> 00:07:03,750
I'm happy we got our token.

147
00:07:03,750 --> 00:07:04,680
This is fantastic.

148
00:07:04,680 --> 00:07:07,080
We can now make authenticated requests in the future

149
00:07:07,080 --> 00:07:11,175
once we figure out how to decode the token in the future.

150
00:07:11,175 --> 00:07:13,353
So let's continue in the next section.