1 00:00:00,780 --> 00:00:05,070 In the last section we got to have a good discussion about how to react to server and the expressed 2 00:00:05,070 --> 00:00:11,070 server are working together and the differences between them in the development world and the production 3 00:00:11,070 --> 00:00:16,820 world we're not going to continue in this section with what is going to be a another pretty long video. 4 00:00:16,860 --> 00:00:19,470 So going to prothesis right now in a sense is a long video. 5 00:00:19,830 --> 00:00:22,360 But this is an optional video. 6 00:00:22,440 --> 00:00:27,090 So this is the one where we are going to go into a lot of kind of crazy stuff where we talk about a 7 00:00:27,090 --> 00:00:29,190 lot of the intricacies of our server. 8 00:00:29,280 --> 00:00:33,210 I want to make sure that it's really clear to you this is completely optional. 9 00:00:33,390 --> 00:00:39,180 So if you don't want to hear about any of this search server setup or proxy stuff for blah blah blah 10 00:00:39,180 --> 00:00:40,460 how all this stuff is working. 11 00:00:40,500 --> 00:00:41,350 That's totally fine. 12 00:00:41,400 --> 00:00:45,300 You don't really need to know this stuff to be able to build applications. 13 00:00:45,450 --> 00:00:49,320 But of course I'm going to tell you this is how you get to be a really good engineer. 14 00:00:49,320 --> 00:00:53,300 So of course I recommend you watch this but I want to tell you you don't have to. 15 00:00:53,310 --> 00:00:56,580 So if you don't want to hear any of that positivity right now go on to the next one. 16 00:00:56,580 --> 00:00:57,800 Totally fine. 17 00:00:58,520 --> 00:00:58,870 OK. 18 00:00:58,890 --> 00:01:02,510 So if you're still here and I know you're all here I know you are. 19 00:01:02,730 --> 00:01:03,870 Let's let's get to it. 20 00:01:03,870 --> 00:01:05,730 So we're going to talk about a couple different issues. 21 00:01:05,730 --> 00:01:07,320 Again this will be a long video. 22 00:01:07,320 --> 00:01:09,690 I apologize ahead of time but I want to do it. 23 00:01:09,690 --> 00:01:14,330 Everything is just in one single video so we just kind of get it all out of the way and talk about all 24 00:01:14,350 --> 00:01:18,480 these really important concepts that are kind of going on behind the scenes. 25 00:01:19,020 --> 00:01:25,200 So I want to reiterate the fact that as we have spoken about the server so far everything like works 26 00:01:25,200 --> 00:01:26,980 well it's very elegant. 27 00:01:27,060 --> 00:01:31,350 It works very well in development and works equally well in production. 28 00:01:31,350 --> 00:01:33,080 Everything feels fantastic. 29 00:01:33,210 --> 00:01:38,580 But as soon as we start talking about some of the inner workings you very likely will say to me Stephen 30 00:01:38,580 --> 00:01:41,340 why are we doing things this way it seems crazy. 31 00:01:41,610 --> 00:01:48,690 So I can't say it enough at surface level it works together very well and it's a completely reasonable 32 00:01:48,720 --> 00:01:50,610 server setup that we have right here. 33 00:01:50,880 --> 00:01:54,900 But once you start to understand the inner workings you really get the feeling that wow there really 34 00:01:54,900 --> 00:01:58,780 are a lot of moving parts here and there's just a lot of stuff that's happening. 35 00:01:58,780 --> 00:01:59,440 OK. 36 00:01:59,970 --> 00:02:01,570 So let's dive into it. 37 00:02:01,620 --> 00:02:06,740 The first thing I want to do if you recall in the last section we had updated that redirect you or I 38 00:02:07,170 --> 00:02:10,920 and I had said that it takes some time for this thing to actually percolate through. 39 00:02:10,920 --> 00:02:13,080 We didn't actually get back to testing it. 40 00:02:13,110 --> 00:02:14,860 And the last video that was my mistake. 41 00:02:14,910 --> 00:02:21,990 So just really quickly if you go back over to localhost 3000 and click on sign in with Google the redirects 42 00:02:21,990 --> 00:02:26,190 you or I should now be white listed and you'll see something like this. 43 00:02:26,310 --> 00:02:31,740 You can authorize it and you will eventually end back at that same kind of error message that we've 44 00:02:31,740 --> 00:02:32,520 seen all along. 45 00:02:32,520 --> 00:02:34,870 So again this message right here is really fine. 46 00:02:35,070 --> 00:02:37,430 We'll come back very shortly and fix it all up. 47 00:02:37,500 --> 00:02:40,510 So looks like yes the stuff is working correctly. 48 00:02:41,130 --> 00:02:47,070 So I want to now start talking a little bit about our general server setup and why we made some of the 49 00:02:47,070 --> 00:02:50,110 decisions that we did not why we made the decision. 50 00:02:50,140 --> 00:02:52,500 I want to make like some of the considerations clear. 51 00:02:52,560 --> 00:02:53,370 OK. 52 00:02:53,730 --> 00:03:00,390 So the first thing you might be sitting here wondering is Stephen why do we have like you whatever Stephen 53 00:03:00,390 --> 00:03:03,350 I can get by the like two separate servers like this. 54 00:03:03,360 --> 00:03:05,700 You know whatever I can deal with it. 55 00:03:05,700 --> 00:03:09,550 But you know I understand why they condensed down into one server like this. 56 00:03:09,690 --> 00:03:15,480 But why didn't we take some type of other more reasonable approach something like where we have something 57 00:03:15,480 --> 00:03:22,710 that looks like this where we have one create react up server that serves up the bundled J.S. file. 58 00:03:22,710 --> 00:03:28,260 Then we have a completely separate API and we just say you know what looks stomack it we're just going 59 00:03:28,260 --> 00:03:31,000 to deal with handling these different domains. 60 00:03:31,020 --> 00:03:34,260 We'll figure out some elegant solution whatever we'll figure out. 61 00:03:34,260 --> 00:03:37,750 I don't care about having to specify the domain between production development. 62 00:03:37,800 --> 00:03:39,440 We can figure that stuff out. 63 00:03:39,510 --> 00:03:44,700 And besides that maybe we even want to have a approach like this because maybe we are trying to work 64 00:03:44,700 --> 00:03:51,510 with some other existing API that doesn't really have the ability to take a reactivates app on top of 65 00:03:51,510 --> 00:03:52,010 it. 66 00:03:52,110 --> 00:03:58,110 You know maybe you are working at a large enterprise company where you have teams and teams of engineers 67 00:03:58,350 --> 00:04:03,420 working on really heavy back ends that are solely intended to be used as API servers. 68 00:04:03,570 --> 00:04:07,740 And so we don't want to deal with any of this like round condensing stuff or anything that we want to 69 00:04:08,100 --> 00:04:13,830 have this distinctly separate very different API on a different domain that we can always access no 70 00:04:13,830 --> 00:04:14,480 matter what. 71 00:04:14,760 --> 00:04:17,120 So I say okay okay that's totally fine. 72 00:04:17,340 --> 00:04:21,790 I have even advocated around approach approaches like this in other courses of mine. 73 00:04:21,990 --> 00:04:27,870 I've very clearly said in other courses Yes we're going to have one server that serves up all the development 74 00:04:27,870 --> 00:04:34,070 assets and then another that acts as the API that serves up all the information for our app. 75 00:04:34,080 --> 00:04:36,270 So this is a completely fine approach. 76 00:04:36,270 --> 00:04:37,450 Don't get me wrong. 77 00:04:37,590 --> 00:04:42,630 We certainly have could have taken our application in this direction we could have certainly put together 78 00:04:42,630 --> 00:04:44,870 some type of architecture like this. 79 00:04:45,150 --> 00:04:51,040 But there's a couple of reasons that we were prevented from doing this easily inside of our application. 80 00:04:51,300 --> 00:04:52,620 OK. 81 00:04:52,620 --> 00:04:56,520 Now I can use the word like prevented very carefully. 82 00:04:56,520 --> 00:05:02,620 I'm going to say that we could have worked around these issues with some challenges we could have gone 83 00:05:02,620 --> 00:05:08,290 in this direction but we decided to keep things easier and straightforward and kept them the way they 84 00:05:08,290 --> 00:05:08,650 are. 85 00:05:08,650 --> 00:05:14,560 So I'm going to lay out those two issues you lay out the two are the two kind of reasons that made our 86 00:05:14,560 --> 00:05:17,200 life easier by taking this sort of approach right here. 87 00:05:17,200 --> 00:05:17,970 OK. 88 00:05:18,610 --> 00:05:26,470 So the first reason I want to remind you that we are using cookies as the absolute linchpin for authentication 89 00:05:26,710 --> 00:05:27,950 in our application. 90 00:05:28,150 --> 00:05:34,330 We have said repeatedly once the user goes through the overflow we're going to set up some type of information 91 00:05:34,360 --> 00:05:39,670 in the user's cookie that's going to identify the user and then EBS every subsequent request. 92 00:05:39,670 --> 00:05:42,760 Back to our server will contain that user's ID. 93 00:05:42,820 --> 00:05:46,780 And that's that's it that's the whole shebang that's how we're doing authentication right. 94 00:05:46,810 --> 00:05:49,580 And we've spoken at such great length about this. 95 00:05:49,960 --> 00:05:51,840 So here is issue number one. 96 00:05:52,030 --> 00:05:58,840 And here's the reason why we took our particular architecture let's imagine that we have some browser 97 00:05:59,170 --> 00:06:08,140 that is currently pointed at localhost three thousand if our browser at localhost 3000 makes some type 98 00:06:08,200 --> 00:06:14,410 of Ajax request like let's say we're trying to access our API fetch a list of surveys or whatever it 99 00:06:14,410 --> 00:06:22,090 is we're trying to do inside of our app when we make that request to a server at a local host 3000 which 100 00:06:22,090 --> 00:06:25,920 is the exact same domain that the browser is currently at. 101 00:06:25,930 --> 00:06:29,030 Cookies will be included with the request. 102 00:06:29,080 --> 00:06:32,160 However if we make a request to local host. 103 00:06:32,200 --> 00:06:33,100 5000. 104 00:06:33,140 --> 00:06:40,390 So in other words to some different domain that houses our API server browser cookies are not included 105 00:06:40,390 --> 00:06:46,810 with that request by default because our browser is currently pointed at localhost 3000. 106 00:06:46,840 --> 00:06:51,280 Now this is purely a security issue purely security. 107 00:06:51,340 --> 00:06:51,800 We are. 108 00:06:51,820 --> 00:06:58,480 The browser assumes that if you're at localhost 3000 and you make a request to local host 3000 hey you 109 00:06:58,480 --> 00:06:59,050 know what. 110 00:06:59,110 --> 00:07:01,370 No problem whatsoever include the cookies. 111 00:07:01,420 --> 00:07:02,810 Everything is fine. 112 00:07:02,830 --> 00:07:03,550 Make it happen. 113 00:07:03,550 --> 00:07:04,710 Who cares. 114 00:07:04,710 --> 00:07:10,210 But if your local has three thousand and you make a request to close to 5000 wall sudden the browser 115 00:07:10,210 --> 00:07:17,020 starts getting really suspicious the browser starts thinking why is this web page trying to make a request 116 00:07:17,320 --> 00:07:22,000 to localhost 5000 Why are they trying to make a request to a different domain to a different server 117 00:07:22,240 --> 00:07:25,330 to a different port specifically a different port. 118 00:07:25,330 --> 00:07:32,170 Here the browser assumes that it might have loaded up some malicious javascript code that is attempting 119 00:07:32,170 --> 00:07:35,750 to make a request maliciously to some different domain. 120 00:07:35,830 --> 00:07:42,150 And so by default the browser will not include cookies with that request. 121 00:07:42,300 --> 00:07:48,130 Solely a security issue and it's completely triggered by the fact that the browser is currently visiting 122 00:07:48,130 --> 00:07:49,060 one domain. 123 00:07:49,150 --> 00:07:51,870 And we are trying to make a request to a different one. 124 00:07:52,010 --> 00:07:55,750 And yes a different port counts as a different domain. 125 00:07:55,750 --> 00:08:04,360 So it can be this could just as easily been like we were at Google dot com and trying to make some some 126 00:08:04,360 --> 00:08:07,200 Ajax requests to like urban B.Com. 127 00:08:07,270 --> 00:08:14,470 So if our browser was pointed at Google dot com and we made an Ajax request over to Air B and B cookies 128 00:08:14,470 --> 00:08:18,070 would not be included that request by default because it's a different domain. 129 00:08:18,070 --> 00:08:20,420 Again purely a security concern. 130 00:08:20,770 --> 00:08:27,120 So again by using localhost three 3000 by keeping this or byte excuse me we back effort. 131 00:08:27,140 --> 00:08:32,020 Can we just say by taking this sort of architecture where we say we are always make your request to 132 00:08:32,020 --> 00:08:37,040 localhost three thousand and then we rely on create re-act up to 4 that request onto the API. 133 00:08:37,210 --> 00:08:42,090 We completely skirt this entire issue as far as the browser is concerned. 134 00:08:42,220 --> 00:08:49,090 Any API requests we make at all from the browser will always be pointed back at Create re-act out in 135 00:08:49,090 --> 00:08:55,350 development and then create re-act that will automatically proxy that request onto the Express API. 136 00:08:55,690 --> 00:09:00,220 The browser does not know that that proxy is there at the browser doesn't know it couldn't care. 137 00:09:00,400 --> 00:09:02,780 So the broad browser makes the request to the proxy. 138 00:09:02,800 --> 00:09:10,260 It's thinking oh hey I'm a local host 3000 and I'm making a request to the server at local House post 139 00:09:10,330 --> 00:09:12,660 3000 sure same domain. 140 00:09:12,670 --> 00:09:14,100 I'm going to include the cookies. 141 00:09:14,110 --> 00:09:16,030 Everything is A-OK. 142 00:09:16,510 --> 00:09:18,620 Then the proxy takes that request. 143 00:09:18,670 --> 00:09:22,620 It takes a copy of the cookies and forwards it onto the Express API. 144 00:09:22,840 --> 00:09:27,500 And so as far as you and I can are concerned on the Express API Hey we got our cookies. 145 00:09:27,520 --> 00:09:29,320 We know who this user is. 146 00:09:29,320 --> 00:09:33,760 We're going to formulate a response and send it back and it's eventually going to and backup out the 147 00:09:33,760 --> 00:09:34,490 server. 148 00:09:34,600 --> 00:09:39,940 And then of course as we've discussed inside production that express or Scuse me that create re-act 149 00:09:39,940 --> 00:09:41,340 out sort of falls away. 150 00:09:41,560 --> 00:09:47,920 And so in production mode the browser will always be at Heroku outcome or whatever we're going to make 151 00:09:47,920 --> 00:09:51,930 a request to our express API on the same exact domain. 152 00:09:52,030 --> 00:09:55,860 And so none of this cross-domain cookie stuff is an issue at all. 153 00:09:56,470 --> 00:09:58,250 OK so that's reason number one. 154 00:09:58,720 --> 00:10:05,380 So in this case you know what the browser does have API to allow us to send cookies across domain. 155 00:10:05,420 --> 00:10:08,260 It's there we could take this approach we could do it. 156 00:10:08,260 --> 00:10:09,460 We can make it happen. 157 00:10:09,730 --> 00:10:16,060 But again I'm just saying life is easier when we don't have to worry about these advanced issues right. 158 00:10:16,150 --> 00:10:17,770 We just don't have to worry about it now. 159 00:10:17,920 --> 00:10:23,500 We can use cookies all the authentication stuff is pretty straightforward relatively at least as far 160 00:10:23,500 --> 00:10:24,920 as the browser is concerned. 161 00:10:25,180 --> 00:10:30,820 And life is easy don't have to worry about Jason Webb tokens don't have to worry about headers or anything 162 00:10:30,820 --> 00:10:33,410 like that and site will react up everything. 163 00:10:33,430 --> 00:10:36,990 We just have to go through the flow and boom we are magically logged in. 164 00:10:37,420 --> 00:10:42,640 So in this case again I'm going to say you know what this sounds like it's crazy it sounds like it's 165 00:10:42,640 --> 00:10:43,730 very complicated. 166 00:10:43,870 --> 00:10:48,780 But we decided to take the approach we did because it was a very easy straightforward approach. 167 00:10:48,880 --> 00:10:52,010 So again I really stand by the decision we made. 168 00:10:52,450 --> 00:10:52,670 OK. 169 00:10:52,690 --> 00:10:59,180 So this was a big issue number one big issue number two and this issue is nearly identical in nature. 170 00:10:59,190 --> 00:10:59,430 OK. 171 00:10:59,440 --> 00:11:04,140 So basically identical but it's just slightly different topic. 172 00:11:04,150 --> 00:11:08,530 So again let's imagine that we are in the browser on localhost 3000. 173 00:11:09,370 --> 00:11:14,890 If we are in the browser at localhost 3000 and we attempt to make some type of Ajax request to a server 174 00:11:14,980 --> 00:11:17,900 also located at local 3000. 175 00:11:18,070 --> 00:11:20,110 The browser says OK fantastic. 176 00:11:20,110 --> 00:11:21,460 No issues here whatsoever. 177 00:11:21,460 --> 00:11:22,870 Go ahead make your request. 178 00:11:23,050 --> 00:11:24,450 Everything is A-OK. 179 00:11:24,790 --> 00:11:32,830 However again as the browser security feature if we attempt to make a request from localhost 3000 we're 180 00:11:32,890 --> 00:11:38,530 like we are visiting local was 3000 in the browser and we attempt to make a network request over to 181 00:11:38,530 --> 00:11:47,310 a different domain or a different port that is counted as what we refer to as a course request core's 182 00:11:47,380 --> 00:11:50,770 is short for cross origin resource sharing. 183 00:11:51,070 --> 00:11:55,690 And if you've been doing web development for a while you've probably at least seen the error message 184 00:11:55,720 --> 00:11:58,710 and probably done some endless googling on how to fix it. 185 00:11:58,720 --> 00:12:03,480 I would bet you know that it's something that most web developers usually fall into eventually they'll 186 00:12:03,500 --> 00:12:07,600 eventually see a course or quest and they'll eventually do some googling to figure out how to get around 187 00:12:07,600 --> 00:12:08,130 it. 188 00:12:08,440 --> 00:12:12,490 So this is another issue that is very closely related to this cookie stuff. 189 00:12:12,790 --> 00:12:20,650 When we are in the browser at Domain Local 3000 we can make free Ajax request to the same domain no 190 00:12:20,650 --> 00:12:21,520 issues whatsoever. 191 00:12:21,520 --> 00:12:22,850 Everyone's happy. 192 00:12:23,410 --> 00:12:27,990 As a security feature again 100 percent security related here. 193 00:12:28,060 --> 00:12:30,270 Hundred percent security related. 194 00:12:30,400 --> 00:12:37,480 The browser assumes that if you're at the domain local host 3000 and you make a request to a different 195 00:12:37,480 --> 00:12:44,050 domain the browser assumes that you are trying to do something malicious like they assumed that the 196 00:12:44,050 --> 00:12:48,700 browser assumes that it accidentally loaded up some bad javascript you know some malicious javascript 197 00:12:49,000 --> 00:12:53,890 and something bad is attempting to make or request over to a different domain. 198 00:12:54,250 --> 00:13:02,440 So the entire idea behind course again it is entirely a security issue that the browser places are a 199 00:13:02,680 --> 00:13:08,470 security issue that the browser places upon request that you try to make from it. 200 00:13:08,470 --> 00:13:09,910 Now again I can't say enough. 201 00:13:09,940 --> 00:13:12,010 Yes we could have got around this. 202 00:13:12,010 --> 00:13:17,810 We can configure this local host 5000 server this express API that we put together. 203 00:13:17,950 --> 00:13:23,770 We can configure it in such a way that it says to the browser Hey browser you know what you're making 204 00:13:23,770 --> 00:13:26,230 across urgent request but that's totally fine. 205 00:13:26,260 --> 00:13:27,380 Come on in browser. 206 00:13:27,400 --> 00:13:28,180 It's safe. 207 00:13:28,180 --> 00:13:29,440 It's completely fine. 208 00:13:29,500 --> 00:13:32,090 Allow the request here's the Jaison you looking for. 209 00:13:32,090 --> 00:13:33,470 Here's the information. 210 00:13:33,580 --> 00:13:38,600 And so again I'm going to say to you a second time we could have worked around this. 211 00:13:38,770 --> 00:13:40,340 We could have solved this issue. 212 00:13:40,570 --> 00:13:45,970 Totally possible but by not having to worry about making requests to this separate domain because we've 213 00:13:45,970 --> 00:13:47,150 got the proxy here. 214 00:13:47,380 --> 00:13:50,750 Everything is fine and it just works out OK. 215 00:13:50,830 --> 00:13:54,490 And so just to make sure things are really clear let's kind of review why we don't have to worry about 216 00:13:54,490 --> 00:13:56,170 cores in our setup. 217 00:13:56,170 --> 00:14:00,600 So again it all comes down to the proxy in the development world. 218 00:14:01,000 --> 00:14:06,850 Whenever we make a request from the browser we are going to make the request to localhost 3000 slash 219 00:14:06,880 --> 00:14:10,990 API slash whatever that will be sent to the proxy. 220 00:14:10,990 --> 00:14:17,870 The proxy will then forward the request onto the Express API the API sends a response back and in that 221 00:14:17,980 --> 00:14:21,570 it's communicated back to the browser as far as the browser is concerned. 222 00:14:21,580 --> 00:14:27,970 It only ever made a request to localhost 3000 and it doesn't think that course is even remotely an issue 223 00:14:27,970 --> 00:14:28,660 here. 224 00:14:28,660 --> 00:14:36,140 Even though the server actually is being run on local's host 5000 which would qualify as a chorus request. 225 00:14:36,160 --> 00:14:39,880 So again the proxy really saves us in development mode. 226 00:14:40,330 --> 00:14:45,940 Now in production again same thing as before when we are in the production world the browser is going 227 00:14:45,940 --> 00:14:52,600 to see in the address bar by Daut Heroku out dot.com or whatever you're randomly generated thing here 228 00:14:52,600 --> 00:14:53,160 is. 229 00:14:53,380 --> 00:14:59,080 And so when we make an API request from the browser while the browser is at rock wrapped dot com and 230 00:14:59,080 --> 00:15:05,170 we make a request back to our express server which is located at Heroku outcome is the same domain. 231 00:15:05,170 --> 00:15:10,330 So again cores are not an issue just like cookies were not an issue as well. 232 00:15:11,590 --> 00:15:12,050 Okay. 233 00:15:12,100 --> 00:15:17,650 So hopefully at this point I've given you at least a little bit of a better sense why we chose to not 234 00:15:17,830 --> 00:15:20,020 necessarily take this approach from the get go. 235 00:15:20,170 --> 00:15:22,660 Now again I want to say one more time. 236 00:15:22,690 --> 00:15:26,200 I have advocated for this approach in other courses of mine. 237 00:15:26,200 --> 00:15:31,410 One of my other courses I explicitly show how to set up a server with this time type of setup. 238 00:15:31,630 --> 00:15:33,750 But just to give you you know a little bit of variety here. 239 00:15:33,760 --> 00:15:38,200 So you something different make sure that you could use create re-act out effectively all that kind 240 00:15:38,200 --> 00:15:38,960 of stuff. 241 00:15:38,980 --> 00:15:42,610 We're taking this other different approach. 242 00:15:42,610 --> 00:15:45,310 All right so now we get into the real deep stuff. 243 00:15:45,310 --> 00:15:50,680 This is the last thing we talked about in the section if you want to feel free to take a pause right 244 00:15:50,680 --> 00:15:53,580 now pause the video grab a drink come on back. 245 00:15:53,590 --> 00:15:55,030 This is the last thing. 246 00:15:55,030 --> 00:15:58,300 And in this last this is maybe the real critical part. 247 00:15:58,320 --> 00:16:01,200 I don't know this is the part that I personally think is important. 248 00:16:01,290 --> 00:16:08,390 We're going to walk through the entire flow of our application with the proxy involved. 249 00:16:08,490 --> 00:16:11,510 So by going through flow it's getting really nasty. 250 00:16:11,520 --> 00:16:16,850 I promise you but you will get a much better sense of exactly what the proxy is doing. 251 00:16:16,890 --> 00:16:22,660 You'll get a better sense of what the browser is doing with the Google API. 252 00:16:22,680 --> 00:16:24,080 You know all this kind of stuff. 253 00:16:24,120 --> 00:16:28,020 So we're going to walk through it in the development development mode and then we will also walk through 254 00:16:28,020 --> 00:16:29,380 it in production as well. 255 00:16:29,700 --> 00:16:35,070 So again before we do this remember this is an optional video so if you're tired of hearing you talk 256 00:16:35,070 --> 00:16:36,690 about this stuff pause a video. 257 00:16:36,690 --> 00:16:37,190 Move on. 258 00:16:37,260 --> 00:16:38,320 Totally fine. 259 00:16:38,370 --> 00:16:39,210 I am not offended. 260 00:16:39,210 --> 00:16:40,300 Trust me. 261 00:16:40,930 --> 00:16:41,170 OK. 262 00:16:41,180 --> 00:16:42,510 So let's get to it. 263 00:16:42,510 --> 00:16:44,280 So you're going to love this diagram. 264 00:16:44,280 --> 00:16:45,600 Seriously. 265 00:16:45,750 --> 00:16:47,740 Yeah. 266 00:16:48,870 --> 00:16:49,940 Right. 267 00:16:50,130 --> 00:16:51,400 Here we go. 268 00:16:52,110 --> 00:16:59,780 So this is how the proxy is working with our express API in the development world. 269 00:16:59,820 --> 00:17:01,950 So the very top we've got our browser. 270 00:17:02,160 --> 00:17:06,300 Here's the crate re-act app and the proxy here is our express API. 271 00:17:06,300 --> 00:17:08,400 And then over here we have Google. 272 00:17:08,520 --> 00:17:13,650 So we're going to walk through this flow step by step together to give ourselves a better sense of what 273 00:17:13,650 --> 00:17:19,060 the proxy is doing and how some of this stuff just seems to like magically work. 274 00:17:19,110 --> 00:17:26,250 Now before we go through the flow one very critical thing I want to remind you about remember that if 275 00:17:26,250 --> 00:17:32,970 we ever specify a relative path like anywhere inside of our application like anywhere anywhere anywhere 276 00:17:33,570 --> 00:17:39,870 the browser will automatically assume that this relative path actually means whatever the current domain 277 00:17:39,870 --> 00:17:40,480 is. 278 00:17:40,500 --> 00:17:42,580 Slash author slash Google. 279 00:17:42,820 --> 00:17:50,190 That that path or that domain being a pretended onto these relative path right here is extremely critical 280 00:17:50,190 --> 00:17:54,900 to understand as we go through this flow because is what makes everything really work very nicely. 281 00:17:54,930 --> 00:17:59,260 So just remember that fact the browser will automatically prepend on the domain. 282 00:17:59,850 --> 00:18:00,060 OK. 283 00:18:00,110 --> 00:18:00,750 Let's do this. 284 00:18:00,870 --> 00:18:01,860 Honestly it won't be that bad. 285 00:18:01,860 --> 00:18:05,420 We've really covered the details of everything that's going on here already. 286 00:18:05,520 --> 00:18:09,170 And so it's kind of like reinforcing some of the stuff so really it's not that. 287 00:18:09,270 --> 00:18:09,470 OK. 288 00:18:09,480 --> 00:18:12,600 So here we are we're in the browser right here. 289 00:18:12,600 --> 00:18:17,910 Let's assume that the browser the user is out like localhost three thousand they see some link that 290 00:18:17,910 --> 00:18:21,990 says as an H ref slash or slash Google. 291 00:18:22,050 --> 00:18:26,180 Now when the user clicks on that link the browser sees that it is a relative path. 292 00:18:26,220 --> 00:18:30,490 And so it's going to automatically prepend on local host Colin 3000. 293 00:18:30,500 --> 00:18:35,570 So we're going to turn to local host 3000 slash off slash Google. 294 00:18:35,580 --> 00:18:37,000 The request is issued. 295 00:18:37,050 --> 00:18:39,360 So the browser says OK looks like we're navigating. 296 00:18:39,360 --> 00:18:41,070 I'm going to go to this other location. 297 00:18:41,100 --> 00:18:42,930 Going to go to this other route. 298 00:18:42,930 --> 00:18:48,840 So it goes to the Create react rate Sumeet create re-act server and the proxy that sits inside of it 299 00:18:49,360 --> 00:19:00,480 that proxy sees the request incoming to slash or slash Google when that request comes in the proxy automatically 300 00:19:00,780 --> 00:19:03,200 looks into its package not just on file. 301 00:19:03,210 --> 00:19:09,030 And it says this person is trying to make a request to slash or slash Google. 302 00:19:09,030 --> 00:19:12,090 Do I have any settings around that route. 303 00:19:12,090 --> 00:19:13,660 And of course yes we do. 304 00:19:13,920 --> 00:19:17,590 The proxy says hey you know what create react up I'm the proxy. 305 00:19:17,610 --> 00:19:18,330 I got this. 306 00:19:18,360 --> 00:19:20,680 I'm going to take it from here. 307 00:19:20,850 --> 00:19:21,700 So create. 308 00:19:21,820 --> 00:19:28,620 Create a proxy sees that incoming request it decides that it is responsible for that request and it 309 00:19:28,620 --> 00:19:30,900 tells that request to just sit. 310 00:19:30,900 --> 00:19:35,790 It says Hey browser hold up for a second I'm going to figure out what to do with you. 311 00:19:35,910 --> 00:19:41,490 The proxy then takes that exact request and copies the entire thing. 312 00:19:41,640 --> 00:19:42,990 Like word for word. 313 00:19:42,990 --> 00:19:43,820 Line for line. 314 00:19:43,830 --> 00:19:50,550 It takes the exact same request and completely copies it and then takes that request and sends it on 315 00:19:50,850 --> 00:19:56,570 to the new route that we had specified inside of the router configured as the proxy configuration. 316 00:19:56,790 --> 00:20:03,420 So in this case it's going to take that copy to request and send it to localhost 5000 slash Auth. slash 317 00:20:03,430 --> 00:20:05,940 Google. 318 00:20:05,950 --> 00:20:11,290 So now the request from the browser is still sitting there still pending the proxy has sent this request 319 00:20:11,290 --> 00:20:18,940 out to the Express API the Express API picks up the Reclast it says oh hey OK I see that you're trying 320 00:20:18,940 --> 00:20:22,200 to auth no problem to get into our flow. 321 00:20:22,240 --> 00:20:24,460 Please go over to Google dot com. 322 00:20:24,550 --> 00:20:26,220 So you're going to go over to Google dot com. 323 00:20:26,260 --> 00:20:29,290 And after that here is your call back. 324 00:20:29,350 --> 00:20:30,750 You are out the callback. 325 00:20:30,760 --> 00:20:31,080 You are. 326 00:20:31,120 --> 00:20:34,780 Remember the thing that we had specified in the Google strategy. 327 00:20:34,780 --> 00:20:38,780 So where's our Google strategy right here passports. 328 00:20:39,040 --> 00:20:45,730 So here's our Google strategy we had specified that Colback you are l with a relative path. 329 00:20:45,730 --> 00:20:55,800 So we said when you come back go to auth slash Google slash callback to so that response is formulated 330 00:20:55,800 --> 00:20:58,850 up by the Express API it sends it back to the proxy. 331 00:20:58,950 --> 00:21:04,440 The proxy takes the response it takes the pending request that was sitting there from the browser and 332 00:21:04,440 --> 00:21:06,380 it sends it on back. 333 00:21:06,540 --> 00:21:08,160 So it sends it back to the browser. 334 00:21:08,310 --> 00:21:11,980 And now the browser is over here thinking oh ok. 335 00:21:12,540 --> 00:21:14,390 I guess I need to go over to Google. 336 00:21:14,400 --> 00:21:16,670 That's what this request that I just made. 337 00:21:16,770 --> 00:21:22,020 Little does the browser know that the proxy actually kind of copied and did all this stuff so the browser 338 00:21:22,020 --> 00:21:24,350 thinks OK I need to go to Google right now. 339 00:21:24,390 --> 00:21:25,510 I'm going to go to Google. 340 00:21:25,620 --> 00:21:32,610 And then on return I'm going to go to slash Auth. slash Google slash callback. 341 00:21:32,610 --> 00:21:39,660 That is a relative route the relative route is going to be automatically turned into localhost three 342 00:21:39,810 --> 00:21:42,610 thousand local over 3000. 343 00:21:42,960 --> 00:21:49,260 So when we get that call back when we get redirected by Google Google is going to attempt to send us 344 00:21:49,260 --> 00:21:54,550 back to localhost 3000 not 5000 not the Express server. 345 00:21:54,670 --> 00:21:55,010 OK. 346 00:21:55,020 --> 00:21:57,410 So that's kind of like real piece of magic right there. 347 00:21:57,420 --> 00:21:59,160 Number one that's totally awesome for us. 348 00:21:59,160 --> 00:22:01,080 That really works out well. 349 00:22:01,290 --> 00:22:04,580 So the browser continues on to Google over Google. 350 00:22:04,640 --> 00:22:10,770 The user sees that consent screen it says hey these the guys these toll like whack jobs want to get 351 00:22:10,770 --> 00:22:12,160 access to your profile. 352 00:22:12,180 --> 00:22:13,130 Is that OK. 353 00:22:13,200 --> 00:22:15,750 And the user says yes that's OK. 354 00:22:15,750 --> 00:22:24,400 So Google then says OK authentication done it's time for you to go back to localhost 3000 slash off 355 00:22:24,450 --> 00:22:26,690 slash Google slash callback. 356 00:22:27,120 --> 00:22:32,910 So we go back to that address and remember this time around when we come back from the Google flow. 357 00:22:33,000 --> 00:22:35,280 We also put our code in there as well. 358 00:22:35,280 --> 00:22:38,350 The code is in the URL from the Google API. 359 00:22:38,430 --> 00:22:40,060 From the Google flow. 360 00:22:40,290 --> 00:22:42,340 So we get sent on back. 361 00:22:42,660 --> 00:22:49,740 You get sent on back and request again at local has 3000 runs into the proxy. 362 00:22:49,740 --> 00:22:58,140 Again same floatable before the proxy sees this incoming request to local host 3000 or slash Google 363 00:22:59,040 --> 00:23:03,720 slash callback that will be picked up by the same rule right here. 364 00:23:03,720 --> 00:23:09,070 Even though it says you know slash Colback it's still going to be picked up by this request right here. 365 00:23:09,660 --> 00:23:15,480 So that proxy is going to say okay I'm in charge of this route I'm going to take things over it copies 366 00:23:15,480 --> 00:23:16,300 the request. 367 00:23:16,410 --> 00:23:24,570 It sends a request to the API our API takes the profile or it takes the code that was new or l it goes 368 00:23:24,570 --> 00:23:25,850 and fetches the profile. 369 00:23:25,850 --> 00:23:28,760 It does all that fancy stuff that we spoke about endlessly. 370 00:23:28,890 --> 00:23:34,440 And then when everything is said and done it sends back some response that says OK you're logged in 371 00:23:34,440 --> 00:23:36,400 now here's your cookies. 372 00:23:36,450 --> 00:23:37,700 Hope you're happy you're logged in. 373 00:23:37,700 --> 00:23:39,720 Everything's fine. 374 00:23:39,720 --> 00:23:42,910 So the Express server then responds back and says OK. 375 00:23:42,990 --> 00:23:46,400 Everything looks good sends a response response back to the browser. 376 00:23:46,500 --> 00:23:47,780 And everyone's happy. 377 00:23:47,790 --> 00:23:53,280 Now the one thing that this diagram does not correctly have is on a diagram I'm saying that after the 378 00:23:53,280 --> 00:23:57,620 Express API collects the user details sets the cookie does all that stuff. 379 00:23:57,660 --> 00:24:01,900 I'm saying that it tells us to go back to the route of Fort sastra here. 380 00:24:01,980 --> 00:24:07,170 We have not actually done that just yet and we haven't actually set that up inside the server but we 381 00:24:07,170 --> 00:24:08,210 will very shortly. 382 00:24:08,370 --> 00:24:14,100 So at the end the server is essentially going to say OK I've got everything go back to forward slash 383 00:24:14,190 --> 00:24:21,120 or essentially do a redirect and when the redirect is sent back to the browser again the server the 384 00:24:21,120 --> 00:24:25,900 Express API is going to say just go to forward slash or like the route route in our application. 385 00:24:26,130 --> 00:24:32,490 And again the browser is going to interpret that as meaning go back to localhost 3000 slash because 386 00:24:32,490 --> 00:24:37,250 it's going to automatically prepend on the current domain. 387 00:24:37,530 --> 00:24:42,210 OK so that's the flow that saw all this stuff works. 388 00:24:42,210 --> 00:24:49,470 Again the entire linchpin here is the fact that the browser automatically pends on the domain to any 389 00:24:49,680 --> 00:24:50,810 relative route. 390 00:24:50,850 --> 00:24:54,920 That's what makes things just work like really nicely for us. 391 00:24:54,930 --> 00:24:59,370 So now we've gone through the debt flow very quickly I want to go through the production flow but it's 392 00:24:59,370 --> 00:25:01,500 much more simple much more straightforward. 393 00:25:01,620 --> 00:25:04,890 So let's do it very quickly. 394 00:25:04,890 --> 00:25:08,400 Let me zoom in just let's do 150 with. 395 00:25:08,890 --> 00:25:09,150 Okay. 396 00:25:09,150 --> 00:25:10,640 So again we're up at the browser. 397 00:25:10,830 --> 00:25:12,140 Again this is production. 398 00:25:12,150 --> 00:25:14,780 That means we no longer have to create re-act out server. 399 00:25:14,790 --> 00:25:23,710 So everything is just running on our like we get in here the buy you dog Heroku app dot com domain. 400 00:25:24,420 --> 00:25:29,690 So there's some around in production the user clicks on that button that says Take me to auth slash 401 00:25:29,730 --> 00:25:33,720 Google dot com and you know what I actually put in my notes here I said that at this point we're on 402 00:25:33,740 --> 00:25:34,970 e-mail dot com. 403 00:25:35,060 --> 00:25:39,600 It doesn't really make a difference let's assume that we buy a domain name and associate it with our 404 00:25:39,600 --> 00:25:40,350 Heroku account. 405 00:25:40,350 --> 00:25:43,300 So let's just assume we are at email dot com. 406 00:25:43,620 --> 00:25:45,130 So we are at e-mail dot com. 407 00:25:45,150 --> 00:25:51,240 We click the Start button the start button has a link where not start but you log in with Google. 408 00:25:51,330 --> 00:25:57,850 It has an a trough of slash slash Google the browser will automatically prepend on email dot com. 409 00:25:58,120 --> 00:26:00,820 So the browser gets sent onto our express API. 410 00:26:00,820 --> 00:26:03,940 Remember in production we no longer have to create re-act up server. 411 00:26:03,940 --> 00:26:05,510 We no longer have the proxy. 412 00:26:05,650 --> 00:26:08,260 And so everything behaves much more predictably. 413 00:26:08,620 --> 00:26:10,420 The request goes to the API. 414 00:26:10,420 --> 00:26:12,430 The API says oh you're trying to show off. 415 00:26:12,470 --> 00:26:12,970 OK. 416 00:26:12,970 --> 00:26:16,030 Go over to Google when you are done with Google. 417 00:26:16,060 --> 00:26:20,770 Go back to slash slash Google slash callback. 418 00:26:20,770 --> 00:26:26,260 So the browser then says OK everything looks good on return I'll go to you slash author slash fool slash 419 00:26:26,280 --> 00:26:27,490 callback. 420 00:26:27,520 --> 00:26:29,150 We go to Google a lot. 421 00:26:29,160 --> 00:26:30,190 It's complete. 422 00:26:30,220 --> 00:26:35,890 We go back to e-mail dot com because that is what the browser decided to go to when it prepended the 423 00:26:36,090 --> 00:26:38,800 URL or the domain onto the link. 424 00:26:38,800 --> 00:26:40,930 We could then go back to the Express API. 425 00:26:41,110 --> 00:26:43,770 We serve up the code that is included in this callback. 426 00:26:43,780 --> 00:26:44,650 You are all right here. 427 00:26:44,650 --> 00:26:50,650 So really this would have you know the code equals 1 2 3 whatever our express API fetches the user profile 428 00:26:50,830 --> 00:26:57,550 sets the cookie and then eventually dumps the user back at the root route of our application. 429 00:26:58,230 --> 00:26:59,580 OK. 430 00:27:00,530 --> 00:27:03,460 So I'm talked out I'm not going to lie. 431 00:27:03,760 --> 00:27:06,340 I'm talked out at this point. 432 00:27:06,340 --> 00:27:07,260 We have spoken. 433 00:27:07,300 --> 00:27:14,470 How are Apple about how our application works in the development world and in the production world at 434 00:27:14,470 --> 00:27:20,020 this point you might be thinking you know what Stephen this development or this server architecture 435 00:27:20,020 --> 00:27:22,360 that we're using is ridiculous. 436 00:27:22,360 --> 00:27:24,660 Why do we have to deal with any of this stuff at all. 437 00:27:24,940 --> 00:27:29,490 Well again let me point you back to exactly what we said at the start of all of this. 438 00:27:29,500 --> 00:27:36,370 We had originally said that to get everything to work all we really have to do is set this proxy right 439 00:27:36,370 --> 00:27:39,880 here and then everything just kind of magically happens for us. 440 00:27:39,880 --> 00:27:42,920 It all just kind of works. 441 00:27:43,300 --> 00:27:49,630 But in the real world you know what's really happening is this very complex flow and this crazy series 442 00:27:49,630 --> 00:27:57,610 of operations that works so crazy in tandem with the flow and it really relies upon these very specific 443 00:27:57,610 --> 00:28:03,000 pieces of web architecture how the browser works and all that kind of crazy stuff. 444 00:28:03,010 --> 00:28:08,150 So if you are now sitting here thinking seaven this architecture is crazy again. 445 00:28:08,290 --> 00:28:09,080 You know what. 446 00:28:09,130 --> 00:28:10,210 It works just fine. 447 00:28:10,210 --> 00:28:11,140 It's super smooth. 448 00:28:11,140 --> 00:28:14,330 You don't have to worry about all these behind the scenes details. 449 00:28:14,470 --> 00:28:21,490 But at this point I hope that you have a much better sense of how our application really works and how 450 00:28:21,490 --> 00:28:24,240 these two servers really behave together. 451 00:28:24,250 --> 00:28:28,510 In addition I hope you have a better sense of some of the reasons that we decided to go with this flow 452 00:28:28,510 --> 00:28:29,480 at all. 453 00:28:29,500 --> 00:28:33,560 You know we got to completely skirt all these issues with corps requests. 454 00:28:33,820 --> 00:28:39,850 We got to take advantage of using cookies for authentication which is very arguably the most secure 455 00:28:39,850 --> 00:28:46,280 way of handling authentication and arguably more secure than using Jason Webb tokens and manually passing 456 00:28:46,330 --> 00:28:48,550 passing them around inside requests. 457 00:28:48,850 --> 00:28:52,050 So we took this entire architecture for a good reason. 458 00:28:52,210 --> 00:28:56,350 And we only decided to kind of dive into what's going on behind the scenes so that we would get a better 459 00:28:56,350 --> 00:28:57,580 sense of what's going on. 460 00:28:57,880 --> 00:29:02,560 So I hope at this point that you better understand what our server is doing and I hope you've got a 461 00:29:02,560 --> 00:29:06,850 much better sense of how we've really put everything together. 462 00:29:06,880 --> 00:29:13,030 So now we've gone through all this stuff we are really done with a lot of the very complex theory in 463 00:29:13,030 --> 00:29:13,540 this course. 464 00:29:13,540 --> 00:29:17,810 There's not a lot of other superintends stuff like this we have to get through from here on out. 465 00:29:17,830 --> 00:29:20,400 It's mostly going to be about building the application. 466 00:29:20,860 --> 00:29:25,170 I will say that the there is like the one last thing that we have to do around production or deploying 467 00:29:25,170 --> 00:29:26,910 to production with create re-act out. 468 00:29:27,070 --> 00:29:31,600 So we might kind of revisit a couple of these topics when we deploy our application to production the 469 00:29:31,600 --> 00:29:35,220 next time but we definitely won't do it as in-depth as we have now. 470 00:29:35,710 --> 00:29:38,930 So with all this done with all this understanding of the way. 471 00:29:39,040 --> 00:29:42,930 Let's take a break continue the next section and continue working on our app.