1 00:00:00,720 --> 00:00:04,410 In the last section we fixed up a little issue around or redirect your eye. 2 00:00:04,500 --> 00:00:08,080 Hopefully you've kind of taken a quick break between the last video and this one. 3 00:00:08,280 --> 00:00:13,580 And now there should have been enough time to allow that new redirect your eye to kick in on the Google 4 00:00:13,580 --> 00:00:14,490 allots side. 5 00:00:14,700 --> 00:00:19,500 So we're going to now test our authentication flow again by opening up a new browser and sided or seamier 6 00:00:19,540 --> 00:00:27,740 a new tab inside of our browser and visiting localhost Kolin 5000 slash off slash Google. 7 00:00:27,780 --> 00:00:33,160 Now this time I will be redirected over to choose the account that I want to authenticate with. 8 00:00:33,180 --> 00:00:34,160 Now just be clear. 9 00:00:34,170 --> 00:00:37,860 You may or may not see the screen so you might see it. 10 00:00:37,860 --> 00:00:39,090 You might not see it. 11 00:00:39,330 --> 00:00:40,040 I'm seeing it. 12 00:00:40,050 --> 00:00:42,720 I'm being prompted to choose an account again. 13 00:00:42,750 --> 00:00:44,430 You might or might not see it. 14 00:00:44,480 --> 00:00:46,430 I liked my account right here. 15 00:00:47,190 --> 00:00:53,250 And then the instant I do I get a nasty looking error message that says cannot get on slash Google slash 16 00:00:53,250 --> 00:00:54,100 callback. 17 00:00:54,330 --> 00:01:01,220 If we look up at the URL it says clearly localhost 5000 slash off slash Google slash Colback. 18 00:01:01,260 --> 00:01:04,880 So clearly we got sent back by Google to our server. 19 00:01:04,980 --> 00:01:06,480 We are back at our server. 20 00:01:06,720 --> 00:01:12,810 However our server does not yet have a route handler set up to handle a request coming into our school 21 00:01:12,810 --> 00:01:14,280 sosh callback. 22 00:01:14,280 --> 00:01:19,630 If we also look at the you l inside the query string over here you'll see a property called Code. 23 00:01:19,920 --> 00:01:25,680 And so this is that very special code that we can use on our server to now make a follow up request 24 00:01:25,740 --> 00:01:29,850 over to Google and get some actual information about this user. 25 00:01:29,850 --> 00:01:35,950 So essentially at this point in time we have gone from here to here to here to here to here. 26 00:01:36,240 --> 00:01:43,050 And we now have the code and we need to exchange it with Google servers to get some actual profile information 27 00:01:43,050 --> 00:01:44,600 about the user. 28 00:01:45,400 --> 00:01:45,790 OK. 29 00:01:45,840 --> 00:01:47,820 So let's get to it. 30 00:01:47,880 --> 00:01:51,720 This is going to be another one of those things where we're going to do a little bit of setup inside 31 00:01:51,720 --> 00:01:53,420 of our index not just file. 32 00:01:53,460 --> 00:01:58,410 We're going to add in a little bit of code and it's going to feel like gee how does this stuff all kind 33 00:01:58,410 --> 00:02:03,690 of fit together like if you're just adding the code here without the benefit of this diagram and me 34 00:02:03,720 --> 00:02:06,610 kind of you know telling you step by step what's going on. 35 00:02:06,630 --> 00:02:09,450 It's kind of hard to get a sense of what passport is really doing. 36 00:02:09,720 --> 00:02:13,710 So when we add on this next snippet of code this is probably going to be another location we were kind 37 00:02:13,710 --> 00:02:17,330 of thinking like why like what's going on here what's happening. 38 00:02:17,430 --> 00:02:18,750 And hey that's totally fine. 39 00:02:18,750 --> 00:02:21,800 Remember it really just all comes down to this flow. 40 00:02:22,430 --> 00:02:22,660 OK. 41 00:02:22,680 --> 00:02:28,410 So our job right now is to make sure that when the user gets redirected to auth slash Google slash callback 42 00:02:28,860 --> 00:02:35,640 we have some route handler that will take in the users request and do this entire like code exchange 43 00:02:35,640 --> 00:02:37,170 thing. 44 00:02:37,170 --> 00:02:44,100 So back inside of our index not just file our first step is going to be to add in a second route handler 45 00:02:44,340 --> 00:02:48,970 to handle the case in which a user visits or slash Google slash callback. 46 00:02:49,030 --> 00:02:59,520 So I will say app get app versus me off Google callback and then remember how we set up our handlers. 47 00:02:59,540 --> 00:03:04,810 Usually we will pass in an Aero function right here but just like we had done previously with the last 48 00:03:05,000 --> 00:03:11,550 handler that we did we are not going to handle all of this taking the code and exchanging it for information. 49 00:03:11,600 --> 00:03:14,580 You know you and I are not going to do this follow up request right here. 50 00:03:14,660 --> 00:03:20,050 Instead the Google strategy through passport is going to handle that for us. 51 00:03:20,060 --> 00:03:25,410 So rather than putting some logic inside of here to say Okay take the code exchange it for some information. 52 00:03:25,530 --> 00:03:31,250 We're going to say hey pass for Europe again take this request and somehow resolve it into an actual 53 00:03:31,250 --> 00:03:32,680 profile. 54 00:03:32,720 --> 00:03:39,170 So just like we did previously we're going to say passport dot authenticates and then we're going to 55 00:03:39,200 --> 00:03:47,240 tell passports specifically to attempt to use that Google strategy to handle this incoming requests. 56 00:03:47,240 --> 00:03:53,630 Now again remember that this string of Google right here the Google strategy internally has some identifier 57 00:03:53,630 --> 00:03:55,390 that says hey my name is Google. 58 00:03:55,440 --> 00:04:01,790 If anyone asked to be authenticated with Google use this strategy right here. 59 00:04:01,940 --> 00:04:06,660 Now you might also notice that these two Raut handlers look awfully similar at this point in time. 60 00:04:06,680 --> 00:04:11,720 The big difference between them is that when a user gets sent back to off slash Google slash callback 61 00:04:12,230 --> 00:04:15,250 inside of the URL they're going to have that code available. 62 00:04:15,350 --> 00:04:16,880 Remember the code. 63 00:04:16,880 --> 00:04:18,770 So here's the code right here. 64 00:04:18,770 --> 00:04:26,720 So when we send this request off to passports in this case passport is going to see that the code is 65 00:04:26,720 --> 00:04:32,300 inside the you are l and they're going to say oh the user clearly is not attempting to be authenticated 66 00:04:32,300 --> 00:04:33,400 for the first time. 67 00:04:33,500 --> 00:04:36,790 They are attempting to turn that code into an actual profile. 68 00:04:36,850 --> 00:04:40,470 And so even though these two route handlers right here look very similar. 69 00:04:40,490 --> 00:04:45,410 The big difference is that when the user visits this route they're going to have the code and Google's 70 00:04:45,410 --> 00:04:49,230 strategy is going to see that an attempt to handle the request a little bit differently. 71 00:04:49,400 --> 00:04:52,210 It's going to say OK I'm not going to kick the user into the flow. 72 00:04:52,280 --> 00:04:56,250 Instead I'm going to exchange the code for the actual user profile. 73 00:04:57,050 --> 00:04:57,530 OK. 74 00:04:57,890 --> 00:05:00,410 So we now have enough to actually test this out. 75 00:05:00,450 --> 00:05:04,220 You know again hey like who knows what's going to happen let's just test it and see what happens right. 76 00:05:04,220 --> 00:05:06,300 Let's see what we get. 77 00:05:06,380 --> 00:05:12,400 So I'm going to go back over to my terminal because we change the code inside of our index file. 78 00:05:12,410 --> 00:05:14,110 We have to restart our server. 79 00:05:14,480 --> 00:05:19,610 And you can imagine that this is going to get tedious very quickly to restart our server every time. 80 00:05:19,610 --> 00:05:20,220 Don't worry. 81 00:05:20,240 --> 00:05:21,020 And just a little bit. 82 00:05:21,020 --> 00:05:25,760 We're going to set up a little handle or a little helper to make sure we don't have to constantly restart 83 00:05:25,760 --> 00:05:27,810 our server file every time we make a change. 84 00:05:28,010 --> 00:05:29,770 But we'll do that in just a second. 85 00:05:30,410 --> 00:05:30,680 OK. 86 00:05:30,680 --> 00:05:31,780 So restart the server. 87 00:05:31,940 --> 00:05:36,880 The server is now running and we're now going to go through our overflow again. 88 00:05:37,010 --> 00:05:44,180 So I'm going to go to localhost Kolin 5000 slash off slash Google. 89 00:05:44,510 --> 00:05:48,520 Again we get prompted to choose an account and then to select my account. 90 00:05:48,560 --> 00:05:54,890 Now we're going to get kicked back over to our server of local host 5000 slash slash Google. 91 00:05:55,220 --> 00:05:59,600 But you'll notice that it appears that we are just hanging on the screen right now and that is totally 92 00:05:59,600 --> 00:06:00,080 OK. 93 00:06:00,080 --> 00:06:02,000 That is to be expected. 94 00:06:02,000 --> 00:06:07,640 So at this point we have now been redirected to our server and all we have said like the only code that 95 00:06:07,640 --> 00:06:13,460 we have added in at all has been something to say hey passport take that code and turn it into like 96 00:06:13,490 --> 00:06:14,880 a user profile. 97 00:06:14,990 --> 00:06:20,870 So we haven't done anything at all to handle the underlying request and say oh we've now got that profile 98 00:06:20,870 --> 00:06:23,070 like let's do something with the user. 99 00:06:23,150 --> 00:06:28,670 So there's nothing on our server to say hey take the profile or take the user and actually show them 100 00:06:28,670 --> 00:06:29,370 some content. 101 00:06:29,390 --> 00:06:31,970 And that's why we are currently hanging on the screen. 102 00:06:32,000 --> 00:06:39,670 However if we change back over to our terminal you're going to see a big long string right here of characters. 103 00:06:39,830 --> 00:06:42,070 And so hey what where is this coming from. 104 00:06:42,080 --> 00:06:43,520 This is kind of crazy. 105 00:06:44,060 --> 00:06:50,150 Well if you remember I'll remember inside of our index file when we had to find our Google strategy 106 00:06:50,600 --> 00:06:54,170 we had added on that callback function as the second argument right here. 107 00:06:54,170 --> 00:07:00,080 And we had said take something for the first argument is called access token and just console log it. 108 00:07:00,140 --> 00:07:02,230 And so that's exactly what's happening right now. 109 00:07:02,390 --> 00:07:05,020 Our user has come back to our server. 110 00:07:05,210 --> 00:07:06,290 We took the code. 111 00:07:06,290 --> 00:07:12,620 We exchanged the code for a profile and whenever that happens the Google strategy then intends to call 112 00:07:12,800 --> 00:07:15,000 this callback function right here. 113 00:07:15,040 --> 00:07:21,680 And so if it seems like wow this is a real complicated flow of events like somehow the user got from 114 00:07:22,100 --> 00:07:27,020 this callback right or Seamew this route handler right here and then this thing and they're jumping 115 00:07:27,020 --> 00:07:29,820 over here what like what's going on here. 116 00:07:30,020 --> 00:07:34,110 And yes I agree with you like this is pretty crazy and some pretty heavy duty stuff. 117 00:07:34,220 --> 00:07:41,510 So if nothing else let's just kind of acknowledge that it looks like the process was successful because 118 00:07:41,510 --> 00:07:44,710 we got some like access code or something like that right here. 119 00:07:45,020 --> 00:07:49,910 So at this point let's take a break and let's just kind of acknowledge and say gee this seems kind of 120 00:07:49,910 --> 00:07:51,020 confusing right now. 121 00:07:51,170 --> 00:07:55,570 We're going to you in the next section and we're going to kind of figure out what is going on with this 122 00:07:55,570 --> 00:07:58,780 little callback function right here what this access token is. 123 00:07:58,790 --> 00:08:03,100 And just like in general what the heck is going on with this flow. 124 00:08:03,170 --> 00:08:05,400 So quick break and I'll catch you in the next section.