WEBVTT 00:03.880 --> 00:05.440 Hey, did everyone at Asia. 00:05.440 --> 00:10.570 And let's go ahead and further continue our journey of the social logins, especially passport checks. 00:10.780 --> 00:15.110 So one thing that I would like to bring your a big attention is onto this code. 00:15.130 --> 00:18.700 So when I say auth Google callback, there is a question mark. 00:18.700 --> 00:20.530 Code equals when and there is a big code. 00:20.530 --> 00:25.270 This is an access code that Google is giving to us that, hey, feel free to ask me more information 00:25.270 --> 00:26.500 if you want to. 00:26.530 --> 00:31.720 And in fact, this is the entirety of the middleware thing that actually Passport does for us. 00:31.720 --> 00:33.130 So we're going to talk about that. 00:33.130 --> 00:35.560 Let's go back first and fix a couple of issues. 00:35.950 --> 00:39.130 We did that, but these are not good practices that we are doing up here. 00:39.160 --> 00:40.930 The first thing is require passport. 00:40.930 --> 00:43.390 Yes, I've seen in many code that actually works like this. 00:43.390 --> 00:44.560 So this is also fine. 00:44.560 --> 00:48.700 So we're going to go ahead and call this one into available, although we don't need to hold this into 00:48.700 --> 00:50.080 available if it just required. 00:50.080 --> 00:51.400 That said, it does the job. 00:51.400 --> 00:55.810 So we're going to call this one as simply passport config. 00:55.810 --> 00:56.590 And there we go. 00:56.620 --> 00:58.750 We don't need to use this variable anywhere. 00:58.810 --> 01:00.280 It just works right out of the box. 01:00.280 --> 01:01.030 There we go. 01:01.180 --> 01:06.910 But also, once you are using this app to use wherever you are actually rendering all these parts and 01:06.910 --> 01:09.400 everything, let's go ahead and use this one. 01:09.400 --> 01:10.900 So I'm going to go ahead and copy this. 01:10.900 --> 01:15.370 And just after MongoDB is connected, I would like to use the passport here as well. 01:15.370 --> 01:17.200 So let's bring in the passport first. 01:17.200 --> 01:23.860 So after the passport configuration, let's go ahead and say const pass port and that passport is going 01:23.860 --> 01:25.420 to come from require. 01:25.930 --> 01:28.900 And then we go ahead and say passport. 01:29.140 --> 01:34.120 Now this is not going to make much difference, but this is a good practice that actually they actually 01:34.120 --> 01:35.680 say that, hey, you should be doing this. 01:35.680 --> 01:40.090 So once we are doing this inside this middleware that we just copied, we're going to go ahead and say 01:40.090 --> 01:43.450 passport, dot, initialize, and there we go. 01:43.450 --> 01:45.310 So this is a proper way, right way. 01:45.310 --> 01:47.710 And you don't need to pass on this config and everything. 01:47.710 --> 01:48.820 You don't need to do that. 01:48.820 --> 01:50.380 It actually works right on the box. 01:50.410 --> 01:52.330 It is not going to make any difference. 01:52.330 --> 01:57.910 This is a better proper way that is mentioned in the documentation and that's why I'm showing you now 01:57.910 --> 02:00.700 coming back onto the part, the same place where we were. 02:00.700 --> 02:02.710 So Google has given us this code. 02:02.710 --> 02:07.330 And now from based on this code, I actually have to ask for some of the more data. 02:07.360 --> 02:10.180 Now, let's go ahead and see this strategy a little bit more. 02:10.210 --> 02:13.030 Now, can you see this method up here a little bit more? 02:13.060 --> 02:15.670 This is a method which runs into two parts. 02:15.670 --> 02:19.990 I remember I told you the most important thing is this two way communication that happens. 02:19.990 --> 02:21.970 So first, communication already has happened. 02:21.970 --> 02:27.640 It has sent the token and now we need to ask for information and that is exactly why this is being defined. 02:27.640 --> 02:32.230 So if I go into this here, this first thing automatically says, Hey, I'll ask for the token. 02:32.230 --> 02:37.090 And the second part, this function actually brings up all that information and it says here, access 02:37.090 --> 02:40.900 token refresh, token profile and a callback. 02:41.350 --> 02:47.320 This is a little bit misleading as a name of callback, not misleading, but we have been using next 02:47.320 --> 02:50.050 instead of the callback, which I think makes more sense for me. 02:50.050 --> 02:52.570 So let's go ahead and work on further down the road. 02:52.570 --> 02:56.350 So inside this passport is where we have been working. 02:56.350 --> 02:58.030 Let's go ahead and just paste it down. 02:58.030 --> 03:00.070 All the things up here and sort of the callback. 03:00.070 --> 03:04.390 We're going to go ahead and call this one next since we have been calling it next for a while now, 03:04.390 --> 03:08.410 once we have this one, we all we want to do is simply have a whole lot of console.log. 03:08.410 --> 03:09.970 So let's go ahead and see of that. 03:10.060 --> 03:14.140 And basically what I'm interested in is one single console.log. 03:14.140 --> 03:23.830 So I'm going to go ahead and say console.log and let's go to say my profile and let's go ahead and dump 03:23.830 --> 03:26.050 it down all the profile that is coming up in. 03:26.050 --> 03:27.850 So we're going to go ahead and say profile. 03:27.850 --> 03:30.670 And you might be saying, hey, we're also bringing in the email. 03:30.670 --> 03:32.950 So do we need to say profile, comma, email? 03:32.950 --> 03:34.030 No, you don't need to. 03:34.030 --> 03:36.850 The entirety of the profile object actually consist of everything. 03:36.850 --> 03:38.740 And that is why I'm writing this one up here. 03:38.980 --> 03:40.000 So this is all good. 03:40.000 --> 03:42.610 We do have access token and refresh token as well. 03:42.640 --> 03:47.290 I won't be talking about that much because that would make us another one chapter long. 03:47.290 --> 03:49.270 So let's go ahead and keep it this way only. 03:49.450 --> 03:50.740 Let's go ahead and save this one. 03:50.740 --> 03:52.090 So this is all what we got. 03:52.180 --> 03:57.700 But the bigger question in front of us is we don't have that root, which we just talked about. 03:57.700 --> 04:01.840 So we have this get slash Google, but we don't have this get slash callbacks. 04:01.840 --> 04:04.000 So I'm going to go ahead and make a copy of this. 04:04.420 --> 04:07.090 And in fact, let's go ahead and cut it out. 04:07.090 --> 04:08.950 We'd love to place it at the bottom. 04:08.950 --> 04:10.240 No big reason. 04:10.240 --> 04:11.650 Just wanted to do it. 04:11.980 --> 04:12.340 Okay. 04:12.370 --> 04:13.450 So now we have this one. 04:13.450 --> 04:16.360 What we're going to do first, let's handle this one. 04:16.360 --> 04:19.360 So we're going to say auth slash, Google slash callback. 04:19.360 --> 04:24.010 And now I hope you can pretty much understand that it is not compulsory to call it as a callback, you 04:24.010 --> 04:27.310 can call it as a dash, you can call it as Superman, whatever you like. 04:27.580 --> 04:28.090 Okay. 04:28.390 --> 04:34.660 Now, once this is being done and we are having all these requests, let's go ahead and use this send. 04:34.840 --> 04:37.660 Now, I told you again, what is Passport? 04:37.660 --> 04:39.130 Passport is a middleware. 04:39.130 --> 04:45.430 So at the time when the callback is coming in here, also passport act as a middleware, you will find 04:45.430 --> 04:48.970 a little bit of the hint up here that you can use the passport authenticate. 04:48.970 --> 04:53.920 And when you have this passport and the callback notice, here they are saying, hey, this is where 04:53.920 --> 04:55.750 you can say passport authenticate. 04:55.750 --> 04:59.050 And you have to mention that, hey, we are using a Google Authenticator. 04:59.050 --> 05:03.370 We can also mention a failure redirect in case you want to do that, I won't be doing it. 05:03.480 --> 05:05.340 As of now, but you can go ahead and do that. 05:05.340 --> 05:07.650 This is all what we need and what we have to do. 05:07.710 --> 05:09.810 So let's go ahead and inject another middleware. 05:09.810 --> 05:15.150 So we're going to go ahead and say, Hey, passport, please go ahead and authenticate and please use 05:15.150 --> 05:16.980 for authentication Google. 05:17.160 --> 05:22.020 Now, this is one of the most important thing which is abstracted, a lot abstracted. 05:22.020 --> 05:23.340 So let me go ahead and do that. 05:23.550 --> 05:29.490 In fact, here I'm going to go ahead and say red dots and I'll just remove this red dots and let's just 05:29.490 --> 05:33.210 keep it as of now and let's call it as simply Google callback. 05:33.210 --> 05:34.380 That would be making sense. 05:34.380 --> 05:36.080 Google callback. 05:36.820 --> 05:38.760 Okay, now this is all good. 05:38.760 --> 05:42.900 Let's go ahead and move back on to our application and see how much progress we have made. 05:42.900 --> 05:46.830 So let's go up here, back onto this one up here and there we go. 05:46.830 --> 05:49.650 So it is saying slash a, there we go. 05:49.650 --> 05:51.660 So this is our application, a reload. 05:51.660 --> 05:53.160 Let's go into the login page. 05:53.160 --> 05:56.010 Now I say Google, this will give me a page. 05:56.010 --> 05:58.380 I'll log in with chat, learn code online. 05:58.380 --> 05:59.700 I click on that. 05:59.790 --> 06:02.040 It is taking some time now. 06:02.040 --> 06:04.530 Why is it taking this much of time now? 06:04.530 --> 06:08.700 This is taking this much of time because I guess we have missed something really important. 06:08.700 --> 06:10.650 Let me go ahead and quickly check that. 06:11.010 --> 06:11.290 Okay. 06:11.310 --> 06:12.360 Just found it up here. 06:12.360 --> 06:12.990 So nothing. 06:12.990 --> 06:14.040 We haven't missed anything. 06:14.040 --> 06:15.510 Let me just walk you through with more. 06:15.600 --> 06:18.150 So this screen is still hanging a little bit. 06:18.150 --> 06:19.860 It says, hey, token error, bad request. 06:19.860 --> 06:20.880 We will work on that. 06:20.880 --> 06:22.050 Nothing of a big deal. 06:22.080 --> 06:23.880 The simple classic error of the next. 06:23.880 --> 06:25.680 We forgot to handle that, but nothing to be worried. 06:25.680 --> 06:27.990 Let's go ahead and first analyze what is the response. 06:28.050 --> 06:33.480 So in the password is I told you that we have to use this console.log and we are dumping down the entirety 06:33.480 --> 06:34.470 of the profile. 06:34.470 --> 06:37.710 So this is my profile object that came in for the very first time. 06:37.710 --> 06:41.220 So it says my profile and then we have got all of this information. 06:41.220 --> 06:44.910 So we got the ID, which is a Google ID, it is not Mongoose ID. 06:44.940 --> 06:46.650 Then we have got the display name. 06:46.650 --> 06:48.030 Nice, we have got name. 06:48.030 --> 06:54.060 So all of my family name, given name, all these are there is also a emails and there can be more and 06:54.060 --> 06:56.040 in here you can extract the value of the email. 06:56.040 --> 07:01.470 So in the array the first object and we can find the value of here, you can also find the photo here 07:01.470 --> 07:04.200 or you can find some of the JSON data or raw data. 07:04.200 --> 07:08.460 So inside the underscore JSON object, I can go ahead and find this email. 07:08.460 --> 07:14.250 So however you want to use that, Google is pretty much always consistent and on the point in serving 07:14.250 --> 07:15.210 the response here. 07:15.210 --> 07:17.970 So you'll always get the exact same data in this response. 07:18.630 --> 07:22.080 But the bigger question is, hey, why did this give the bad request? 07:22.380 --> 07:23.460 That is a valid point. 07:23.460 --> 07:24.990 This is a good question. 07:24.990 --> 07:30.060 And just after coming up here at the very first look, I realized that we haven't handled this next. 07:30.060 --> 07:35.160 The job of this next is to hand on Passover the request that, hey, I'm done with the middleware. 07:35.160 --> 07:37.470 Passport is a middleware, I'm done with the middleware. 07:37.500 --> 07:39.300 Now go ahead and do whatever you want to do. 07:39.300 --> 07:41.790 So I'm going to go ahead and come up here and I'll say, Hey, next. 07:41.790 --> 07:42.540 And there we go. 07:42.540 --> 07:47.610 Just that said, let's go ahead and try it out one more time and see if this is working or not. 07:47.610 --> 07:49.230 Let's go back up here. 07:50.220 --> 07:51.660 Hit a refresh and there we go. 07:51.690 --> 07:54.600 Let's try into the login Google and there we go. 07:54.600 --> 07:56.130 Login again, one here. 07:56.310 --> 07:59.210 And this time we say unauthorized OC. 07:59.220 --> 08:01.590 Why this is calling it as Unauthorized OC. 08:01.590 --> 08:04.440 We'll get back to that because we haven't actually worked on anything. 08:04.440 --> 08:08.640 We haven't done anything and a whole bunch of other things will come back onto this part. 08:08.670 --> 08:13.500 But this is all what we got that now we are able to extract all this information and this is all going 08:13.500 --> 08:16.680 in and actually we are able to process that request as well. 08:16.800 --> 08:21.990 Now coming back onto this auth part, now we have to take down a little bit onto this Google and the 08:21.990 --> 08:26.490 callback and we have to kind of polish it a little bit more so that we don't get that unauthorized, 08:26.490 --> 08:28.980 rather we have a better request or something like that. 08:28.980 --> 08:30.870 Let's go ahead and catch up in the next video.