1
00:00:00,330 --> 00:00:06,050
Welcome back in this you know we're focusing on user authentication where you start off for short.

2
00:00:06,120 --> 00:00:10,890
In my experience authors something that students are really excited to learn about because they feel

3
00:00:10,890 --> 00:00:14,710
that it makes her apps legitimate and makes them feel real and usable.

4
00:00:14,760 --> 00:00:18,210
If you can sign up you can log in and you can log out.

5
00:00:18,690 --> 00:00:21,030
So that makes it a fun and exciting thing to teach.

6
00:00:21,270 --> 00:00:26,580
But the truth is it's also a really hard thing to teach because authentication is pretty complicated

7
00:00:26,580 --> 00:00:27,140
.

8
00:00:27,180 --> 00:00:31,130
There's a lot of moving pieces that have to fit together in just the right way to make it work.

9
00:00:31,140 --> 00:00:32,490
A lot of big concepts.

10
00:00:32,670 --> 00:00:34,850
And honestly it's a lot of code to make it work.

11
00:00:35,130 --> 00:00:40,170
Fortunately for us there are a lot of great tools out there that help us implement authentication quickly

12
00:00:40,440 --> 00:00:41,530
and safely.

13
00:00:41,550 --> 00:00:45,060
Now explain what I mean by safely later in this video.

14
00:00:45,060 --> 00:00:49,860
Before I dive into explaining the tools and the workflow of authentication I want to spend some time

15
00:00:49,860 --> 00:00:53,540
giving you some insight into my thought process behind teaching art.

16
00:00:53,640 --> 00:00:57,990
It's one of those topics that I've spent a lot of time teaching it but also teaching it in multiple

17
00:00:57,990 --> 00:00:59,120
different ways.

18
00:00:59,520 --> 00:01:02,960
When you're teaching user authentication there's a choice that you have to make.

19
00:01:03,210 --> 00:01:09,090
And for me that choice was going to teach authentication from scratch not using any tools at all and

20
00:01:09,090 --> 00:01:14,580
making sure that students focus on the ins and outs of every important concept and it might take five

21
00:01:14,580 --> 00:01:15,660
six hours.

22
00:01:15,660 --> 00:01:17,790
It might be a lot of lessons a lot of videos.

23
00:01:17,910 --> 00:01:23,010
We might end up losing some students but we'll make sure that everyone understands how authentication

24
00:01:23,010 --> 00:01:23,960
works.

25
00:01:24,120 --> 00:01:30,000
Or do we use some of the existing tools out there tools that help us add user authentication faster

26
00:01:30,120 --> 00:01:35,850
simpler and with way fewer lines of code and it all boils down to this issue of is it more important

27
00:01:35,850 --> 00:01:38,650
for students to have a deep understanding of how things work.

28
00:01:38,760 --> 00:01:43,650
Is that the priority or is it a priority to have students make things fast.

29
00:01:43,650 --> 00:01:49,350
So is it about conceptual understanding and depth of knowledge or is it about making stuff.

30
00:01:49,350 --> 00:01:52,230
Obviously in an ideal world we'd want both.

31
00:01:52,230 --> 00:01:56,910
We want everyone to understand the ins and outs of everything that we teach and we want students to

32
00:01:56,910 --> 00:02:00,830
have tons of practical knowledge and be able to make things quickly.

33
00:02:01,350 --> 00:02:06,930
In the past I've tried both approaches to teaching where I started out by trying to give students a

34
00:02:06,960 --> 00:02:12,060
deep understanding of every concept and how it all worked and fit together before we even implemented

35
00:02:12,060 --> 00:02:12,900
anything.

36
00:02:13,290 --> 00:02:17,400
And then I've also done the opposite where we just try and make some thing work first and then come

37
00:02:17,400 --> 00:02:19,350
back and talk about how it works.

38
00:02:19,530 --> 00:02:24,240
And I've spent even more time thinking about how we want to approach it in this video course I've recorded

39
00:02:24,240 --> 00:02:28,260
this lecture way too many times I've reworked rewritten all the code.

40
00:02:28,260 --> 00:02:32,190
It's one that I want to get right because it's really important and one that a lot of students look

41
00:02:32,190 --> 00:02:33,120
forward to.

42
00:02:33,480 --> 00:02:38,850
So what I've decided to do is to have two units in this first unit on authentication that you're currently

43
00:02:38,850 --> 00:02:39,660
watching.

44
00:02:39,660 --> 00:02:43,040
I'm going to start by giving you a very very quick overview.

45
00:02:43,260 --> 00:02:46,740
Not at all in depth but just a quick overview of how authentication works.

46
00:02:46,860 --> 00:02:51,450
And then we're going to use these tools that I talked about that make our lives easier and make the

47
00:02:51,450 --> 00:02:52,300
code shorter.

48
00:02:52,320 --> 00:02:53,730
We're going to use them right away.

49
00:02:53,970 --> 00:02:59,400
And the focus is on just making something that has both an occasion and then one of the optional units

50
00:02:59,410 --> 00:02:59,450
.

51
00:02:59,460 --> 00:03:05,610
At the very end of this course is going to be a truly deep dive into authentication where we'll actually

52
00:03:05,610 --> 00:03:09,900
implement our own user authentication from scratch where we won't use any of the tools and I'm going

53
00:03:09,900 --> 00:03:15,390
to show you now the goal is to have the best of both worlds going to start by just making something

54
00:03:15,390 --> 00:03:15,620
.

55
00:03:15,750 --> 00:03:20,460
And I'm not going to breeze over all of the concepts but I'm not going to spend you know an hour plus

56
00:03:20,520 --> 00:03:21,970
talking about how things work.

57
00:03:22,170 --> 00:03:27,030
All right so now that we've gotten that out of the way this big ideological discussion here I want to

58
00:03:27,030 --> 00:03:31,350
now introduce the tools that we're going to use so we're going to be using something called passport

59
00:03:31,400 --> 00:03:31,470
.

60
00:03:31,500 --> 00:03:32,320
Yes.

61
00:03:32,610 --> 00:03:37,470
And we're not only using it because it's something that will make our life easier make our code shorter

62
00:03:37,710 --> 00:03:39,430
make this implementation faster.

63
00:03:39,720 --> 00:03:42,620
But it's also something that's used a lot in the real world.

64
00:03:42,750 --> 00:03:47,410
Lots and lots of applications use passport J.S. to implement their authentication.

65
00:03:47,700 --> 00:03:49,320
So let me show you the home page here.

66
00:03:49,560 --> 00:03:55,230
This is Passport Chaiya stuttered and see the little tagline says simple unobtrusive authentication

67
00:03:55,230 --> 00:04:01,350
for no J US passport is authentication middleware for node extremely flexible and modular passport can

68
00:04:01,350 --> 00:04:05,200
be unobtrusively dropped into any express based web application.

69
00:04:05,280 --> 00:04:10,950
A comprehensive set of strategies support authentication using a username and password Facebook Twitter

70
00:04:11,070 --> 00:04:12,210
and more.

71
00:04:12,210 --> 00:04:16,280
And then you can see down here there's actually more than 300 different strategies.

72
00:04:16,440 --> 00:04:21,510
So strategy is referred to different types of authentication different ways of authenticating people

73
00:04:21,930 --> 00:04:27,240
whether it's through having the user type an email and a password traditional authentication or if it's

74
00:04:27,240 --> 00:04:32,520
through a service like Facebook or Twitter which you've probably seen before on a site or an application

75
00:04:32,880 --> 00:04:36,300
where it asks you to log in through Google or Twitter or Facebook.

76
00:04:36,390 --> 00:04:41,690
And there are tons more that we can actually view all of them and we can search through them so there's

77
00:04:41,690 --> 00:04:45,220
things like Fitbit you can log in through Fitbit.

78
00:04:45,440 --> 00:04:49,450
We have Spotify Reddit tumblr Google plus.

79
00:04:49,700 --> 00:04:53,630
But by far the most popular are going to be Facebook Twitter and Google.

80
00:04:53,620 --> 00:04:58,220
And then also what's known as local authentication which is what we'll start with here which is just

81
00:04:58,490 --> 00:05:00,620
username or email and password.

82
00:05:00,620 --> 00:05:01,170
OK.

83
00:05:01,370 --> 00:05:03,900
So that's the base tool that we're going to use passport.

84
00:05:03,940 --> 00:05:07,660
Yes it will be a huge help in our implementation of user.

85
00:05:08,060 --> 00:05:12,960
But we're also going to use another package called Passport local which I have here.

86
00:05:13,190 --> 00:05:17,280
And this is one of those schemes or strategies for authentication.

87
00:05:17,360 --> 00:05:25,160
So there's a passport Facebook a passport Twitter passport Google and passport local and 300 plus different

88
00:05:25,160 --> 00:05:30,700
strategies passport local is for username and password which is what we'll be doing to start.

89
00:05:30,890 --> 00:05:36,610
But what's really great about passport is that later in this course we can go and add Facebook or Twitter

90
00:05:36,800 --> 00:05:42,290
and we can keep local as well and we can have three 5 10 different ways of logging into our app.

91
00:05:42,320 --> 00:05:47,420
Usually you want to keep it pretty limited but we can have as many as we want by using Passport and

92
00:05:47,420 --> 00:05:48,500
to name passport.

93
00:05:48,530 --> 00:05:52,490
It's about providing this entry point into all sorts of destinations.

94
00:05:52,870 --> 00:05:58,240
OK and there's one more package we're going to use which is called Passport local mongoose.

95
00:05:58,520 --> 00:06:04,460
So I have the get hub open for that and passport local Mongoose is another package that will just help

96
00:06:04,460 --> 00:06:09,660
us implement authentication with passport and it is specially made to work with mongoose.

97
00:06:09,830 --> 00:06:11,450
So we don't have to use it.

98
00:06:11,540 --> 00:06:16,310
We could get away with just using Passport local the passport local Mongoose is going to help us make

99
00:06:16,310 --> 00:06:19,430
it even faster and make it simpler for us.

100
00:06:19,520 --> 00:06:24,620
And then of course in the optional off from scratch section we'll be creating art from scratch without

101
00:06:24,650 --> 00:06:25,760
any of these tools.

102
00:06:25,980 --> 00:06:26,470
OK.

103
00:06:26,570 --> 00:06:28,290
So those are the three main tools.

104
00:06:28,340 --> 00:06:32,810
Now I'm going to give you a quick demo of what we're going to make upfront which I'll warn you it's

105
00:06:32,810 --> 00:06:34,420
not very exciting visually.

106
00:06:34,520 --> 00:06:36,020
I didn't style it at all.

107
00:06:36,020 --> 00:06:39,840
But we will be adding you Seraph to yo camp and we will be styling that.

108
00:06:40,000 --> 00:06:42,940
But for now this is a barebones implementation that I want to show you.

109
00:06:43,220 --> 00:06:45,870
So we started out on this home page and we have three buttons.

110
00:06:46,120 --> 00:06:53,420
Log in register and log out and there's a secret page slash secret that you can only view if you're

111
00:06:53,420 --> 00:06:53,930
logged in.

112
00:06:53,960 --> 00:07:00,770
So if I try and go there right now I'm not logged in and it takes me back to slash a log in and it shows

113
00:07:00,760 --> 00:07:06,510
me the log in form so I'll register and I'll show you that we can then go to the secret page.

114
00:07:06,830 --> 00:07:15,680
So user name I'll do rusty four or five six and password will just be password and then I'll sign up

115
00:07:15,680 --> 00:07:17,410
.

116
00:07:18,350 --> 00:07:21,030
And it takes me to slash secret which I can now visit.

117
00:07:21,290 --> 00:07:26,090
And on the secret page I have a horribly embarrassing photo from my cell from my seventh or eighth grade

118
00:07:26,380 --> 00:07:28,040
when I got my first laptop.

119
00:07:28,040 --> 00:07:28,900
Just terrible.

120
00:07:29,090 --> 00:07:33,180
So that's slash secret secret for a reason obviously.

121
00:07:33,200 --> 00:07:41,530
And now if I go to log out I can no longer go to slash secret it redirects me to slash logon and I can

122
00:07:41,540 --> 00:07:42,670
also log in here.

123
00:07:42,710 --> 00:07:49,920
So I'll use Rusti four five six with the correct password which is just password and I sign up or log

124
00:07:49,920 --> 00:07:58,370
in and it takes me back to such secret and I can go to the home page and back to slash secret because

125
00:07:58,370 --> 00:08:00,620
I'm staying logged in.

126
00:08:00,620 --> 00:08:06,180
So the way that this works the key concept that everything hinges around is something called sessions

127
00:08:06,180 --> 00:08:06,880
.

128
00:08:07,030 --> 00:08:09,680
I'll give a quick summary of what sessions are.

129
00:08:09,830 --> 00:08:16,360
Basically it's GTP is supposed to be a stateless protocol which means that when you send requests those

130
00:08:16,370 --> 00:08:21,920
requests are one time things and they don't contain information about your history or the previous requests

131
00:08:21,920 --> 00:08:22,660
that you've made.

132
00:08:22,730 --> 00:08:24,020
They're not linked together.

133
00:08:24,050 --> 00:08:29,420
A request doesn't have a state it's just a one time transaction which would make it really hard to implement

134
00:08:29,420 --> 00:08:32,690
user off because I want to be able to stay logged in.

135
00:08:32,930 --> 00:08:38,680
I want the server to know that Rustie 4 or 5 6 is still logged in and the way that we do that is by

136
00:08:38,690 --> 00:08:41,280
using sessions and what sessions will do.

137
00:08:41,360 --> 00:08:44,750
They're just a way to make HTP not stateless.

138
00:08:44,750 --> 00:08:49,880
There are a way to provide state so when every request that I make on this app when I'm logged in when

139
00:08:49,880 --> 00:08:55,300
someone's logged in there's a little bit of information about that user that is saved in that request

140
00:08:55,550 --> 00:09:00,480
that is sent to the server and it's not actually the user password of the whole user name.

141
00:09:00,620 --> 00:09:05,320
But it's a little bit of information and it's encoded and it's basically made to be a secret.

142
00:09:05,450 --> 00:09:10,760
And then it gets to my server and then passport will see that and it will translated into something

143
00:09:10,760 --> 00:09:16,870
that it understands basically crack the code or unencrypted and it will use that information to tell

144
00:09:16,880 --> 00:09:18,250
if someone is logged in or not.

145
00:09:18,470 --> 00:09:21,350
So this will make more sense once we add the implementation.

146
00:09:21,350 --> 00:09:26,460
But the key concept is that Sessions allow us to have state in our HTP requests.

147
00:09:26,620 --> 00:09:27,730
So I can send data.

148
00:09:27,770 --> 00:09:33,670
I can go back to the home page it it still knows that I'm logged in as Rustie 4 5 6 and I can go back

149
00:09:33,670 --> 00:09:36,260
to secret without any problems.

150
00:09:36,590 --> 00:09:41,410
And that's because every time I make a request I'm sending a little tiny piece of information that says

151
00:09:41,680 --> 00:09:44,210
this is Rustie four five six who's logged in.

152
00:09:44,210 --> 00:09:48,620
And then as soon as i log out that piece of information is gone.

153
00:09:49,120 --> 00:09:55,120
So now when I go to slash secret I have some logic that says if there's no user in the session then

154
00:09:55,280 --> 00:09:57,540
don't let that person go to such secret.

155
00:09:57,620 --> 00:09:59,370
Redirect them to slash logon.

156
00:09:59,670 --> 00:09:59,940
OK.

157
00:09:59,960 --> 00:10:04,400
So we'll be going over all of that in more detail in the next video when we actually create this simple

158
00:10:04,390 --> 00:10:09,440
application and implement sessions to get help with our sessions.

159
00:10:09,430 --> 00:10:14,220
We're going to use a package called Express session that will see in the next video as well.

160
00:10:14,750 --> 00:10:16,870
OK so that's all I want to introduce for now.

161
00:10:16,880 --> 00:10:23,890
So we're going to be using Passport J as the local scheme along with the passport local mongoose module

162
00:10:23,890 --> 00:10:29,510
or package that will help us implement user authentication pretty quickly and relatively painlessly

163
00:10:30,130 --> 00:10:32,970
and we're going to get it going in the next video in a simple app.

164
00:10:33,080 --> 00:10:38,000
And then once we have this working we're then going to go back to camp and implement user auth there

165
00:10:38,010 --> 00:10:38,530
.

166
00:10:39,050 --> 00:10:40,100
All right I'll see in the next video