1 00:00:00,600 --> 00:00:05,790 At this point we have completed the main authentication flow and our application in this video we're 2 00:00:05,790 --> 00:00:11,460 going to talk about a couple optional topics and go into greater detail around some areas that we kind 3 00:00:11,460 --> 00:00:14,640 of skimmed through while we were implementing the flow. 4 00:00:14,970 --> 00:00:18,880 So just to be clear completely optional video right now totally optional. 5 00:00:18,990 --> 00:00:23,610 If you're tired of hearing about authentication and if you just want to move on and start working on 6 00:00:23,610 --> 00:00:25,650 the app pauses for you right now. 7 00:00:25,650 --> 00:00:26,730 Continue in the next one. 8 00:00:26,850 --> 00:00:27,370 OK. 9 00:00:27,600 --> 00:00:32,310 Otherwise if you stick around and give you a better sense of a couple of different topics we just very 10 00:00:32,310 --> 00:00:33,920 lightly grazed over. 11 00:00:34,560 --> 00:00:34,900 OK. 12 00:00:34,920 --> 00:00:35,780 So let's get to it. 13 00:00:35,790 --> 00:00:41,670 The first thing we're going to talk about are these out don't use calls that we placed into our index 14 00:00:41,810 --> 00:00:42,730 js file. 15 00:00:42,780 --> 00:00:44,090 About halfway down. 16 00:00:44,580 --> 00:00:50,430 So we have three calls to add don't use and in every case we've passed in some completely different 17 00:00:50,520 --> 00:00:52,470 object to them. 18 00:00:52,830 --> 00:00:58,890 Each of these apps use calls are wiring up what are referred to as middleware inside of our application 19 00:00:59,740 --> 00:01:05,790 middleware our small functions that can be used to modify incoming requests to our app before they are 20 00:01:05,790 --> 00:01:08,040 sent off to route handlers. 21 00:01:08,040 --> 00:01:13,770 So let's look at a diagram that will give us a little bit of a better sense of exactly how this works. 22 00:01:13,900 --> 00:01:14,450 OK. 23 00:01:14,490 --> 00:01:19,230 So we looked at this diagram previously but actually gives us a pretty good idea of what's going on. 24 00:01:19,260 --> 00:01:25,380 Any time a request comes into our application that request is taken and sent into that cookie session 25 00:01:25,380 --> 00:01:29,070 middleware and the two passport middleware is as well. 26 00:01:29,220 --> 00:01:30,660 All three of those middleware. 27 00:01:30,780 --> 00:01:36,780 So all through these right here we'll take that incoming requests and make some very small or minor 28 00:01:36,780 --> 00:01:38,260 adjustments to it. 29 00:01:38,280 --> 00:01:42,230 And so in the context of these three middle whereas we had previously discussed exactly what they did. 30 00:01:42,390 --> 00:01:48,120 Right we had said that cookie session pull some data out of the cook or Pilson did out of the cookie 31 00:01:48,480 --> 00:01:53,610 the passport stuff then pulls the user ID out of that cookie and then some other stuff happens along 32 00:01:53,610 --> 00:01:54,400 there as well. 33 00:01:54,600 --> 00:02:00,570 So again middleware is are all about doing some preprocessing of the incoming requests before they are 34 00:02:00,570 --> 00:02:03,060 sent off to our different route handlers. 35 00:02:03,120 --> 00:02:10,280 As such they are a great location to locate some logic that is common to many different handlers. 36 00:02:10,410 --> 00:02:16,020 And so for our application it's really easy to assume that we might want to authenticate every single 37 00:02:16,020 --> 00:02:17,570 route handler that we have. 38 00:02:17,640 --> 00:02:22,350 You know we might want to know about every single user who's coming into our application. 39 00:02:22,350 --> 00:02:28,950 And so rather than adding some logic at the top of every single handler and saying OK let's like extract 40 00:02:28,950 --> 00:02:34,100 the cookie data and then something something something we can instead just wire up these middleware. 41 00:02:34,110 --> 00:02:40,430 One time and then they will be automatically used for every request that comes into application. 42 00:02:40,440 --> 00:02:45,630 Now your first question in response to that might be well what if I don't want to run these middleware 43 00:02:45,630 --> 00:02:48,380 is around every rat handler handler. 44 00:02:48,540 --> 00:02:50,240 The answer is that's totally fine. 45 00:02:50,490 --> 00:02:55,980 You can wire up your middleware in such a way that there will only be used for a portion of your handlers 46 00:02:56,010 --> 00:03:01,290 if you wish to and we will actually see an example of that very shortly as well. 47 00:03:01,290 --> 00:03:05,970 Now the last thing I want to show you is just one more diagram that'll give you a better sense of middleware 48 00:03:06,150 --> 00:03:07,630 inside of her app. 49 00:03:07,680 --> 00:03:09,570 So we start off at the very top. 50 00:03:09,570 --> 00:03:15,390 We have some requests from the browser coming into our application object that an object is created 51 00:03:15,390 --> 00:03:21,150 by the Express library the request object is then piped into all the different middleware that we have 52 00:03:21,150 --> 00:03:22,310 in our application. 53 00:03:22,530 --> 00:03:28,140 And then they are sent off to the different row handlers that we have registered inside of the handlers. 54 00:03:28,140 --> 00:03:33,890 We do some amount of requests or logic or database stuff whatever it is. 55 00:03:34,080 --> 00:03:38,110 We formulate a response and send it back to whoever made the initial request. 56 00:03:38,130 --> 00:03:38,730 OK. 57 00:03:38,940 --> 00:03:44,190 So middleware is right in there before the routing handlers. 58 00:03:44,190 --> 00:03:50,310 Now believe it or not you've actually learned like probably 90 percent of what is going on with Express 59 00:03:50,400 --> 00:03:56,100 at this point if you understand middleware and you understand the idea behind route handlers that's 60 00:03:56,100 --> 00:03:58,220 really the very major topics. 61 00:03:58,230 --> 00:04:03,190 Now of course express also has a ton of tiny little API and function calls and all that stuff. 62 00:04:03,300 --> 00:04:07,710 But this is really the general architecture of Express that's all there is to it. 63 00:04:07,740 --> 00:04:10,010 It is a very lightweight framework. 64 00:04:10,710 --> 00:04:11,000 OK. 65 00:04:11,010 --> 00:04:12,630 So that's topic number one. 66 00:04:12,660 --> 00:04:18,600 We're now done with that and we're now going to move on to our next topic which is going to give us 67 00:04:18,690 --> 00:04:23,370 a little bit of a better idea of what is going on with this cooking session thing right here. 68 00:04:23,490 --> 00:04:23,870 OK. 69 00:04:24,000 --> 00:04:29,940 So the goal right now is to get a better sense of what the cookie session is doing for us and how it 70 00:04:29,940 --> 00:04:31,570 relates to passport. 71 00:04:31,650 --> 00:04:37,050 Now everything I'm about to tell you is a lot of stuff that I wish someone had told me when I first 72 00:04:37,140 --> 00:04:39,080 got started with the express way long ago. 73 00:04:39,300 --> 00:04:43,140 I really wish someone had just sat me down and spelled all this stuff out. 74 00:04:43,140 --> 00:04:48,480 Clear as crystal because it would have saved me a tremendous amount of time myself so hopefully I can 75 00:04:48,480 --> 00:04:54,350 save you a equal amount of time by giving you a quick spiel about what this cookie session is doing. 76 00:04:54,990 --> 00:04:55,450 OK. 77 00:04:55,800 --> 00:05:01,160 So again the idea here I want to figure out what the cookies is doing. 78 00:05:01,160 --> 00:05:01,570 All right. 79 00:05:01,590 --> 00:05:04,040 That's all we're doing to figure out what it's doing. 80 00:05:04,200 --> 00:05:10,220 We're going to first flip over to our routes all routes are all throughout St. James File. 81 00:05:10,500 --> 00:05:16,860 We're going to find that current user request handler at the very bottom and we're going to make a very 82 00:05:16,860 --> 00:05:19,830 small temporary change to this route handler. 83 00:05:20,160 --> 00:05:24,510 So if you skip over the rest of this video or if you eventually like drop off I can tell you right now 84 00:05:24,810 --> 00:05:27,670 make sure you revert that change the we're about to make. 85 00:05:27,690 --> 00:05:28,310 Very important. 86 00:05:28,380 --> 00:05:30,330 OK make sure you change that back. 87 00:05:30,330 --> 00:05:32,960 I will make the change back myself at the end of this video. 88 00:05:32,970 --> 00:05:36,040 I just want to make sure you do it as well. 89 00:05:36,120 --> 00:05:42,240 So down here I'm going to say restaurants and I'm going to send back instead of recked user I'm going 90 00:05:42,240 --> 00:05:47,560 to send back Reyk dot session like so. 91 00:05:47,800 --> 00:05:50,060 So let's look at what happens now. 92 00:05:50,310 --> 00:05:52,090 I'm going to flip back over to my browser. 93 00:05:52,250 --> 00:05:54,110 I'm going to open up a new tab. 94 00:05:54,690 --> 00:06:04,030 I'm going to make sure that I'm logged in by visiting local Colin 5000 slash off slash Google. 95 00:06:04,320 --> 00:06:05,540 So that's going to log me in. 96 00:06:05,550 --> 00:06:06,830 Yes I get the error right here. 97 00:06:06,840 --> 00:06:07,710 But that's really fine. 98 00:06:07,710 --> 00:06:09,600 I am now considered to be logged in. 99 00:06:09,870 --> 00:06:13,670 And now we're going to go access that route handler that we just change right here. 100 00:06:13,890 --> 00:06:16,470 So I haven't said anything about that session yet. 101 00:06:16,470 --> 00:06:17,730 We'll talk about what it is. 102 00:06:17,880 --> 00:06:27,150 As soon as we test this thing so I'm not going to go to localhost Colan 5000 slash API slash current 103 00:06:27,150 --> 00:06:29,940 user OK. 104 00:06:29,990 --> 00:06:34,550 So this right here is our rec dot session object. 105 00:06:34,550 --> 00:06:40,040 And again remember the purpose of our talk right now I wanted to teach you exactly what that cookie 106 00:06:40,040 --> 00:06:41,640 session thing is doing. 107 00:06:42,380 --> 00:06:47,750 So at this point we have said several times throughout our entire authentication flow we have looked 108 00:06:47,750 --> 00:06:55,250 at that diagram right here and we had said that the incoming request comes in the cookie session middleware 109 00:06:55,310 --> 00:07:01,010 extracts some amount of data and then the passport library somehow pulls the user ID out of that out 110 00:07:01,210 --> 00:07:02,690 of that data. 111 00:07:02,690 --> 00:07:07,760 So let's just kind of like break down this process and really analyze what is going on between these 112 00:07:07,760 --> 00:07:08,410 two libraries. 113 00:07:08,420 --> 00:07:14,930 In reality when we say that the cookie session library extracts the cookie data it does but just to 114 00:07:14,930 --> 00:07:20,420 be crystal clear what really happens is the cookie session library extracts that data out of the cookie 115 00:07:20,750 --> 00:07:27,860 and then assigns it to this rec dot session property so wrecked that session right here contains the 116 00:07:27,860 --> 00:07:28,450 data. 117 00:07:28,490 --> 00:07:32,340 That passport is attempting to store inside of the cookie. 118 00:07:32,780 --> 00:07:39,050 When we then pass that request object onto passport passport is not really looking at that cookie per 119 00:07:39,050 --> 00:07:43,410 se it is looking internally at rec dot session. 120 00:07:43,430 --> 00:07:48,700 So it looks at Red Dot session it pulls it's relevant data out there and then it passes that all onto 121 00:07:48,920 --> 00:07:50,930 serialize user and all that other stuff. 122 00:07:51,320 --> 00:07:55,520 So if we go back to the request that we just made this is the session right here. 123 00:07:55,700 --> 00:08:02,860 You can see very clearly that one piece of data in our session is being managed by passport and that 124 00:08:02,870 --> 00:08:07,530 data that's being managed is an object that has a key of user. 125 00:08:07,550 --> 00:08:09,410 And then this long string right here. 126 00:08:09,620 --> 00:08:13,000 And so you might just recognize this string. 127 00:08:13,100 --> 00:08:14,050 You'll look at it closely. 128 00:08:14,060 --> 00:08:16,720 It's 5 9 5 F C that's mine. 129 00:08:16,730 --> 00:08:18,510 At least yours is probably different. 130 00:08:18,620 --> 00:08:24,590 If I go over to my lab console I'm looking at my users collection right now inside the database and 131 00:08:24,590 --> 00:08:33,050 you'll recognize that the ID of my user record is identical to what we just saw in that session 5 9 132 00:08:33,050 --> 00:08:33,810 5. 133 00:08:33,810 --> 00:08:40,720 FC So if you go back to this diagram right your cookie session takes the data out of the cookie and 134 00:08:40,730 --> 00:08:48,230 assigns it Terek session one of the properties in the session is called passport and inside of that 135 00:08:48,230 --> 00:08:55,790 passport piece of data is the ID that we have been schlepping around from serialise user and serialise 136 00:08:55,790 --> 00:08:56,670 user. 137 00:08:56,670 --> 00:09:01,970 Remember that's where we had put together this stuff that kind of encodes instead of our password. 138 00:09:02,090 --> 00:09:02,990 Yes. 139 00:09:02,990 --> 00:09:08,800 These two things right here which are what encodes the user's ID inside of the cookie. 140 00:09:09,620 --> 00:09:10,190 OK. 141 00:09:10,400 --> 00:09:15,440 So that's just a little bit of a better sense of what the real relation between passport and the cookie 142 00:09:15,440 --> 00:09:18,200 session library or cookie session is like. 143 00:09:18,200 --> 00:09:21,790 Not really inherently passing data to passport. 144 00:09:22,040 --> 00:09:28,850 It's just processing the incoming requests populating that session property right here and then passport 145 00:09:29,180 --> 00:09:33,110 accesses the data that exist on retrocession. 146 00:09:34,070 --> 00:09:34,350 OK. 147 00:09:34,370 --> 00:09:38,400 So that's a little bit more on record duck session at this point. 148 00:09:38,420 --> 00:09:43,910 I'm going to change back over to my author stock js file and I'm going to undo that session change that 149 00:09:43,910 --> 00:09:45,240 we just made a second ago. 150 00:09:45,510 --> 00:09:50,450 I'm going to revert it back over to sending back the current user. 151 00:09:50,450 --> 00:09:55,460 Now that's not all I want to tell you about with cookie session right here because if I just told you 152 00:09:55,460 --> 00:09:55,800 that. 153 00:09:55,820 --> 00:09:58,840 And then you might be sitting there like what Stephen that was really hard for you to figure out. 154 00:09:58,850 --> 00:10:04,010 Well one of the thing that's a little bit more critical with red dots with the cookie session and this 155 00:10:04,010 --> 00:10:06,220 is the part that I really want to communicate to you. 156 00:10:06,350 --> 00:10:11,420 This is the part that was very challenging for me to initially comprehend way long ago when I was picking 157 00:10:11,420 --> 00:10:12,140 up Express. 158 00:10:12,140 --> 00:10:12,930 OK. 159 00:10:13,490 --> 00:10:19,160 So our library that we installed here to manage all the data on our cookie is called cookie session 160 00:10:19,480 --> 00:10:22,820 that's that installed cookie session right here. 161 00:10:22,910 --> 00:10:29,930 Now if you go and look up the documentation around Express and you look up Express's guide on how to 162 00:10:29,930 --> 00:10:35,120 use cookies or how to establish sessions inside of an express application they're actually going to 163 00:10:35,120 --> 00:10:38,010 recommend two different libraries to you. 164 00:10:38,270 --> 00:10:43,130 And so the second thing I want to tell you the thing that like confused me for a while is the difference 165 00:10:43,130 --> 00:10:50,720 between the library that we just used called cookie session and the other library that express recommends 166 00:10:50,720 --> 00:10:53,780 called Express session. 167 00:10:53,780 --> 00:11:00,270 Both of these libraries essentially accomplish the same thing but they do it in a very different fashion. 168 00:11:01,010 --> 00:11:04,630 So we've already got a pretty reasonable sense of what cookie session does. 169 00:11:04,700 --> 00:11:05,180 Right. 170 00:11:05,180 --> 00:11:07,470 This is what we used inside of our application. 171 00:11:07,700 --> 00:11:15,830 We can assign some amount of data to the cookie cookies session as a middleware then takes all the data 172 00:11:15,830 --> 00:11:19,500 out of that cookie and assigns it to the rack session property. 173 00:11:19,730 --> 00:11:26,390 So let's talk about now what the Express session middleware does and why it is so different. 174 00:11:28,190 --> 00:11:33,200 So we're going to figure this out by looking at one more diagram and it might take me just a second 175 00:11:33,200 --> 00:11:36,120 to find it because I know I have so many diagrams. 176 00:11:37,240 --> 00:11:39,060 I think we want 12. 177 00:11:39,800 --> 00:11:40,010 OK. 178 00:11:40,030 --> 00:11:40,540 Here we go. 179 00:11:42,060 --> 00:11:47,930 So sessions with express the thing I want to remind you here is that in all this discussion about making 180 00:11:47,930 --> 00:11:53,660 use of authentication inside of our application and relating that all back to passport we've been saying 181 00:11:53,810 --> 00:11:55,820 nonstop nonstop nonstop. 182 00:11:55,850 --> 00:12:02,480 We wanted to put some identifying piece of information into the user's cookie so that it would be relayed 183 00:12:02,660 --> 00:12:05,930 with every follow up request that the user every makes. 184 00:12:05,990 --> 00:12:13,490 The key difference between the cookie session library and the Express session library is exactly how 185 00:12:13,490 --> 00:12:16,530 that data is stored inside of the cookie. 186 00:12:16,560 --> 00:12:16,900 OK. 187 00:12:16,970 --> 00:12:17,900 That is the difference. 188 00:12:17,930 --> 00:12:20,440 And that's what we are going to figure out. 189 00:12:20,480 --> 00:12:26,960 So we are making when we are making use of the cookies session library we say that the cookie is the 190 00:12:26,960 --> 00:12:32,350 session the cookie contains all of the data related to the current session. 191 00:12:32,360 --> 00:12:35,440 It contains the actual user ID. 192 00:12:35,540 --> 00:12:41,990 So in our application when we want to figure out what the idea of the current user is we look into that 193 00:12:41,990 --> 00:12:50,330 cookie we decode the value in there and the exact value inside that cookie is what we just saw inside 194 00:12:50,330 --> 00:12:53,260 our browser or go on that record session thing. 195 00:12:53,300 --> 00:12:59,200 This is the exact information right here that is stored inside of our cookie. 196 00:12:59,240 --> 00:13:01,530 So that's with cookie session. 197 00:13:01,550 --> 00:13:03,410 Now how does express session work. 198 00:13:03,410 --> 00:13:04,940 So this is the one that we did not use. 199 00:13:04,940 --> 00:13:07,640 This is the one that behaves slightly differently. 200 00:13:07,640 --> 00:13:15,300 Express session works by storing a reference to a session inside the cookie a reference to a session. 201 00:13:15,320 --> 00:13:21,020 So when you make use of express session it will store inside of the session or inside the cookie excuse 202 00:13:21,020 --> 00:13:24,400 me an ID to a session. 203 00:13:24,500 --> 00:13:30,810 So anytime that a request comes back around to express session express session takes the ID out of there. 204 00:13:31,010 --> 00:13:38,210 It then looks up all of the relevant session data from what we refer to as a session store. 205 00:13:38,210 --> 00:13:44,600 So in other words the cookie only contains this one very small individual ID and nothing else. 206 00:13:44,720 --> 00:13:50,180 And then to access all the data associated with that particular cookie we store all the relevant data 207 00:13:50,210 --> 00:13:55,720 inside of some other outside database or some remote store of data. 208 00:13:55,820 --> 00:14:01,970 So I know that this might seem like a very small difference and I might not even be exactly really being 209 00:14:01,970 --> 00:14:03,200 clear on what's going on here. 210 00:14:03,200 --> 00:14:06,980 So one more diagram I want to show you to really clarify the difference. 211 00:14:07,010 --> 00:14:09,500 So this is what happens with Express session. 212 00:14:09,530 --> 00:14:15,530 The one that we're not using inside the cookie the cookie gets parsed and then we just see the data 213 00:14:15,560 --> 00:14:23,180 session id of like 2:59 to figure out what the actual like user ideas or whatever other data we try 214 00:14:23,180 --> 00:14:25,520 to store inside the data inside that cookie. 215 00:14:25,790 --> 00:14:29,750 We would then go off to this session store right here. 216 00:14:29,750 --> 00:14:35,690 We would look up this very particular session id of like 1 to 3 and that would then return us a little 217 00:14:35,690 --> 00:14:38,910 object that contains all of the relevant data. 218 00:14:38,930 --> 00:14:44,180 So putting this another way putting it out in like probably way more clear terms than I am right now 219 00:14:44,270 --> 00:14:47,070 because again this is like crazy stuff. 220 00:14:47,090 --> 00:14:52,670 The big difference between the two is that cookie session stores all the data directly in the cookie 221 00:14:53,750 --> 00:14:59,390 express session stores all the data in some like remote server side data store. 222 00:14:59,630 --> 00:15:05,090 And then whenever request comes in it takes the idea out of that session and then go goes and polls 223 00:15:05,150 --> 00:15:08,070 all the relevant data out of the session store. 224 00:15:08,660 --> 00:15:14,420 So just to further simplify this put a different way because I'm droning on now I know I'm sorry putting 225 00:15:14,420 --> 00:15:15,170 a different way. 226 00:15:15,170 --> 00:15:20,180 The big difference between these two is that with Express section session we are trying to store all 227 00:15:20,180 --> 00:15:22,950 the data outside the cookie with cookies session. 228 00:15:23,030 --> 00:15:24,930 We're stuffing everything into the cookie. 229 00:15:24,980 --> 00:15:27,050 I guess that's as concise as I can make it. 230 00:15:27,050 --> 00:15:29,310 I apologize if that's not clear. 231 00:15:29,360 --> 00:15:30,830 Doing my best. 232 00:15:31,670 --> 00:15:33,760 So why do we care about using one or the other. 233 00:15:33,770 --> 00:15:34,670 That's the real takeaway. 234 00:15:34,670 --> 00:15:36,010 Why are we using one or the other. 235 00:15:36,200 --> 00:15:42,170 Well the big difference between the two is that with Express session we can store as much data as we 236 00:15:42,170 --> 00:15:49,310 want to inside of that remote or that session store because that is some big bucket of data that we 237 00:15:49,310 --> 00:15:55,130 can post on our server and we can stuff as much stuff in there as we want to with a cookie. 238 00:15:55,160 --> 00:16:00,110 We are limited to around 4 kilobytes and that's all we have access to that's all the data we can stuff 239 00:16:00,170 --> 00:16:01,290 on the cookie. 240 00:16:01,370 --> 00:16:06,580 Now for our application all we really care about is the user ID right. 241 00:16:06,590 --> 00:16:08,350 That's the sole thing we care about. 242 00:16:08,360 --> 00:16:13,160 We don't care about anything else inside of our application we just care about the user's ID and nothing 243 00:16:13,160 --> 00:16:14,040 else. 244 00:16:14,060 --> 00:16:19,430 So we are definitely well below that forks in kilobyte size limit and so we don't really have to make 245 00:16:19,430 --> 00:16:25,130 use of this external session store to get around that size limit because we are not storing a big old 246 00:16:25,130 --> 00:16:28,020 bucket of data in there. 247 00:16:28,760 --> 00:16:34,100 So that is the difference between cookie session and express session to further drill home the point 248 00:16:34,100 --> 00:16:34,560 here. 249 00:16:34,580 --> 00:16:40,580 If you look at the Express session documentation and you scroll down to like the very bottom is a section 250 00:16:40,580 --> 00:16:47,190 down here that says sessions store implementation and right beneath that you will see compatible session 251 00:16:47,190 --> 00:16:48,240 stores. 252 00:16:48,240 --> 00:16:54,150 So if you are making use of express session it expects you to set up one of these session stores for 253 00:16:54,150 --> 00:16:57,780 it to actually store all the session data all the relevant data. 254 00:16:57,930 --> 00:17:03,580 And so by using cookie session we completely circumvent this requirement right here by using cookie 255 00:17:03,580 --> 00:17:06,150 session and just stuffing everything directly in the cookie. 256 00:17:06,210 --> 00:17:11,380 We don't have to set up this outside service which is undoubtedly just a pain in the rear. 257 00:17:11,520 --> 00:17:15,070 So it really just saves us from having to go through this pain right here. 258 00:17:15,620 --> 00:17:16,430 OK. 259 00:17:17,340 --> 00:17:17,700 All right. 260 00:17:17,700 --> 00:17:23,520 So I know that that topic was a little bit of a pain but there's just one last thing I want to show 261 00:17:23,520 --> 00:17:28,860 you inside of our application and this is going to be a thing that if you feel a little bit kind of 262 00:17:28,860 --> 00:17:33,810 queasy around cookies right now and what cookies are doing last year and talking about is kind of like 263 00:17:33,810 --> 00:17:36,440 see our cookies being set in practice. 264 00:17:36,450 --> 00:17:39,560 So again remember at this point this is all completely optional stuff. 265 00:17:39,600 --> 00:17:41,850 You can always pause video and continue on. 266 00:17:42,480 --> 00:17:49,440 So I want to walk through our authentication flow and I want to get some like visual look on our cookies 267 00:17:49,500 --> 00:17:51,420 as they are being set by our server. 268 00:17:51,780 --> 00:17:58,260 So inside my browser I'm going to open up the Google Developer tab and you can do that by doing view 269 00:17:58,260 --> 00:18:04,040 developer view source or of course you can always right click and just inspect anywhere. 270 00:18:04,040 --> 00:18:07,920 Then once I open this thing up I'm going to open up the network request tab. 271 00:18:07,920 --> 00:18:11,100 So I've now got network request being recorded. 272 00:18:11,100 --> 00:18:17,130 So again my goal here is to walk through the authentication flow and I want to look at that cookie and 273 00:18:17,130 --> 00:18:19,560 see how it is being set by our server. 274 00:18:20,780 --> 00:18:29,310 The first thing to do is I'm going to log out by accessing local host Colin 5000 slash API slash log 275 00:18:29,310 --> 00:18:34,950 out and when I do so I can now click on the request that was just made. 276 00:18:34,950 --> 00:18:40,290 This contains the response that we just got back from the server and in the headers section right here 277 00:18:40,620 --> 00:18:43,280 you'll see a list of all the response headers. 278 00:18:43,290 --> 00:18:48,340 So these are headers that were included with the request that got sent back to us. 279 00:18:48,500 --> 00:18:53,700 One of the headers that is in here you will see is the set cookie header. 280 00:18:53,920 --> 00:18:58,020 And so right here it says session is blah blah blah blah blah. 281 00:18:58,530 --> 00:19:03,420 As a reminder whenever the cookie session middleware runs it always encrypts our cookie. 282 00:19:03,480 --> 00:19:06,160 So we do not see the session in plain text right here. 283 00:19:06,180 --> 00:19:13,210 This is the encrypted session but this contains everything having to do with our current session. 284 00:19:13,350 --> 00:19:19,830 We can now go through the authentication flow and as we do we will see this cookie set cookie session 285 00:19:19,830 --> 00:19:21,730 thing right here start to change. 286 00:19:21,750 --> 00:19:26,760 So I'm now going to go to auth slash Google after I do that. 287 00:19:26,760 --> 00:19:28,300 Now click on this red arrow. 288 00:19:28,320 --> 00:19:34,200 Out request in on here I can now look at the response headers and you'll see that the session is now 289 00:19:34,200 --> 00:19:42,330 significantly longer because now my session contains not only that odd URL now contains the actual user 290 00:19:42,330 --> 00:19:42,780 ID. 291 00:19:42,810 --> 00:19:45,490 So it literally just contains more information here now. 292 00:19:45,630 --> 00:19:48,780 And that's why I see many more characters here. 293 00:19:48,930 --> 00:19:53,540 Now of course I can also go to say Auth. or C API. 294 00:19:53,580 --> 00:20:02,070 Slash current user when we do that we do not get back and your response header because on the API slash 295 00:20:02,070 --> 00:20:06,010 current user route we are not modifying our Kuki in any way right. 296 00:20:06,060 --> 00:20:07,750 We're not modifying the cookie we're not setting it. 297 00:20:07,770 --> 00:20:08,990 We're not deleting it. 298 00:20:09,060 --> 00:20:10,290 We are reading it. 299 00:20:10,290 --> 00:20:11,970 We are definitely reading on the server. 300 00:20:12,060 --> 00:20:16,800 But remember that the server or the client automatically includes a cookie with any request. 301 00:20:17,010 --> 00:20:22,110 So we don't see anything here in this case around response headers around the cookie because the server 302 00:20:22,110 --> 00:20:24,260 is not modifying anything. 303 00:20:24,330 --> 00:20:29,340 If we scroll down a little bit however you'll find the request header section and inside of here you'll 304 00:20:29,340 --> 00:20:32,410 find the header that includes our cookie automatically. 305 00:20:32,520 --> 00:20:38,120 And this is where the browser is automatically including the cookie and sending it to our back and server. 306 00:20:38,180 --> 00:20:39,920 And so here's the string right here. 307 00:20:39,960 --> 00:20:46,080 This is the encrypted object or the encrypted string that essentially contains our user ID and says 308 00:20:46,110 --> 00:20:47,200 hey we are a user. 309 00:20:47,310 --> 00:20:48,820 So and So and So. 310 00:20:49,560 --> 00:20:55,410 So clearly that is being communicated automatically by our browser to the back and server. 311 00:20:55,410 --> 00:21:02,240 Now again we can log out doing API slash log out. 312 00:21:03,120 --> 00:21:08,700 And when I do that again set cookie and yes there is a session here. 313 00:21:08,700 --> 00:21:13,830 But if you were to decrypt this thing right here it would essentially say empty session like there's 314 00:21:13,830 --> 00:21:15,570 no data left completely empty. 315 00:21:15,570 --> 00:21:16,440 Nothing here. 316 00:21:16,440 --> 00:21:18,150 So we no longer have a user ID. 317 00:21:18,150 --> 00:21:19,270 In this case. 318 00:21:19,770 --> 00:21:20,160 OK. 319 00:21:20,220 --> 00:21:21,390 So that's pretty much it. 320 00:21:21,690 --> 00:21:23,470 That's the three topics I want to go over. 321 00:21:23,580 --> 00:21:25,060 We spoke about middleware. 322 00:21:25,200 --> 00:21:29,390 We had a awkward discussion about cookie session versus express session. 323 00:21:29,430 --> 00:21:34,110 Again I really just wanted to kind of communicate the difference between the two using cookie session 324 00:21:34,140 --> 00:21:35,790 is far more straightforward. 325 00:21:35,790 --> 00:21:37,560 So much easier to get started with. 326 00:21:37,650 --> 00:21:42,100 And really for any reasonable application is going you serve you very well. 327 00:21:42,230 --> 00:21:48,380 And then we also got to observe the cookies being automatically managed by our browser and by our express 328 00:21:48,380 --> 00:21:49,070 server. 329 00:21:49,760 --> 00:21:51,350 So that's pretty much it. 330 00:21:51,350 --> 00:21:53,620 That's all I wanted to talk about here. 331 00:21:53,630 --> 00:21:59,090 Let's now continue in the next section and continue working on our server so I'll see you in just a 332 00:21:59,090 --> 00:21:59,710 second.