WEBVTT 00:03.730 --> 00:05.470 Hey there, everyone here this year. 00:05.470 --> 00:08.430 And before we move further, I would like to ask you a question. 00:08.470 --> 00:10.180 What is passport? 00:10.950 --> 00:12.380 Can you answer this question? 00:12.390 --> 00:13.530 What is this passport? 00:13.560 --> 00:14.760 It is a middleware. 00:15.120 --> 00:17.430 Let me ask you again, what is passport? 00:17.460 --> 00:18.540 It is a middleware. 00:18.570 --> 00:20.500 Hey, why are you repeating yourself? 00:20.520 --> 00:22.430 Because this is the entirety of the stuff. 00:22.440 --> 00:25.390 This is where the entirety of the application is hidden behind. 00:25.410 --> 00:26.310 This is a middleware. 00:26.310 --> 00:30.570 And don't forget that our rest of the things are going to become automatically easy for you. 00:30.600 --> 00:32.120 So let me walk you through that. 00:32.130 --> 00:37.770 So what we're going to do on this Google login screen, we expect that we'll be having auth because 00:37.770 --> 00:39.570 that's where we are writing all of our files. 00:39.570 --> 00:40.670 So that makes sense. 00:40.680 --> 00:46.020 If I go ahead and say Google my Google, whatever that is, this root should be declared. 00:46.470 --> 00:48.010 Makes sense very much. 00:48.030 --> 00:49.220 Let's go into the order. 00:49.260 --> 00:52.710 JS And just like we have slash login, we should have another route up here. 00:52.710 --> 00:55.920 So we're going to go ahead, copy this one and we'll be saying that. 00:55.920 --> 00:59.930 Okay, now this will be Google already we are injecting in the middleware slash. 01:00.120 --> 01:02.250 So this should be slash or slash Google. 01:02.620 --> 01:03.870 Okay, that is fine. 01:03.900 --> 01:10.020 Now, this is going to be instead of rendering this one, let's go ahead and send this one simply that 01:10.020 --> 01:15.780 this is going to be simply restart send and we're going to say log in with Google. 01:16.650 --> 01:20.540 So now we have a route which can actually do some job. 01:20.550 --> 01:26.310 Let me go ahead and refresh and check you that refresh and now click on Google and there is something 01:26.310 --> 01:29.790 which is handling log in with Google, but there is somebody which is handling. 01:30.060 --> 01:34.280 Now whenever you want to show the consent screen, you have to inject passport. 01:34.290 --> 01:39.150 How do we inject passport as a middleware on whatever the route you actually wish for? 01:39.180 --> 01:41.790 So in this case, let's go ahead and bring on the passport. 01:41.790 --> 01:43.110 So we have already installed that. 01:43.110 --> 01:45.540 So we're going to go ahead and say pass passport. 01:45.540 --> 01:50.060 And that passport is going to go ahead and say, I need passport. 01:50.070 --> 01:50.810 There we go. 01:50.820 --> 01:52.080 Now passport is here. 01:52.080 --> 01:53.550 How do we inject it as Google? 01:53.550 --> 01:54.510 So we simply go ahead. 01:54.510 --> 01:59.850 And as they actually mentioned that on their home page or website that all you got to say is passport 01:59.850 --> 02:03.990 authenticate and whatever you want to authenticate just mentioned that, yeah, we're going to do that. 02:04.230 --> 02:06.900 So we're going to go ahead and come here as a middleware. 02:06.900 --> 02:11.370 And now let's go ahead and say, Hey, Passport, I want to use your method, which is authenticate 02:11.370 --> 02:12.630 which you promote quite a lot. 02:12.630 --> 02:16.350 And the authentication is what I'm using is Google. 02:16.710 --> 02:17.530 That is nice. 02:17.550 --> 02:21.060 Now it also takes another parameter here, which is an object. 02:21.060 --> 02:27.030 And in this object you have to mention that what is the scope or what is the scope of amount of data 02:27.030 --> 02:28.560 that you are going to be bringing in? 02:28.560 --> 02:32.580 So I'm going to be going ahead and will say that, hey, I do have a scope, so I'm going to go ahead 02:32.580 --> 02:35.310 and say scope and scope is actually an array. 02:35.310 --> 02:37.350 And in this you can mention whatever you wish. 02:37.350 --> 02:40.110 So by default it actually brings up the profile. 02:40.110 --> 02:44.790 But since we have asked on one more thing, which is email which is required and trivial for our application, 02:44.790 --> 02:46.320 we have gone ahead and used that. 02:46.530 --> 02:51.360 So this is all basics, what we have got and notice it doesn't have any comma. 02:51.360 --> 02:58.440 So after email and this authenticate, it should have a comma here, save that and now it is all happy 02:58.440 --> 03:03.620 and it says, okay, now there is a Google, there is a passport authenticate and there we go. 03:03.630 --> 03:08.610 Let's go ahead and see if this is the only work that we have to wish I wish we had to do. 03:08.880 --> 03:10.140 But there is a little bit more. 03:10.140 --> 03:15.390 But let's see now we have injected the middleware I see in the Google and says, hey, a non Google 03:15.390 --> 03:15.930 strategy. 03:15.930 --> 03:23.310 So I don't know how this strategy is implemented in the so much of our work that we have done together, 03:23.310 --> 03:27.780 we have seen that if you inject anything in the middle, there is some kind of process that is going 03:27.780 --> 03:31.920 to follow through and then it passes on the chain that, hey, now you do whatever you want to do. 03:31.980 --> 03:33.810 This is exactly has happened here. 03:33.810 --> 03:36.720 This is a passport authentication that we have injected. 03:36.990 --> 03:40.920 Now, if you really want to go through one more step, then you have to bring in the strategy. 03:40.920 --> 03:44.740 Let's go ahead and see how the bring that strategy because I have no idea how that works in. 03:44.940 --> 03:48.720 So this is the strategy that they say, hey, this is the strategy you have to work on. 03:48.720 --> 03:50.610 And notice they also write this one. 03:50.610 --> 03:55.530 So where this is the Google strategy that we'll be bringing in and says passport use. 03:55.530 --> 04:00.210 Now you have a couple of options how you want to do and bring this entirety of the application. 04:00.510 --> 04:05.820 So I'll come back here and usually such kind of middleware actually goes into the index file. 04:05.820 --> 04:10.500 So this is where just where we are writing these app dot use and everything, we actually need to do 04:10.500 --> 04:10.980 that. 04:10.980 --> 04:16.470 But since this password is written so nicely that you can actually go ahead and place that inside another 04:16.470 --> 04:21.540 folder, so usually you are going to see another folder which is passport, just like that. 04:21.540 --> 04:26.190 It is that much famous of a library that it actually goes inside in its own folder. 04:26.190 --> 04:32.010 Now inside this passport, we're going to go ahead and simply create another file which will be same 04:32.430 --> 04:34.140 passport dot. 04:34.140 --> 04:35.670 JS Okay. 04:35.790 --> 04:38.670 What we're going to do is we are going to bring up the strategy first. 04:38.670 --> 04:40.260 Let's bring the passport here as well. 04:40.260 --> 04:42.270 So we're going to go ahead and say passport. 04:42.270 --> 04:46.860 That is going to be simply require passport. 04:46.860 --> 04:49.200 So this is the one thing that we always are going to require. 04:49.200 --> 04:51.150 Now let's see how this strategy works on. 04:51.390 --> 04:54.060 So in this first it says, hey, bring on this strategy. 04:54.060 --> 04:55.830 So entirety of the Google and everything. 04:55.830 --> 04:59.820 So we're going to go ahead and copy this line to much copied. 05:01.110 --> 05:01.530 There we go. 05:01.560 --> 05:05.700 This is the only thing that we want to bring in first and we want to study this everything. 05:05.700 --> 05:10.350 So it says, hey, Google strategy, assuming that you have installed this one, which we have and we 05:10.350 --> 05:16.530 are bringing in the strategy now after moving that, it says, hey, now further down the road, I ask 05:16.530 --> 05:17.490 you to use this one. 05:17.490 --> 05:23.040 So passport use and you have to use this new Google strategy and then you have to show me the client 05:23.040 --> 05:28.110 ID, client secret callback URL, and then I'll give you access to this function pretty much. 05:28.110 --> 05:28.350 Okay. 05:28.350 --> 05:32.820 But I want to write it so that I can actually understand what's happening at each of this phase. 05:32.970 --> 05:36.900 So I'm going to go ahead and say passport, dot use. 05:36.900 --> 05:39.720 And inside this one I want to use a new Google strategy. 05:39.720 --> 05:42.630 So I'm going to go ahead and say new Google strategy. 05:42.660 --> 05:48.540 Now, this new Google strategy will take a couple of parameters and we just saw that these are the parameters. 05:48.540 --> 05:54.180 So I create an object here and it takes client ID, client secret and callback URL. 05:54.210 --> 05:55.470 Let's go ahead and open that. 05:55.680 --> 05:59.310 So the first thing is it takes client. 06:00.210 --> 06:03.690 Let me copy that because I think I might make a mistake here. 06:03.690 --> 06:11.220 There's a I and both capital so client ID how we are going to bring in the client ID now that is obviously 06:11.220 --> 06:12.630 a new thing for us. 06:12.630 --> 06:15.870 So what we're going to do is let me open up my sublime text. 06:15.870 --> 06:17.190 So this is really big. 06:18.140 --> 06:22.670 And remember the application file that we downloaded for the client ID and the secret? 06:22.700 --> 06:23.090 Yep. 06:23.180 --> 06:25.970 That's exactly from where we are going to bring in this one. 06:26.330 --> 06:29.240 So this is too big of a file. 06:30.720 --> 06:32.970 And why is it adding these ones? 06:34.440 --> 06:39.030 And let's go ahead and break it up, because this is really, really too big. 06:39.840 --> 06:43.950 Let me open this up into V code itself so that I can actually see it. 06:44.980 --> 06:46.590 Open and restricted mode here. 06:46.600 --> 06:47.500 That's fine. 06:48.100 --> 06:49.660 And I can go ahead and move that. 06:49.900 --> 06:50.440 So there we go. 06:50.440 --> 06:52.360 So now we need first is the client ID. 06:52.360 --> 06:56.500 So this is my client ID, it has a lot more information, but I don't need that. 06:56.500 --> 06:58.570 I'll copy this one only copy that. 06:58.990 --> 07:01.480 And now let's go ahead and add this up here. 07:01.480 --> 07:08.800 So this is my client ID and I'm going to put up a comma here and it is having some the issues with my 07:08.800 --> 07:10.000 client ID. 07:10.030 --> 07:15.580 Let me just go ahead and quickly see that this one is expecting a comma. 07:15.580 --> 07:16.990 Why are you expecting a comma? 07:16.990 --> 07:17.740 Oh, my bad. 07:17.860 --> 07:19.300 Cut this out entirely. 07:19.300 --> 07:21.100 Because this needs to be an object. 07:21.100 --> 07:21.880 There we go. 07:21.880 --> 07:23.560 And then it should be all happy. 07:24.130 --> 07:24.880 Save that. 07:24.880 --> 07:25.360 There we go. 07:25.360 --> 07:26.650 So now we have the client ID. 07:26.650 --> 07:28.120 Let's work for another one. 07:28.540 --> 07:31.090 Okay, so this time we need a client secret. 07:32.090 --> 07:33.050 Copy that. 07:34.420 --> 07:35.620 And there we go. 07:37.030 --> 07:39.220 And I'm going to say client secret. 07:40.150 --> 07:42.730 And let's go ahead and inject a client secret. 07:44.300 --> 07:46.880 The Clean Secret is available just right up here. 07:46.910 --> 07:49.250 Copy that and paste it up there. 07:49.280 --> 07:54.260 We do have more stuff to actually provide, but we're going to go ahead and work on that this much only. 07:54.380 --> 07:59.960 Now, remember one thing I told you, this Google strategy, if you closely analyze this one, this 07:59.960 --> 08:01.100 is the Google strategy. 08:01.100 --> 08:04.670 And just after the Google strategy, it actually provides you a callback function. 08:04.670 --> 08:09.230 And here it actually uses the function, which is usually a better way in this scenario especially. 08:09.230 --> 08:13.490 But we can actually go ahead and use the arrow functions in case that is your favorite. 08:13.730 --> 08:16.610 So let me go ahead and put up a comma hit to enter. 08:16.850 --> 08:22.490 And just here we can actually go ahead and use a simple callback and we're going to just put a comment 08:22.490 --> 08:24.380 here which says, call back. 08:25.880 --> 08:26.750 That's pretty much it. 08:26.780 --> 08:28.040 Let's go ahead and save this one. 08:28.040 --> 08:29.570 This arranges this nicely. 08:29.900 --> 08:34.710 Och, this is och this is good that we have understood that how to use properly the Google strategy. 08:34.730 --> 08:35.630 Not really a big deal. 08:35.630 --> 08:37.640 We just passed on client ID and secret. 08:37.670 --> 08:38.300 Yes. 08:38.300 --> 08:43.060 I'm pretty sure that a lot of you actually focused on this one that hey, we have a callback URL. 08:43.070 --> 08:44.290 We are not using it. 08:44.300 --> 08:44.900 I will. 08:44.900 --> 08:45.320 I will. 08:45.320 --> 08:50.720 But I just wanted to show you how it works on now since this is a middleware and we are writing this 08:50.720 --> 08:54.980 middleware, some in the strange outskirt file, it shouldn't be like that. 08:54.980 --> 08:58.040 This needs to be imported into the index file as well. 08:58.040 --> 09:03.710 So now we're going to go ahead and go into the index or JS file and further just bring it up here. 09:03.860 --> 09:09.080 Now, one thing I absolutely love about this one is let me show you that I'll go into the index one 09:09.260 --> 09:13.670 and I'll say just up here that I need to require a file. 09:13.670 --> 09:19.490 So I'm going to go ahead and say require and inside the required I'm going to go into passport. 09:21.050 --> 09:22.370 And inside the passport. 09:22.370 --> 09:23.180 I have this passport. 09:23.480 --> 09:24.040 That's it. 09:24.050 --> 09:25.840 I haven't folded it in available. 09:25.850 --> 09:27.200 I have done nothing at all. 09:27.200 --> 09:28.340 I have just required it. 09:28.340 --> 09:29.090 That's it. 09:29.120 --> 09:32.320 Now, as soon as you require it, what happens automatically? 09:32.330 --> 09:38.330 Your code for passport, which is passport use, automatically gets injected into here at the appropriate 09:38.330 --> 09:40.190 place where the middleware should be. 09:40.190 --> 09:41.910 And that is the fantastic thing. 09:41.930 --> 09:44.450 Now let's see what actually it does for me. 09:44.450 --> 09:47.050 Now, my roots should be technically ready. 09:47.060 --> 09:53.390 Now, if I go back up here and hit a reload just up here, if I click on the Google now notice here 09:53.390 --> 09:55.970 it has given me all of this details up here. 09:55.970 --> 09:58.520 It says missing parameters which is redirect. 09:58.550 --> 09:59.990 You re I get you. 09:59.990 --> 10:05.750 I have missed one explicitly, but at least I'm on to a Google authorization page here or Google consent 10:05.750 --> 10:06.320 screen. 10:06.500 --> 10:10.850 So we have figured out one thing that this callback URL is pretty important. 10:10.850 --> 10:12.800 So let's go ahead and give that as well. 10:12.800 --> 10:15.460 So we're going to go ahead and copy this callback URL. 10:15.470 --> 10:16.970 Let's go ahead and copy that. 10:17.240 --> 10:22.130 Now let's go up here into passport JS and let's add that part here as well. 10:22.220 --> 10:24.540 What is the value of this callback URL? 10:24.560 --> 10:29.420 Let's go ahead and check it out because I forgot that honestly, let's go up here. 10:29.420 --> 10:31.790 And this time this is the web client ID. 10:31.790 --> 10:34.250 So my ae all tab. 10:34.250 --> 10:35.300 Yeah, this is the one. 10:37.140 --> 10:39.050 And this is the callback URL. 10:39.060 --> 10:40.770 So let's go ahead and copy this. 10:41.900 --> 10:43.440 And there we go. 10:43.460 --> 10:46.490 So we are going to go ahead and open this one now, Kenya. 10:46.520 --> 10:48.120 Notice one more thing here. 10:48.140 --> 10:50.660 We do have this auth slash Google. 10:50.660 --> 10:54.830 So if you look at this odd geez, we have this login, we have this Google. 10:54.830 --> 11:01.520 So auth slash login, we have auth slash google but there is no such thing as odd slash google slash 11:01.520 --> 11:02.000 callback. 11:02.000 --> 11:02.930 This doesn't exist. 11:02.930 --> 11:04.790 So what is going to happen in this case? 11:04.820 --> 11:05.390 I don't know. 11:05.390 --> 11:06.560 Let's go ahead and check it out. 11:06.860 --> 11:09.770 So I'll go up here and come up here. 11:09.770 --> 11:14.420 Let's hit a reload quickly and I go ahead and say, Hey, Google this time, let's try to log in. 11:14.420 --> 11:20.000 And I have logged in and this time since I was having a callback, it is actually showing me this screen. 11:20.000 --> 11:24.600 Now, if I go ahead and say, Hey, I want to log in with learn code online, I just go ahead and say, 11:24.600 --> 11:28.970 Hey, I cannot get an oath slash Google slash callback so I know what my error is. 11:28.970 --> 11:32.030 There is one root which is missing, but there's a little bit more to it. 11:32.030 --> 11:33.860 Let's go ahead and catch up in the next video.