WEBVTT 00:03.950 --> 00:11.060 Hey did everyone this year and this is a really, really long course I totally 100% agree with you. 00:11.060 --> 00:15.710 In fact, it is much more tough to actually record the videos than you just watching the videos. 00:15.710 --> 00:20.810 And by the way, I do understand if you have watched or come up to this section, you have worked really, 00:20.810 --> 00:21.410 really hard. 00:21.410 --> 00:23.720 But I wanted to leave no stone unturned. 00:23.720 --> 00:27.500 I wanted to give you as much best as I could in this entire course. 00:27.500 --> 00:30.440 So this section is going to be all about the social login. 00:30.440 --> 00:35.360 Social login is really common these days and a lot of people ask for pro developers to actually go ahead 00:35.360 --> 00:37.520 and do give them these social logins. 00:37.520 --> 00:41.030 So that's what we are going to talk about in this entirety of the stuff. 00:41.150 --> 00:45.800 Now, in order to actually work with this one, I will show you a demo because it is very important 00:45.800 --> 00:50.180 that first to understand what we are about to build in this, especially the scenario, and I will walk 00:50.180 --> 00:52.040 you through with the inside details of it. 00:52.070 --> 00:56.570 So without further ado, let's go ahead and understand how the social login actually works. 00:56.570 --> 01:01.490 And again, this actually segment, this entire chapter requires a dedicated, separate project. 01:01.490 --> 01:04.910 So we're going to create another one of the project to understand it thoroughly in depth. 01:04.910 --> 01:08.300 So a couple of things that you should know before we move into the demo. 01:08.300 --> 01:10.130 Part of it is really simple. 01:10.130 --> 01:14.840 So we're going to work with the social logins and social logins pretty much work with the same if you 01:14.840 --> 01:19.850 understand once how to implement the Google login in the same way the Facebook login works, their object 01:19.850 --> 01:24.200 might be a little bit different, so it might be inside an array inside be calling a different name 01:24.200 --> 01:26.300 as a string, but one or the other. 01:26.300 --> 01:31.610 The implementation and the strategy followed for Facebook is same as Google is same as for GitHub as 01:31.610 --> 01:32.570 same as for LinkedIn. 01:32.570 --> 01:33.860 So it's pretty much the same. 01:33.860 --> 01:39.230 And I do really believe if you really understand once, then you are going to understand one another 01:39.230 --> 01:39.710 one. 01:39.710 --> 01:44.330 This is one of the most asked feature from the developers these days, and I really believe that you 01:44.330 --> 01:49.400 should spend probably a week or maybe entirely a month in understanding the strategies and the flow 01:49.400 --> 01:51.050 of how this is going to work. 01:51.050 --> 01:57.170 So this is all going so let's go ahead and dive in and try to understand this now first, what we are 01:57.170 --> 01:59.840 not going to do in this course, this is really important. 01:59.870 --> 02:04.910 I believe that some of you, at least some fraction of the people are going to be directly jumping into 02:04.910 --> 02:07.460 this section and skipping all the previous section. 02:07.460 --> 02:10.070 Now, although, yes, you will be able to follow that. 02:10.070 --> 02:14.600 But I believe that you have some kind of previous experience in creating the tokens or setting up the 02:14.600 --> 02:16.100 cookies or something like that. 02:16.220 --> 02:21.830 I will be again reiterating myself and will be comparing the scenario that we have previously faced 02:21.860 --> 02:23.090 that okay, in this point. 02:23.090 --> 02:23.510 Exactly. 02:23.510 --> 02:25.160 We can do something that we have done in the past. 02:25.160 --> 02:28.130 So I will be kind of linking the course in the past as well. 02:28.130 --> 02:30.710 But again, this doesn't mean you cannot follow this section directly. 02:30.710 --> 02:35.540 You can, but I will be linking some of the memories from the past of what we have learned so far. 02:35.570 --> 02:37.340 We won't be using dot envy. 02:37.340 --> 02:38.990 I know this is a good practice to use. 02:38.990 --> 02:41.150 We have thoroughly used it so far in the production. 02:41.150 --> 02:46.370 It was really important, but I want to really focus on the flow of how the social login works so I 02:46.370 --> 02:51.290 won't be creating a dot and I'm making this up in front so that you know that what we are doing this, 02:51.590 --> 02:54.350 we will also not be breaking the application too much. 02:54.350 --> 02:59.990 Yes, we will be breaking it into bit of chunks, but only that much that is important for us to understand 02:59.990 --> 03:00.860 the social flow. 03:00.860 --> 03:05.930 I won't be breaking it that much that we have done in the previous project, like models and controllers 03:05.930 --> 03:08.960 and routes and configs and everything there. 03:08.960 --> 03:14.030 We won't be doing that much, only that one amount of breakage which is absolutely required for the 03:14.030 --> 03:14.990 social login. 03:15.260 --> 03:22.100 And another kind of a drawback for me in this section is I cannot use Postman in order to actually show 03:22.100 --> 03:23.900 you how it works, how it goes on. 03:23.900 --> 03:29.090 I need to take help from the browser and that's where your previous skill of eggs is going to come in. 03:29.090 --> 03:30.680 We won't be doing anything groundbreaking. 03:30.680 --> 03:35.030 We will be just creating a link, make it a little bit beautiful by injecting the bootstrap, but that's 03:35.030 --> 03:35.150 it. 03:35.150 --> 03:35.900 That's pretty much it. 03:35.900 --> 03:37.310 Nothing more, nothing less. 03:37.310 --> 03:40.340 So this is the basics of what we'll be doing now. 03:40.340 --> 03:45.440 First, let's understand the core concept of how social login work and this is throughout every single 03:45.440 --> 03:50.360 platform, no matter what platform they do a lot of time new developers believe that. 03:50.360 --> 03:52.400 I click on to the Google Sign Up page. 03:52.400 --> 03:56.990 That means I click on that, hey, login with the Google and as soon as the Google close up that pop 03:56.990 --> 04:01.100 up where it shows me the email ID and list of all of that, it just disappears. 04:01.100 --> 04:02.420 No, it's not like that. 04:02.420 --> 04:02.870 It's not. 04:02.870 --> 04:05.210 It's a little bit more complex feature than that. 04:05.270 --> 04:09.590 Google directly doesn't send you any of the information like email profile photos. 04:09.590 --> 04:10.850 No, it doesn't send that. 04:10.850 --> 04:15.950 It works just like we work in we have worked in the previous section, that token based authentication. 04:15.950 --> 04:20.030 So this is how it works and this is where the things actually get a little bit of the complex. 04:20.030 --> 04:25.280 And that is why this section is at the very end, because now your brain is absolutely trained to understand 04:25.280 --> 04:28.130 the tokens, the JWT is the cookies and everything. 04:28.130 --> 04:29.090 You get it now. 04:29.210 --> 04:34.250 So let's see that how this two step communication work and the reason this is two step communication 04:34.250 --> 04:37.340 is one of the most clarity of the thing that you can have. 04:37.340 --> 04:41.690 If you don't have the clarity about this two step communication, you will never be able to understand 04:41.690 --> 04:46.490 on your own the passport and how this is all working on because this diagram is the most important one. 04:46.490 --> 04:48.710 After this, things will be absolutely breeze. 04:48.860 --> 04:50.720 So this is your social login box. 04:50.720 --> 04:56.210 It can be a Google box, a Facebook box, a LinkedIn box, whatever you want to say. 04:56.210 --> 04:59.330 I'm just calling this as a social login for this example. 04:59.330 --> 05:03.470 We are going to use just as Google because we need to call something so it's easier to for us. 05:04.360 --> 05:06.090 So this is what happens. 05:06.100 --> 05:08.110 Let's just say you have clicked on, sign up on the Google. 05:08.110 --> 05:09.190 So this is what happens. 05:09.190 --> 05:14.140 The first and foremost, it shows you a consent screen and this is the screen that you create from the 05:14.140 --> 05:17.110 Google panel itself or maybe some other social login panel. 05:17.260 --> 05:22.150 This consent means that user will be popped up and will be asked that Hey, this is the name of the 05:22.150 --> 05:26.230 application and they want to ask following list of the information. 05:26.230 --> 05:30.490 It might be email, profile, photo, whatever is important for you to ask. 05:30.490 --> 05:34.840 Most of the time, email is one of the most compulsory thing that we want user to actually give to us 05:34.840 --> 05:36.760 so that we can store it in our database. 05:36.760 --> 05:38.920 So this is known as consent screen. 05:38.920 --> 05:43.960 Now as soon as you click on the consent screen and you say, okay, I'm allowing this app to use whatever 05:43.960 --> 05:48.250 the information it needs for me, Google actually works similar to our application. 05:48.250 --> 05:51.220 Also, it sends us token and sometimes rather tokens. 05:51.220 --> 05:55.750 It has the access token, the refresh token, then a bunch of other information as well. 05:55.780 --> 06:00.820 Now in some of the applications, especially for something like Google, we receive these access token 06:00.820 --> 06:05.530 and we further down the road can actually do a lot of things with that token because this is a consent 06:05.530 --> 06:05.950 token. 06:05.950 --> 06:11.140 That means if your application has asked the user that, hey, we'll be manipulating your Gmail, we'll 06:11.140 --> 06:13.600 be reading your Gmail or something like that, we can do it. 06:13.600 --> 06:15.580 But in this case, this is not our goal. 06:15.580 --> 06:18.370 So what happens after the application sends us the token? 06:18.370 --> 06:21.790 Are we able to just look into the database and find all the information? 06:21.790 --> 06:24.520 No, we cannot actually make the query to the Google itself. 06:24.550 --> 06:26.260 It Google has their own database. 06:26.260 --> 06:27.520 We don't have access to that. 06:27.520 --> 06:28.720 So how does it happen? 06:28.720 --> 06:30.490 What we are going to do with this token? 06:30.790 --> 06:32.890 To be honest, we cannot do much with this token. 06:32.890 --> 06:36.580 So that is why the next step comes in that we ask for the information. 06:36.580 --> 06:41.740 Based on this token, we again send this token back to the Google and say, Hey, Google, please give 06:41.740 --> 06:42.670 me this information. 06:42.670 --> 06:46.180 So next time, once you have received the token, then Google gives you the information. 06:46.180 --> 06:51.640 Whatever you asked for, you can ask for a profile picture, you can ask for email, you can ask a lot 06:51.640 --> 06:51.910 more. 06:51.910 --> 06:56.950 I will show you how to build that consent screen as well later on in the course in this section only. 06:56.950 --> 06:58.900 But this is the two way communication. 06:59.200 --> 07:04.000 Once that information has been received by our application, then we either register the user or log 07:04.000 --> 07:07.630 in the user depends on how the flow of your application is working. 07:07.630 --> 07:12.490 The only advantage is Google has already verified the user, so we don't need to further verify it and 07:12.490 --> 07:14.080 we are looking for the email now. 07:14.080 --> 07:20.050 From here onwards we treat the application as exactly same as we have done in our t shirt store application. 07:20.050 --> 07:21.340 We have received the email. 07:21.340 --> 07:24.910 We we don't need password in this case, so we are not going to get that. 07:24.910 --> 07:30.130 So based on just this email, we actually go ahead and register the user and you know, the flow after 07:30.130 --> 07:34.360 that, after registering or logging the user, we create the cookie or we create the token, we send 07:34.360 --> 07:35.710 it and move on with that. 07:35.710 --> 07:38.200 But I will go a little bit further beyond that. 07:38.200 --> 07:42.250 What we have seen and this is all it works, this is how you log in into your application. 07:42.250 --> 07:43.570 This is how all it works. 07:43.570 --> 07:45.190 So this is all what we are going to do. 07:45.190 --> 07:49.720 But I'll follow a little bit of the more concept we have worked through with the cookies as well. 07:49.750 --> 07:54.310 We have worked through the basics of that, that how somebody can actually pass us and be error tokens 07:54.310 --> 07:54.760 as well. 07:54.760 --> 07:57.250 But I'll also walk you through with the session cookies as well. 07:57.250 --> 07:59.110 This is also a great concept to work on. 07:59.110 --> 08:03.340 With that it's a little bit easier, but it has its own drawbacks and all whole things. 08:03.340 --> 08:05.440 I'll talk about more on that now. 08:05.440 --> 08:09.160 Let me give you the demo of the application that will be building that will help you to understand the 08:09.250 --> 08:10.390 entirety of the thing. 08:10.390 --> 08:15.130 Now, this entire two way request happens so far is that it gives us a very little chance to understand 08:15.130 --> 08:15.460 this one. 08:15.460 --> 08:18.130 That's why this application is designed in this way. 08:18.130 --> 08:23.230 So notice here I go up here and it says You are at a home, so I am able to access this home page. 08:23.230 --> 08:26.890 If I go ahead and click on the log out, that means now I'm logged out from the home. 08:26.890 --> 08:29.110 Yes, I know it's not a beautiful home, but this is it. 08:29.200 --> 08:31.720 Now, if I try to go home, it doesn't allow me that. 08:31.720 --> 08:33.520 So we are restricting the routes as well. 08:33.850 --> 08:34.330 That's great. 08:34.330 --> 08:37.090 We have already seen the middle where there is no such big deal there. 08:37.240 --> 08:42.520 Now if I click on this Google, it actually clicks in and ask me that, hey, this is the content screen 08:42.520 --> 08:45.730 that, hey, this application is asking you for the following information. 08:46.060 --> 08:50.170 It says, Share your name, email, address, language, preference and the profile picture with the 08:50.170 --> 08:50.740 test app. 08:50.740 --> 08:52.180 Yes, that's the name of our app. 08:52.210 --> 08:54.580 As soon as I click on this application. 08:54.580 --> 08:58.750 Now, this application is designed to see that what kind of information you get that. 08:58.750 --> 09:02.500 But the most important information that you should look for is at the URL. 09:02.500 --> 09:05.950 So in the URL it says callback question mark code equals to. 09:05.950 --> 09:09.460 So at the first request it actually gives me the entirety of the code. 09:09.460 --> 09:11.650 So that was the first request that we saw. 09:11.770 --> 09:14.560 So this was the information that Google sent me, the token. 09:14.560 --> 09:19.300 Now as soon as Google send me the token, I have fired up another method which actually, based on this 09:19.300 --> 09:22.570 token, ask for further request and that's what it is coming back. 09:22.570 --> 09:28.420 So this all ID and the name and the Google ID and this email that is all coming up from the Google itself. 09:28.420 --> 09:32.890 So I know this happened really fast, but that's the way notice here in the URL callback, it gives 09:32.890 --> 09:33.580 me the ID. 09:33.580 --> 09:39.520 So this code is actually the token itself and I can further down the road I can go ahead and now access 09:39.520 --> 09:40.090 all these things. 09:40.090 --> 09:44.080 So this is the thing like protecting the router, designing a middleware for that. 09:44.080 --> 09:45.970 These are all things we have done in the past. 09:45.970 --> 09:47.200 So shouldn't be a big deal. 09:47.200 --> 09:49.720 So let me go ahead and click on that log out. 09:50.020 --> 09:54.280 So this is the basics of application that we'll be designing throughout in this section, but we are 09:54.280 --> 09:59.110 going to do it absolutely slowly so that you understand each and every step how to apply that so that 09:59.110 --> 10:01.420 you can actually repeat that in any application. 10:01.420 --> 10:03.040 So that's for this video. 10:03.040 --> 10:03.280 Let's. 10:03.320 --> 10:05.000 Go ahead and catch up in the next one.