1 00:00:00,600 --> 00:00:05,340 In the last section we finished up with the first phase of authentication side of our application so 2 00:00:05,340 --> 00:00:10,200 the user has been sent to Google the user came back to our application and we now have some details 3 00:00:10,200 --> 00:00:11,630 about the user. 4 00:00:11,640 --> 00:00:17,460 So at this point if we are strictly following this diagram apparently we need to create a new record 5 00:00:17,460 --> 00:00:21,360 in the database something something cookie. 6 00:00:21,990 --> 00:00:22,440 OK. 7 00:00:22,440 --> 00:00:24,040 Well this all seems kind of weird. 8 00:00:24,290 --> 00:00:30,630 So maybe before we just dive headfirst into all this stuff I think that maybe we should have a little 9 00:00:30,630 --> 00:00:35,830 bit of a discussion to figure out exactly what is going on with authentication in our app. 10 00:00:35,910 --> 00:00:37,450 Why do we care about a database. 11 00:00:37,470 --> 00:00:39,540 Why do we care about this cookie thing. 12 00:00:39,840 --> 00:00:42,530 Why the heck are we even using Google Earth at all. 13 00:00:42,540 --> 00:00:45,200 All like what does that really doing for us. 14 00:00:45,210 --> 00:00:49,140 So in this section we're going to try to answer a couple of these questions. 15 00:00:49,140 --> 00:00:54,230 Now I want to preface this talk I want to preface this video by telling you that some of the stuff that 16 00:00:54,240 --> 00:00:58,820 we're about to discuss and really all this stuff in general is not easy. 17 00:00:58,860 --> 00:00:59,950 It is not easy. 18 00:01:00,030 --> 00:01:00,550 It's hard. 19 00:01:00,570 --> 00:01:01,430 It's really hard. 20 00:01:01,440 --> 00:01:02,760 It's really darned hard. 21 00:01:02,770 --> 00:01:07,680 I'm not going to lie but the reason that we're going through all this is because that is why you are 22 00:01:07,680 --> 00:01:13,800 here taking this course you're taking this course because you want to understand these hard to understand 23 00:01:13,800 --> 00:01:15,560 things these tough things. 24 00:01:15,810 --> 00:01:19,830 I could have easily said when I was putting this course together I could have easily said hey let's 25 00:01:19,830 --> 00:01:24,510 go just do like a two new application with re-act redux Expressen Longo. 26 00:01:24,570 --> 00:01:26,360 Just do a to do app and then call a day. 27 00:01:26,400 --> 00:01:28,740 Call it a day and boom that's our course. 28 00:01:28,920 --> 00:01:32,480 We can definitely take the easy way out here but that's not why we're here. 29 00:01:32,490 --> 00:01:37,890 We're here because we want to learn and understand how these really complex and tough to understand 30 00:01:37,890 --> 00:01:40,790 systems are working on our machines. 31 00:01:41,100 --> 00:01:43,370 So kind of a pep talk to keep them in mind. 32 00:01:43,380 --> 00:01:49,260 Yes this stuff is hard but you gotta take a little bit of time to kind of to digest it before you really 33 00:01:49,260 --> 00:01:52,000 comprehend it and understand it. 34 00:01:52,020 --> 00:01:58,410 So with all that in mind in this section we're going to figure out what it really means to be authenticated 35 00:01:58,440 --> 00:02:02,700 inside of our application and why we care about authentication at all. 36 00:02:02,820 --> 00:02:06,570 So we're going to look at a couple of different diagrams that are going to help us understand some kind 37 00:02:06,570 --> 00:02:11,600 of basic concepts and maybe some of these seem really obvious to you maybe you understand them already. 38 00:02:11,730 --> 00:02:15,390 But I want to make sure that we are 100 percent on the same page. 39 00:02:15,420 --> 00:02:20,010 So the first thing I want you to understand is why we care about authentication at all like what it 40 00:02:20,010 --> 00:02:24,570 really does for us and what it really means to be logged into our application. 41 00:02:24,570 --> 00:02:30,350 So first thing to understand is that TTP is stateless. 42 00:02:30,450 --> 00:02:37,630 Remember we communicate between our browser and our Express Web server by HTP requests. 43 00:02:37,800 --> 00:02:45,390 And when we talk about AJAX requests Ajax requests are still HTP requests HTP requests are stateless. 44 00:02:45,390 --> 00:02:53,300 And what that means is between any two given requests that we make HTP inherently just like right out 45 00:02:53,300 --> 00:03:00,510 of the box without doing any special stuff with it has no way to identify or share information between 46 00:03:00,510 --> 00:03:02,310 two separate requests. 47 00:03:02,310 --> 00:03:08,520 And so what I mean by that is if we make one request from the browser to the server and say hey here's 48 00:03:08,520 --> 00:03:14,100 some like email and password please log us in and the server says Oh that looks like the correct email 49 00:03:14,100 --> 00:03:14,580 and password. 50 00:03:14,580 --> 00:03:14,900 Great. 51 00:03:14,910 --> 00:03:19,290 You're now logged in and then sends the response back and then say five minutes later. 52 00:03:19,410 --> 00:03:25,080 We then do a follow up request and say hey can I have a list of all my different posts by default with 53 00:03:25,080 --> 00:03:26,040 age TTP. 54 00:03:26,100 --> 00:03:27,920 The server would say what. 55 00:03:27,960 --> 00:03:28,820 Who are you. 56 00:03:29,010 --> 00:03:29,820 You're logged in. 57 00:03:29,820 --> 00:03:30,900 You say you're logged in. 58 00:03:30,900 --> 00:03:31,700 Who are you. 59 00:03:31,710 --> 00:03:33,320 I have no idea who you are. 60 00:03:33,420 --> 00:03:39,690 So that is because by default information by Rick it between requests are not is not shared. 61 00:03:39,930 --> 00:03:47,910 So we can't really identify who is making any given request between any given number of requests. 62 00:03:47,910 --> 00:03:52,860 So how do we get around this because obviously we log into applications all day and we have this idea 63 00:03:52,860 --> 00:03:53,850 of authentication. 64 00:03:53,850 --> 00:03:56,610 So how do we actually solve this problem. 65 00:03:57,180 --> 00:03:57,420 OK. 66 00:03:57,420 --> 00:03:59,870 So here's what's really going on here is here. 67 00:03:59,880 --> 00:04:05,280 This right here is what is really happening with every authentication scheme for every application you 68 00:04:05,280 --> 00:04:07,110 ever use in your life. 69 00:04:07,200 --> 00:04:12,900 You've got your browser your browser makes some requests to some server and says Hey please. 70 00:04:12,920 --> 00:04:20,700 I mean you provide along some e-mail and password or maybe some username and password whatever might 71 00:04:20,700 --> 00:04:22,880 be the server receives it. 72 00:04:22,890 --> 00:04:27,990 It says OK it looks like you gave you the right e-mail and password you are now considered to be logged 73 00:04:27,990 --> 00:04:28,920 in. 74 00:04:28,940 --> 00:04:33,510 Here is some identifying piece of information that is unique to you. 75 00:04:33,510 --> 00:04:39,150 Whoever just made this request right here here's some unique identifying piece of information to you. 76 00:04:39,210 --> 00:04:44,910 And so the server responds with that unique identifying piece of information inside the request that 77 00:04:44,910 --> 00:04:46,440 gets sent back to the browser. 78 00:04:46,740 --> 00:04:54,920 And so we can refer to that as cookie token whatever calling that a cookie is super super correct. 79 00:04:54,920 --> 00:04:56,830 It'd be best to refer to it as a token. 80 00:04:56,850 --> 00:05:00,610 And so that's what we're going to refer to it as we're going to say that the server gives us back a 81 00:05:00,610 --> 00:05:08,260 token and that token basically says hey this is my proof that like five minutes ago or one day ago or 82 00:05:08,260 --> 00:05:14,890 three days ago I logged into the application and this token is unique to me like this token corresponds 83 00:05:15,190 --> 00:05:18,400 to whoever made this initial log in request. 84 00:05:18,400 --> 00:05:23,560 And so the key here is on any follow up request that our browser ever makes to the server. 85 00:05:23,690 --> 00:05:29,290 We're going to include that little identifying piece of information that little token that token that 86 00:05:29,290 --> 00:05:35,920 proves that we are the same person who had made that original log in request like five minutes ago or 87 00:05:35,920 --> 00:05:38,450 one day ago or three days ago or whatever. 88 00:05:38,800 --> 00:05:45,250 So when we make the follow up request to the server and include that token the server sees that token 89 00:05:45,400 --> 00:05:52,120 it says oh OK this is the exact same token that I had previously given to this person over here who 90 00:05:52,120 --> 00:05:54,170 had just logged in like yesterday. 91 00:05:54,550 --> 00:05:58,780 You know what I bet you are the same person same exact browser. 92 00:05:58,780 --> 00:06:01,280 So you're probably like user 1 2 3. 93 00:06:01,300 --> 00:06:02,260 That same person. 94 00:06:02,410 --> 00:06:02,950 Great. 95 00:06:02,980 --> 00:06:08,470 Here's a list of all the posts where all the blog posts all the tweets all the e-mails whatever it is 96 00:06:08,740 --> 00:06:16,630 that belong to you specifically user 2:59 or whatever their email is or whatever their username is so 97 00:06:16,690 --> 00:06:21,440 this is the general idea behind authentication inside of our application. 98 00:06:21,550 --> 00:06:29,380 We cannot rely upon just raw HTP to have this concept of authentication because that's not what HTP 99 00:06:29,380 --> 00:06:29,800 is for. 100 00:06:29,800 --> 00:06:34,210 We cannot correctly identify ourselves between requests. 101 00:06:34,240 --> 00:06:40,810 So instead we rely upon this token or something to identify us between requests. 102 00:06:40,810 --> 00:06:46,510 So how does that all have something to do with us and how are we going to actually apply that to our 103 00:06:46,510 --> 00:06:49,760 application inside of our application. 104 00:06:49,900 --> 00:06:56,090 We're going to use what is called cookie based authentication cookie based authentication. 105 00:06:56,110 --> 00:07:03,250 What that means is that when we get some initial request to our server like our express API we're going 106 00:07:03,250 --> 00:07:09,580 to say hey please log me in and this could be an email password it could be a username for us. 107 00:07:09,580 --> 00:07:11,790 It's going to be a Google Earth. 108 00:07:11,800 --> 00:07:20,320 So after a user goes through the old process you and I are going to generate some identifying piece 109 00:07:20,380 --> 00:07:28,210 of information in the request Orsini and the response that we send back to the user for that very initial 110 00:07:28,570 --> 00:07:29,450 request. 111 00:07:29,750 --> 00:07:35,890 We're going to include what is called a header inside of the response that gets sent back to the browser. 112 00:07:36,370 --> 00:07:43,390 The header is going to have a property called Set cookie and it's going to be set to be some random 113 00:07:43,390 --> 00:07:50,050 token this token right here is what is going to uniquely identify this user. 114 00:07:50,050 --> 00:07:51,850 Now here's the really important part. 115 00:07:52,760 --> 00:07:58,940 When the browser sees this response come back and it sees in the header of the request it sees this 116 00:07:58,940 --> 00:08:00,620 like set cookie thing. 117 00:08:00,740 --> 00:08:05,100 The browser is going to automatically strip off this token. 118 00:08:05,360 --> 00:08:12,290 It's going to store it into the browsers memory and then the browser is going to automatically append 119 00:08:12,290 --> 00:08:18,440 that cookie with any follow up request being sent to the server and so on this follow up request the 120 00:08:18,440 --> 00:08:21,530 server going to see that cookie being provided. 121 00:08:21,740 --> 00:08:27,110 It's going to say oh inside that cookie is the same identifying token that I provided to this person 122 00:08:27,110 --> 00:08:28,090 previously. 123 00:08:28,160 --> 00:08:29,550 You must be that same person. 124 00:08:29,570 --> 00:08:30,280 So great. 125 00:08:30,290 --> 00:08:34,880 Here's the list of posts that you had previously made or the list of surveys or lists of e-mails or 126 00:08:34,880 --> 00:08:37,120 whatever else it is that they're doing. 127 00:08:37,130 --> 00:08:43,100 So again the entire key here the entire idea behind authentication inside of our application is that 128 00:08:43,100 --> 00:08:50,270 we're going to put some identifying piece of information into the user's cookie that cookie is going 129 00:08:50,270 --> 00:08:52,970 to be automatically managed by the browser. 130 00:08:53,060 --> 00:08:59,240 And any time our browser makes some additional follow up requests to the server the browser is going 131 00:08:59,240 --> 00:09:02,640 to automatically include that cookie in the request. 132 00:09:02,690 --> 00:09:10,250 And so our server can look at the token inside the cookie and say Oh fantastic your user 2:59 you must 133 00:09:10,250 --> 00:09:13,070 be the person who just lost us yesterday. 134 00:09:13,100 --> 00:09:17,120 So here's your list of posts now to be clear. 135 00:09:17,150 --> 00:09:23,780 We are using cookie based authentication here because it is very elegant in a very reasonable solution 136 00:09:24,110 --> 00:09:27,050 for the type of application we are putting together. 137 00:09:27,050 --> 00:09:33,200 It's fantastic because we don't have to worry about manually dealing with this cookie or this token 138 00:09:33,470 --> 00:09:38,640 on the re-act side of our application as far as the re-act side of our application is concerned. 139 00:09:38,720 --> 00:09:45,230 It's going to feel like we just magically are all of a sudden logged in because again remember the browser 140 00:09:45,230 --> 00:09:48,830 itself is responsible for handling all this cookie stuff. 141 00:09:48,860 --> 00:09:53,510 We are not the rock side of our application doesn't care about cookies and it's not going to deal with 142 00:09:53,510 --> 00:09:54,180 cookies. 143 00:09:54,230 --> 00:09:58,220 It's all managed automatically by the browser for us. 144 00:09:58,340 --> 00:10:05,130 Now I will say that this cookie based approach right here does have a couple of shortcomings. 145 00:10:05,150 --> 00:10:11,300 And so if you are familiar with Jason Webb tokens for example or other token based strategies that don't 146 00:10:11,300 --> 00:10:12,430 involve cookies. 147 00:10:12,560 --> 00:10:16,160 There is a very good reason to use those other strategies. 148 00:10:16,160 --> 00:10:17,990 We will add a future point. 149 00:10:17,990 --> 00:10:22,820 Or in a future video we're going to talk a lot more about some of the considerations around cookee based 150 00:10:22,820 --> 00:10:24,070 authentication. 151 00:10:24,080 --> 00:10:29,630 We'll talk about why we are using cookies and we'll talk about some of the other pros and cons around 152 00:10:29,630 --> 00:10:30,540 using cookies. 153 00:10:30,650 --> 00:10:31,700 But at the end the day. 154 00:10:31,700 --> 00:10:34,150 Trust me this is a good solution for us. 155 00:10:34,430 --> 00:10:35,360 OK. 156 00:10:35,840 --> 00:10:38,100 So that's pretty much it for this video. 157 00:10:38,120 --> 00:10:44,240 We now now have at least a somewhat more reasonable idea of what is going on behind the scenes and having 158 00:10:44,240 --> 00:10:48,950 a better sense of this flow right here is going to give us a little bit better idea of exactly some 159 00:10:48,950 --> 00:10:51,330 of the code that we're getting right in the coming sections. 160 00:10:51,560 --> 00:10:58,730 Now one thing I do want to mention is that I have not really clarified exactly how a database record 161 00:10:58,760 --> 00:10:59,800 comes into play here. 162 00:10:59,840 --> 00:11:02,420 Like why we care about database records at all. 163 00:11:02,420 --> 00:11:07,930 All I've really said is that hey after we've created this user we are then going to do something with 164 00:11:07,930 --> 00:11:10,750 a cookie and send it back to the user's browser. 165 00:11:11,030 --> 00:11:14,480 So we still have a little bit of work to do in that regard to figure out like what is going on with 166 00:11:14,480 --> 00:11:15,440 the database here. 167 00:11:15,590 --> 00:11:22,250 But hopefully now it's at least a little bit more clear why we are using or exactly how authentication 168 00:11:22,250 --> 00:11:24,310 is going to working inside of our application. 169 00:11:24,620 --> 00:11:25,280 OK. 170 00:11:25,580 --> 00:11:26,870 So enough talking. 171 00:11:26,870 --> 00:11:29,650 Again I apologize for the length of this video. 172 00:11:29,720 --> 00:11:32,630 We are going to have many other lectures that are this long. 173 00:11:32,630 --> 00:11:38,240 But again we are having these long lectures these complicated topics because this is the stuff that 174 00:11:38,240 --> 00:11:42,800 you really need to learn to understand how web apps are built and how they work. 175 00:11:43,100 --> 00:11:48,050 So enough for that let's continue the next section and continue working on our application.