1 00:00:00,900 --> 00:00:03,150 Instructor: It's time to build authentication. 2 00:00:03,150 --> 00:00:04,470 Now I know this is the stuff 3 00:00:04,470 --> 00:00:05,867 that I know a lot of you have been waiting for 4 00:00:05,867 --> 00:00:09,870 so I'm very excited to be talking about authentication. 5 00:00:09,870 --> 00:00:12,690 We're gonna take this on a pretty metered, very easy, 6 00:00:12,690 --> 00:00:14,550 very leveled approach. 7 00:00:14,550 --> 00:00:16,770 So we're not gonna speed through stuff too quickly. 8 00:00:16,770 --> 00:00:17,603 We're gonna make sure 9 00:00:17,603 --> 00:00:19,890 that we understand what's going on step by step. 10 00:00:19,890 --> 00:00:22,320 One thing I found really interesting about authentication 11 00:00:22,320 --> 00:00:23,970 when I was putting this section together 12 00:00:23,970 --> 00:00:24,840 is that there's not a lot 13 00:00:24,840 --> 00:00:27,690 of great end to end tutorials out there already. 14 00:00:27,690 --> 00:00:30,420 So there are many tutorials about authentication 15 00:00:30,420 --> 00:00:31,980 but almost every single one of them 16 00:00:31,980 --> 00:00:34,860 ends up skipping some very important step. 17 00:00:34,860 --> 00:00:36,270 So my goal here is to make sure 18 00:00:36,270 --> 00:00:38,910 that the app that we're going to build, 19 00:00:38,910 --> 00:00:41,280 which is gonna be all about authentication, 20 00:00:41,280 --> 00:00:45,480 is going to be rock steady with no shortcuts, 21 00:00:45,480 --> 00:00:47,190 no easy way out anywhere. 22 00:00:47,190 --> 00:00:49,560 So we're gonna make sure that everything works 23 00:00:49,560 --> 00:00:53,253 in a very production ready fashion as much as possible. 24 00:00:54,630 --> 00:00:55,860 So as we go through this process, 25 00:00:55,860 --> 00:00:58,590 we're gonna first talk about what authentication is 26 00:00:58,590 --> 00:01:01,260 and how we are going to authenticate users. 27 00:01:01,260 --> 00:01:02,520 We're then going to start working 28 00:01:02,520 --> 00:01:03,930 on these server side setups, 29 00:01:03,930 --> 00:01:06,180 so we're going to build an entire server solely 30 00:01:06,180 --> 00:01:10,113 for authentication with no react, no redux whatsoever. 31 00:01:11,070 --> 00:01:12,930 One thing that I get asked a lot about 32 00:01:12,930 --> 00:01:15,870 is what's the best backend for a React app? 33 00:01:15,870 --> 00:01:20,430 And so here's my absolute answer to to this question. 34 00:01:20,430 --> 00:01:24,180 What is the best backend for React application? 35 00:01:24,180 --> 00:01:26,520 The answer is there is no best backend 36 00:01:26,520 --> 00:01:28,260 for React application. 37 00:01:28,260 --> 00:01:30,180 All React and Redux care about 38 00:01:30,180 --> 00:01:32,490 are that they're being served JSON. 39 00:01:32,490 --> 00:01:33,323 That's all they care about. 40 00:01:33,323 --> 00:01:35,070 They just want JSON data. 41 00:01:35,070 --> 00:01:36,390 So as long as you have a backend 42 00:01:36,390 --> 00:01:39,960 that can serve some JSON data, it'll be good to go. 43 00:01:39,960 --> 00:01:42,780 The reason I mention that at this point is the server 44 00:01:42,780 --> 00:01:44,640 that we're gonna build here for authentication 45 00:01:44,640 --> 00:01:49,320 is not just limited to use with React and Redux. 46 00:01:49,320 --> 00:01:50,940 The server that we're going to put together 47 00:01:50,940 --> 00:01:52,320 is a hundred percent appropriate 48 00:01:52,320 --> 00:01:55,200 for any different type of application you want to use. 49 00:01:55,200 --> 00:01:57,540 We are going to building an API 50 00:01:57,540 --> 00:02:01,680 that can serve data to authenticated users. 51 00:02:01,680 --> 00:02:02,513 That's the key. 52 00:02:02,513 --> 00:02:04,560 That's what we're trying to build here. 53 00:02:04,560 --> 00:02:07,830 So step one is to make sure that we're on the same page 54 00:02:07,830 --> 00:02:09,150 when we're talking about authentication. 55 00:02:09,150 --> 00:02:09,983 I wanna make sure 56 00:02:09,983 --> 00:02:12,360 that we are talking about the exact same thing. 57 00:02:12,360 --> 00:02:14,490 So I've got a diagram that's gonna walk us 58 00:02:14,490 --> 00:02:16,413 through the authentication process. 59 00:02:18,720 --> 00:02:20,280 So on the left hand side is a column 60 00:02:20,280 --> 00:02:23,550 that indicates kind of stuff that's undertaken by our client 61 00:02:23,550 --> 00:02:25,710 or our React application. 62 00:02:25,710 --> 00:02:27,780 On the right hand side is stuff that's undertaken 63 00:02:27,780 --> 00:02:31,950 by our node application or our backend, our API. 64 00:02:31,950 --> 00:02:33,900 So this is the flow that we go through. 65 00:02:33,900 --> 00:02:37,290 The client is gonna supply a username and a password. 66 00:02:37,290 --> 00:02:40,200 The server is going to look at that username and password 67 00:02:40,200 --> 00:02:43,320 and it's gonna say either the credentials are bad, 68 00:02:43,320 --> 00:02:45,900 they don't match to what's saved, or they're good. 69 00:02:45,900 --> 00:02:47,250 If the credentials are good, 70 00:02:47,250 --> 00:02:50,223 we now consider our user to be authenticated. 71 00:02:51,060 --> 00:02:54,300 Now the key here is that when a user is authenticated, 72 00:02:54,300 --> 00:02:57,210 they should be able to make subsequent requests 73 00:02:57,210 --> 00:03:00,573 without having to resubmit the username and password. 74 00:03:01,590 --> 00:03:03,450 So when a user is authenticated, 75 00:03:03,450 --> 00:03:06,180 we want to hand them a piece of information 76 00:03:06,180 --> 00:03:08,970 that identifies them on all future requests. 77 00:03:08,970 --> 00:03:09,803 That's the key. 78 00:03:09,803 --> 00:03:10,980 This is the hard part right here. 79 00:03:10,980 --> 00:03:12,080 This is the hard part. 80 00:03:13,110 --> 00:03:16,710 Once a client has that identifying piece of information, 81 00:03:16,710 --> 00:03:19,260 they can now make authenticated requests 82 00:03:19,260 --> 00:03:22,230 and so at some point in time they can say, okay, 83 00:03:22,230 --> 00:03:25,230 I need some access to some protected resource. 84 00:03:25,230 --> 00:03:27,933 Here's my identifying piece of information. 85 00:03:28,950 --> 00:03:31,110 The client will pass that to the server 86 00:03:31,110 --> 00:03:32,430 and the server says, ah ha, 87 00:03:32,430 --> 00:03:34,770 I see you have included the identifying piece 88 00:03:34,770 --> 00:03:37,710 of information that authenticates this request. 89 00:03:37,710 --> 00:03:40,170 This a identifying information 90 00:03:40,170 --> 00:03:45,170 corresponds to user with email stevengrinder@gmail.com. 91 00:03:46,350 --> 00:03:50,250 You are authenticated, so here is your protected resource 92 00:03:50,250 --> 00:03:52,710 and then that process is just repeated over 93 00:03:52,710 --> 00:03:54,780 and over again so long 94 00:03:54,780 --> 00:03:57,900 as the client has that identifying piece of information. 95 00:03:57,900 --> 00:03:58,890 So the key here 96 00:03:58,890 --> 00:04:01,050 when we're really talking about authentication. 97 00:04:01,050 --> 00:04:03,300 We're talking about exchanging a username 98 00:04:03,300 --> 00:04:06,510 and a password for some identifying token 99 00:04:06,510 --> 00:04:10,200 or for some identifying piece of information. 100 00:04:10,200 --> 00:04:11,640 The client then includes that 101 00:04:11,640 --> 00:04:15,420 on all future requests that need to be authenticated. 102 00:04:15,420 --> 00:04:17,130 So again, the tough part 103 00:04:17,130 --> 00:04:19,649 is this identifying piece of information 104 00:04:19,649 --> 00:04:21,870 and this is what we're gonna spend a lot of time 105 00:04:21,870 --> 00:04:23,673 and a lot of effort to figure out. 106 00:04:25,440 --> 00:04:26,670 So now that we are on the same page 107 00:04:26,670 --> 00:04:28,620 about where we're headed, where we're going, 108 00:04:28,620 --> 00:04:30,660 let's get started in the next section. 109 00:04:30,660 --> 00:04:31,610 I'll see you there.