1 00:00:00,720 --> 00:00:05,930 In the last section we tested out our flow but we really saw an error message that said redirect your 2 00:00:06,090 --> 00:00:06,980 mismatch. 3 00:00:07,380 --> 00:00:12,300 So we were kind of expecting this air or at least I told you to expect it let's take the opportunity 4 00:00:12,300 --> 00:00:14,070 to kind of figure out what's going on. 5 00:00:14,190 --> 00:00:19,140 And when we do we're going to get a better sense of what a lot is doing behind the scenes. 6 00:00:19,170 --> 00:00:21,910 I'm going to take the or else that's in my address bar right now. 7 00:00:21,960 --> 00:00:27,270 I'm going to copy it and then paste it inside my code editor so that we can kind of dissect this you 8 00:00:27,270 --> 00:00:29,030 are Al just a little bit. 9 00:00:29,340 --> 00:00:32,160 I'm going to turn on soft rap like so. 10 00:00:32,160 --> 00:00:33,960 So here's the entire you are l. 11 00:00:34,440 --> 00:00:36,770 Here's the bass you are l. 12 00:00:36,870 --> 00:00:41,850 And then after that we've got a clearer string which contains some information about the flow that we're 13 00:00:41,850 --> 00:00:43,480 kicking the user into. 14 00:00:43,560 --> 00:00:47,700 Now to just make this a little bit more legible I'm going to add in a couple of new line characters 15 00:00:47,700 --> 00:00:48,210 here. 16 00:00:48,510 --> 00:00:54,280 After every property inside the query string OK. 17 00:00:54,580 --> 00:00:59,980 So the very first property we have is the response code or the risks you excuse me the response type 18 00:01:00,040 --> 00:01:02,740 and we're saying that we expect to get a code back. 19 00:01:02,740 --> 00:01:07,960 Remember we had said that after the user grants permission to our application the user would be sent 20 00:01:07,960 --> 00:01:13,300 back to her application with this code that we can use to exchange with Google to get some information 21 00:01:13,300 --> 00:01:15,070 about the user's profile. 22 00:01:15,070 --> 00:01:21,250 So after the user grant permission to us to read their account we don't immediately get sent back their 23 00:01:21,250 --> 00:01:25,150 entire account and all the information tied to it or we get sent back. 24 00:01:25,150 --> 00:01:30,910 Is that code which we can then use to make a follow up request to Google to ask for some more information 25 00:01:30,910 --> 00:01:32,400 about this user. 26 00:01:32,530 --> 00:01:34,940 So we are clearly asking for the code right here. 27 00:01:34,940 --> 00:01:37,390 So that's definitely working out pretty well. 28 00:01:37,390 --> 00:01:39,290 Next is the redirect to your eye. 29 00:01:39,340 --> 00:01:44,590 Now obviously based on the error message we got this is part of what's going on wrong so let's just 30 00:01:44,680 --> 00:01:46,410 take a pause over that one really quickly. 31 00:01:46,420 --> 00:01:48,570 We'll talk about the other two properties first. 32 00:01:48,910 --> 00:01:50,140 So here is our scope. 33 00:01:50,140 --> 00:01:52,870 These are the two pieces of information that we're asking for. 34 00:01:52,870 --> 00:01:56,880 We want to get access to the user's profile and their e-mail address. 35 00:01:56,920 --> 00:02:03,450 And then finally we also have the client I.D. which identifies our application to Google's servers. 36 00:02:03,670 --> 00:02:04,220 OK. 37 00:02:04,630 --> 00:02:10,250 So the redirect you are I remember the redirect you are right here. 38 00:02:10,360 --> 00:02:14,950 Well I shouldn't say remember because we haven't really specifically spoken about it just yet but if 39 00:02:14,950 --> 00:02:25,510 you look at the your redirect your eye very closely you will see HTP localhost 5000 off Google Colback. 40 00:02:25,570 --> 00:02:31,720 So the redirect you or I is the address that a user should be redirected to from Google after they give 41 00:02:31,720 --> 00:02:33,990 permission to our application. 42 00:02:34,000 --> 00:02:39,680 So remember after the user grants permission we had said that the user should be redirected to localhost 43 00:02:39,750 --> 00:02:46,720 five thousand off Google callback and we had even set up that particular route inside of our Google 44 00:02:46,720 --> 00:02:48,030 strategy. 45 00:02:48,040 --> 00:02:52,750 So here's the Google strategy and here's that callback you are l where we had specifically said after 46 00:02:52,750 --> 00:02:56,240 the user grants permission send them to this route right here. 47 00:02:56,980 --> 00:03:01,330 So clearly that is being communicated correctly over to Google like here's the route. 48 00:03:01,330 --> 00:03:02,320 Without a doubt. 49 00:03:02,620 --> 00:03:04,910 But here's the problem here's what's going on. 50 00:03:05,350 --> 00:03:10,150 I want you to imagine for a second that you and I were hackers right. 51 00:03:10,150 --> 00:03:16,690 Like we are malicious users we are bad people and we want to somehow hijack someone's authentication 52 00:03:16,690 --> 00:03:18,590 flow or they're all off low. 53 00:03:19,120 --> 00:03:27,700 Maybe if we took this entire Big R L which clearly attempts to authenticate some user and tell the user 54 00:03:27,910 --> 00:03:33,490 hey this these people over here like whoever owns this idea wants to get access to your user account. 55 00:03:33,700 --> 00:03:39,640 Let's imagine for a second that you and I were malicious users and we replaced this client id right 56 00:03:39,640 --> 00:03:44,140 here with some really official Client ID because remember the client id is public. 57 00:03:44,170 --> 00:03:46,710 Everyone knows everyone else's client ID. 58 00:03:46,900 --> 00:03:55,220 So maybe we like took Air B and B is Client ID from Google Earth and we put it in here and then we wanted 59 00:03:55,240 --> 00:04:01,810 to somehow hijack users and think that they were authenticating with Air B and B but in fact we were 60 00:04:01,810 --> 00:04:07,210 going to send them back to our servers and record all of their account information which is obviously 61 00:04:07,210 --> 00:04:07,930 not a good thing. 62 00:04:07,930 --> 00:04:09,200 Very malicious. 63 00:04:09,490 --> 00:04:15,730 One possibility of how we could pull this off is to change the redirect to your eye and say instead 64 00:04:15,730 --> 00:04:18,210 of sending the user back into I dont know. 65 00:04:18,220 --> 00:04:23,290 You know Aramean BS fluorite here which might be like Air B and B dot com. 66 00:04:23,290 --> 00:04:30,890 Maybe you and I would change this to our hacker server dot com slash off. 67 00:04:30,940 --> 00:04:37,900 So now if we could get away with this we could somehow trick users into clicking this link the user 68 00:04:37,900 --> 00:04:43,660 would be presented with some message that says oh it looks like air and B is trying to get access to 69 00:04:43,660 --> 00:04:44,650 your profile. 70 00:04:44,710 --> 00:04:48,700 The user would say oh yeah that's fantastic it's urban B I trust them. 71 00:04:48,920 --> 00:04:55,120 But after these are granted permission Google would send the user back to our Hakkar server dot com 72 00:04:55,600 --> 00:05:01,510 with a special code inside the your L and then our malicious server our hacker server could then make 73 00:05:01,510 --> 00:05:07,290 that Falah request over to Google with the code and say hey give me some information about this user. 74 00:05:07,360 --> 00:05:13,870 And so it's very easy to imagine how this entire old schema this entire Austine could be very easily 75 00:05:13,870 --> 00:05:19,630 manipulated into giving or tricking really tricking users into giving their authentication or their 76 00:05:19,630 --> 00:05:24,700 profile information to malicious actors or bad people. 77 00:05:24,700 --> 00:05:28,710 So how is that actually all related to our application like what's actually going on here. 78 00:05:28,990 --> 00:05:34,630 Well if we look at the actual error message right here it says redirect you are a mismatch. 79 00:05:34,660 --> 00:05:42,220 In other words when we set up our flow and we said send the user back to auth slash Google slash callback. 80 00:05:42,430 --> 00:05:48,900 We had not properly set up our account to say that that was a valid you or I to redirect that user to. 81 00:05:49,210 --> 00:05:52,580 So Google internally tracks what valid you are eyes. 82 00:05:52,610 --> 00:05:59,470 We can you or els or user can be redirected to so that malicious users or bad people can't just replace 83 00:05:59,470 --> 00:06:04,430 the redirect to you or I'd right here and say oh yes send them over to this rental place instead. 84 00:06:04,450 --> 00:06:09,280 Google is going to look at this redirect you or I that we are providing to them and verified ahead of 85 00:06:09,280 --> 00:06:15,370 time and say OK does this person or does this redirect you or is this like an authorized target like 86 00:06:15,730 --> 00:06:18,430 is it permissible for us to send the user back here. 87 00:06:18,610 --> 00:06:22,420 We're going to check against our own records and if they're not allowed to go there then we're going 88 00:06:22,420 --> 00:06:24,260 to throw this big error message. 89 00:06:24,280 --> 00:06:25,980 So that's pretty much what's going on. 90 00:06:25,990 --> 00:06:31,510 The purpose of this redirect you or I air that we're seen right here is entirely security related is 91 00:06:31,510 --> 00:06:37,180 to make sure that users do not get accidently tricked into providing their profile information to that 92 00:06:37,180 --> 00:06:38,170 people. 93 00:06:38,740 --> 00:06:39,950 So how do we fix it. 94 00:06:40,210 --> 00:06:41,450 Well it's pretty straightforward. 95 00:06:41,680 --> 00:06:48,400 We get a link right here to update our authorized client redirect you or I sign it. 96 00:06:48,460 --> 00:06:51,250 Copy that link. 97 00:06:51,300 --> 00:06:52,490 I'm going to make a new tab. 98 00:06:52,600 --> 00:06:54,300 I'm going to visit it directly. 99 00:06:54,760 --> 00:06:58,140 And then the page that's going to pop up is probably going to look just a little bit familiar. 100 00:06:58,180 --> 00:07:05,020 So we got sent back to the Google Developer Council specifically to the page where we had set up our 101 00:07:05,020 --> 00:07:07,040 original client ID. 102 00:07:07,300 --> 00:07:11,910 So on here is a list of all of our authorized redirect to our eyes. 103 00:07:11,920 --> 00:07:13,560 We had entered a you or I. 104 00:07:13,740 --> 00:07:18,730 You'll notice that it did not exactly match up with the route that we asked the user to be sent back 105 00:07:18,730 --> 00:07:19,560 to. 106 00:07:19,570 --> 00:07:26,620 So rather than saying localhost Kulin 5000 slash star We're going to say local host Conan 5000 slash 107 00:07:26,710 --> 00:07:34,420 Auth. slash Google slash callback and then we'll hit save and make sure you get the dot dot dot on there. 108 00:07:34,900 --> 00:07:35,440 OK. 109 00:07:35,680 --> 00:07:41,470 So now whenever a user gets sent into our waterflow we are going to say to Google hey after they give 110 00:07:41,470 --> 00:07:45,970 us permission kick them back to this exact address right here. 111 00:07:46,180 --> 00:07:51,500 Google will say oh it looks like that is a permissible address or a permissible redirect you or I. 112 00:07:51,520 --> 00:07:52,920 So that's totally fine. 113 00:07:52,930 --> 00:07:57,970 We can safely send them back there and the user will be sent back to this address and then we will handle 114 00:07:57,970 --> 00:08:00,720 the follow up request appropriately. 115 00:08:00,730 --> 00:08:01,330 OK. 116 00:08:01,510 --> 00:08:05,530 So this has been one crazy little piece of cloth. 117 00:08:05,590 --> 00:08:09,820 Hopefully maybe this flow is starting to make a little bit more sense right now and you're starting 118 00:08:09,820 --> 00:08:15,610 to get a little bit of a sense of some of the security considerations around a lot as well. 119 00:08:15,610 --> 00:08:21,070 Now one thing I want to say is that if you attempt to test the flow again right now you might still 120 00:08:21,070 --> 00:08:22,560 see the same error message. 121 00:08:22,600 --> 00:08:27,820 That's because it takes a little bit of time for this new redirect your eye to actually kick in and 122 00:08:27,820 --> 00:08:29,700 be registered on Google servers. 123 00:08:29,950 --> 00:08:31,850 So we're going to take a pause right now. 124 00:08:31,870 --> 00:08:36,370 We're going to pause and I recommend you maybe take like a five minute pause you know go grab a drink 125 00:08:36,370 --> 00:08:37,130 or something. 126 00:08:37,150 --> 00:08:42,820 And by the time you get back this new redirect you or I should be accessible on Google servers or should 127 00:08:42,820 --> 00:08:47,770 be actually active because again it takes some small amount of time for it's actually kind of kick in. 128 00:08:47,860 --> 00:08:51,080 So it will take a break and when we come back we will test our water flow again. 129 00:08:51,190 --> 00:08:53,370 So we'll see you in just a second.