1 00:00:00,490 --> 00:00:06,360 You know the last section we added our client id and our client secret to the keystroke genius file. 2 00:00:06,420 --> 00:00:11,220 Now when we did that you'll notice that I added on the name Google to both the client id and the client 3 00:00:11,220 --> 00:00:14,020 secret just in case you're curious why it did that. 4 00:00:14,250 --> 00:00:19,530 Let's imagine for a second that we are also going to set up Facebook a lot inside of our application 5 00:00:19,530 --> 00:00:20,370 as well. 6 00:00:20,370 --> 00:00:25,930 And so maybe we would want to add on a client id for the Facebook along to this file as well. 7 00:00:26,280 --> 00:00:31,980 If we just call this thing simply client id and then we came back in and we said all sudden we have 8 00:00:32,250 --> 00:00:34,110 a client id for Facebook. 9 00:00:34,230 --> 00:00:36,890 Well which coin ideas which one right. 10 00:00:36,940 --> 00:00:42,300 And so just because I expect to have many different keys inside this file over time I decided to just 11 00:00:42,300 --> 00:00:47,720 put the name Google in front of it to identify the key and make its purpose really obvious. 12 00:00:47,730 --> 00:00:52,050 The other thing that I want to point out to you and make sure that you really really triple check this 13 00:00:52,050 --> 00:00:54,760 inside of your own keys dodgiest file. 14 00:00:54,810 --> 00:01:01,380 Notice that I used a capital D for the client id right here so capital D very important do not do a 15 00:01:01,510 --> 00:01:02,950 lowercase. 16 00:01:03,570 --> 00:01:08,880 OK so now that we've got our key is inside this file We're going to import this file into our index 17 00:01:08,910 --> 00:01:15,510 not file and then pass those keys to the Google strategy so that the Google strategy can properly identify 18 00:01:15,510 --> 00:01:18,600 our application to the Google API. 19 00:01:19,260 --> 00:01:26,250 So underneath the Google strategy require statement I'm going to add in Konst keys is require and I'm 20 00:01:26,250 --> 00:01:31,020 going to pass on the path to the key start G-S file which is dot slash. 21 00:01:31,020 --> 00:01:37,540 So in the current directory go to the config folder and then get the keys dot japes file. 22 00:01:37,800 --> 00:01:42,960 Now for any file that we write that ends in us we don't have to add the file extension on there so we 23 00:01:42,960 --> 00:01:45,910 can simply say keys like so. 24 00:01:46,890 --> 00:01:49,180 OK so now we've got the keys object. 25 00:01:49,200 --> 00:01:54,400 So this is now the object that has the Google client id and the Google client secret. 26 00:01:54,450 --> 00:01:57,820 We can pass those two keys to the Google strategy. 27 00:01:58,200 --> 00:02:03,000 So as the first argument to the Google strategy I'm going to add a empty object. 28 00:02:03,210 --> 00:02:09,890 I'm going to give it a key of Client ID and do notice please triple check on your old code base. 29 00:02:09,930 --> 00:02:13,060 Make sure you've got a capital D over here as well. 30 00:02:13,260 --> 00:02:20,610 And then this will assign keys dot Google client id and again for the last time make sure you've got 31 00:02:20,640 --> 00:02:23,100 a capital D over here as well. 32 00:02:23,610 --> 00:02:32,790 And then we'll get our client secret which is going to come from Keys Daut Google client secret Okay. 33 00:02:32,840 --> 00:02:34,460 So that's looking pretty good. 34 00:02:34,520 --> 00:02:41,370 Now the options object right here requires one other very important argument or option excuse me. 35 00:02:41,510 --> 00:02:44,930 But before we add that in I want to talk a little bit about its purpose. 36 00:02:44,960 --> 00:02:48,920 So let's talk about this last option that we're going to add into this object and it will come back 37 00:02:48,920 --> 00:02:50,980 here and actually added in. 38 00:02:51,080 --> 00:02:56,720 So I'm going to go back over to my browser where we still have our flow diagram open now. 39 00:02:56,750 --> 00:03:02,630 Remember how this flow is working when the user clicks on the log in screen the user is going to come 40 00:03:02,630 --> 00:03:07,390 to our express server on the route auth slash Google. 41 00:03:07,400 --> 00:03:10,350 Now we have not yet set up that route but we will very shortly. 42 00:03:10,670 --> 00:03:17,040 Whenever a user comes to that route we are going to automatically forward the request on to Google servers. 43 00:03:17,420 --> 00:03:22,850 So that will be a U or l of something like Not exactly this but something like Google dot com slash 44 00:03:22,850 --> 00:03:23,760 off. 45 00:03:23,990 --> 00:03:30,110 Once the user is there they will be prompted to grant permissions to our application after the user 46 00:03:30,110 --> 00:03:31,400 grants permissions. 47 00:03:31,400 --> 00:03:37,980 The user will then be redirected back over to our server with that code inside the URL. 48 00:03:38,060 --> 00:03:42,440 And remember that code inside the query string is the real piece of magic. 49 00:03:42,440 --> 00:03:49,550 Its what allows our server to do a follow up request back over to Google and say hey we want some details 50 00:03:49,550 --> 00:03:53,480 about this user and here's the code you just gave them. 51 00:03:53,480 --> 00:03:59,660 Now the tricky part here is after the user grants permissions to our application what actually happens 52 00:03:59,660 --> 00:04:00,390 to the user. 53 00:04:00,410 --> 00:04:05,630 You know we had said that they get redirected back over to our server but what address or what route 54 00:04:05,660 --> 00:04:07,820 do they get redirected to. 55 00:04:07,880 --> 00:04:12,530 And so we have to manually specify where we want the user to be sent to. 56 00:04:12,770 --> 00:04:18,050 So in this diagram I had said that after the user grants permissions we want to automatically get the 57 00:04:18,050 --> 00:04:24,000 user sent back to our server on the route of auth slash Google slash callback. 58 00:04:24,200 --> 00:04:29,750 And so presumably we all have some route handler here or some logic to say whenever a user comes to 59 00:04:29,750 --> 00:04:35,930 this route we want to then take the code you are l and do this like follow up requests over to Google 60 00:04:35,930 --> 00:04:37,080 servers. 61 00:04:37,130 --> 00:04:43,580 So the third option that we're going to pass into that options object is this route right here off slash 62 00:04:43,580 --> 00:04:45,390 Google slash callback. 63 00:04:45,920 --> 00:04:52,070 So it is the route that the user is going to be sent to after they grant permission to our application. 64 00:04:52,070 --> 00:04:56,980 Now this might seem like a very fine grain detail and yeah I it definitely is right. 65 00:04:57,020 --> 00:05:01,730 Remember one of the things that I said was kind of rough about passport is that you have to kind of 66 00:05:02,090 --> 00:05:07,520 nudge it along or give it these little very small configuration pieces that can be kind of tough to 67 00:05:07,520 --> 00:05:11,150 figure out how this stuff is all flowing and working together. 68 00:05:11,150 --> 00:05:12,910 And so this is a great example of that. 69 00:05:12,980 --> 00:05:17,180 You know I'm saying we have to provide this little u r l or this little router right here of where the 70 00:05:17,180 --> 00:05:19,910 user should be sent to after the grant permissions. 71 00:05:20,060 --> 00:05:24,560 But if you didn't really see this diagram right here you might say like where is this thing going to 72 00:05:24,560 --> 00:05:28,280 be used like what is this you are l Why am I providing it. 73 00:05:28,280 --> 00:05:28,550 Right. 74 00:05:28,550 --> 00:05:33,870 So that's kind of this little you know nudging issue with passport in in practice. 75 00:05:33,890 --> 00:05:34,090 OK. 76 00:05:34,100 --> 00:05:40,350 So back inside of our code editor we're going to add on one more property which is called Colback you 77 00:05:40,350 --> 00:05:47,600 are l with the capital you are in L and then as a value we're going to pass a string and this is going 78 00:05:47,600 --> 00:05:54,050 to be the route that the user will be sent to after they grant permissions to our application. 79 00:05:54,050 --> 00:06:00,060 So it's going to be slash off slash Google slash callback. 80 00:06:00,380 --> 00:06:06,290 So in a little bit we are going to add a route handler to our express application to handle a user coming 81 00:06:06,290 --> 00:06:09,190 back to our application on this route right here. 82 00:06:09,260 --> 00:06:14,050 We have to add some actual logic that says OK this user is coming back from Google right now and they're 83 00:06:14,060 --> 00:06:16,970 visiting this you are out or this path right here. 84 00:06:17,060 --> 00:06:19,530 We need to handle that user appropriately. 85 00:06:20,270 --> 00:06:20,560 OK. 86 00:06:20,570 --> 00:06:22,550 So this object is looking good. 87 00:06:22,550 --> 00:06:28,130 Now there's one last argument that we're going to provide to the Google strategy after we close out 88 00:06:28,130 --> 00:06:29,310 this object right here. 89 00:06:29,450 --> 00:06:36,080 As a second argument so second argument to the Google strategy I'm going to pass an arrow function like 90 00:06:36,130 --> 00:06:42,280 some now right now we're not going to worry too much about this function. 91 00:06:42,510 --> 00:06:44,780 I am going to add on a single argument to it. 92 00:06:44,810 --> 00:06:51,760 I'm going to call it access token and we're going to console log that value of access token. 93 00:06:51,780 --> 00:06:56,100 So let's just ignore this arrow function right now and we're just going to leave this console log here 94 00:06:56,100 --> 00:06:59,850 and to say OK we'll figure out what's going on there a little bit later. 95 00:06:59,970 --> 00:07:00,380 OK. 96 00:07:00,510 --> 00:07:02,460 So we're going to leave that for now. 97 00:07:03,190 --> 00:07:03,600 OK. 98 00:07:03,630 --> 00:07:05,400 So we're going to save this file. 99 00:07:05,400 --> 00:07:09,360 We're going to take a quick break right now and then when we come back we're going to be able to test 100 00:07:09,360 --> 00:07:12,410 out the first leg of our outflow. 101 00:07:12,450 --> 00:07:18,360 So essentially this first little connection where we send our user over to the Google servers and then 102 00:07:18,360 --> 00:07:21,020 get them redirected back to our application. 103 00:07:21,060 --> 00:07:22,080 So it's take care of that. 104 00:07:22,170 --> 00:07:23,220 Inside the next section.