Hey did everyone this year and this is a really, really long course I totally 100% agree with you.
In fact, it is much more tough to actually record the videos than you just watching the videos.
And by the way, I do understand if you have watched or come up to this section, you have worked really,
really hard.
But I wanted to leave no stone unturned.
I wanted to give you as much best as I could in this entire course.
So this section is going to be all about the social login.
Social login is really common these days and a lot of people ask for pro developers to actually go ahead
and do give them these social logins.
So that's what we are going to talk about in this entirety of the stuff.
Now, in order to actually work with this one, I will show you a demo because it is very important
that first to understand what we are about to build in this, especially the scenario, and I will walk
you through with the inside details of it.
So without further ado, let's go ahead and understand how the social login actually works.
And again, this actually segment, this entire chapter requires a dedicated, separate project.
So we're going to create another one of the project to understand it thoroughly in depth.
So a couple of things that you should know before we move into the demo.
Part of it is really simple.
So we're going to work with the social logins and social logins pretty much work with the same if you
understand once how to implement the Google login in the same way the Facebook login works, their object
might be a little bit different, so it might be inside an array inside be calling a different name
as a string, but one or the other.
The implementation and the strategy followed for Facebook is same as Google is same as for GitHub as
same as for LinkedIn.
So it's pretty much the same.
And I do really believe if you really understand once, then you are going to understand one another
one.
This is one of the most asked feature from the developers these days, and I really believe that you
should spend probably a week or maybe entirely a month in understanding the strategies and the flow
of how this is going to work.
So this is all going so let's go ahead and dive in and try to understand this now first, what we are
not going to do in this course, this is really important.
I believe that some of you, at least some fraction of the people are going to be directly jumping into
this section and skipping all the previous section.
Now, although, yes, you will be able to follow that.
But I believe that you have some kind of previous experience in creating the tokens or setting up the
cookies or something like that.
I will be again reiterating myself and will be comparing the scenario that we have previously faced
that okay, in this point.
Exactly.
We can do something that we have done in the past.
So I will be kind of linking the course in the past as well.
But again, this doesn't mean you cannot follow this section directly.
You can, but I will be linking some of the memories from the past of what we have learned so far.
We won't be using dot envy.
I know this is a good practice to use.
We have thoroughly used it so far in the production.
It was really important, but I want to really focus on the flow of how the social login works so I
won't be creating a dot and I'm making this up in front so that you know that what we are doing this,
we will also not be breaking the application too much.
Yes, we will be breaking it into bit of chunks, but only that much that is important for us to understand
the social flow.
I won't be breaking it that much that we have done in the previous project, like models and controllers
and routes and configs and everything there.
We won't be doing that much, only that one amount of breakage which is absolutely required for the
social login.
And another kind of a drawback for me in this section is I cannot use Postman in order to actually show
you how it works, how it goes on.
I need to take help from the browser and that's where your previous skill of eggs is going to come in.
We won't be doing anything groundbreaking.
We will be just creating a link, make it a little bit beautiful by injecting the bootstrap, but that's
it.
That's pretty much it.
Nothing more, nothing less.
So this is the basics of what we'll be doing now.
First, let's understand the core concept of how social login work and this is throughout every single
platform, no matter what platform they do a lot of time new developers believe that.
I click on to the Google Sign Up page.
That means I click on that, hey, login with the Google and as soon as the Google close up that pop
up where it shows me the email ID and list of all of that, it just disappears.
No, it's not like that.
It's not.
It's a little bit more complex feature than that.
Google directly doesn't send you any of the information like email profile photos.
No, it doesn't send that.
It works just like we work in we have worked in the previous section, that token based authentication.
So this is how it works and this is where the things actually get a little bit of the complex.
And that is why this section is at the very end, because now your brain is absolutely trained to understand
the tokens, the JWT is the cookies and everything.
You get it now.
So let's see that how this two step communication work and the reason this is two step communication
is one of the most clarity of the thing that you can have.
If you don't have the clarity about this two step communication, you will never be able to understand
on your own the passport and how this is all working on because this diagram is the most important one.
After this, things will be absolutely breeze.
So this is your social login box.
It can be a Google box, a Facebook box, a LinkedIn box, whatever you want to say.
I'm just calling this as a social login for this example.
We are going to use just as Google because we need to call something so it's easier to for us.
So this is what happens.
Let's just say you have clicked on, sign up on the Google.
So this is what happens.
The first and foremost, it shows you a consent screen and this is the screen that you create from the
Google panel itself or maybe some other social login panel.
This consent means that user will be popped up and will be asked that Hey, this is the name of the
application and they want to ask following list of the information.
It might be email, profile, photo, whatever is important for you to ask.
Most of the time, email is one of the most compulsory thing that we want user to actually give to us
so that we can store it in our database.
So this is known as consent screen.
Now as soon as you click on the consent screen and you say, okay, I'm allowing this app to use whatever
the information it needs for me, Google actually works similar to our application.
Also, it sends us token and sometimes rather tokens.
It has the access token, the refresh token, then a bunch of other information as well.
Now in some of the applications, especially for something like Google, we receive these access token
and we further down the road can actually do a lot of things with that token because this is a consent
token.
That means if your application has asked the user that, hey, we'll be manipulating your Gmail, we'll
be reading your Gmail or something like that, we can do it.
But in this case, this is not our goal.
So what happens after the application sends us the token?
Are we able to just look into the database and find all the information?
No, we cannot actually make the query to the Google itself.
It Google has their own database.
We don't have access to that.
So how does it happen?
What we are going to do with this token?
To be honest, we cannot do much with this token.
So that is why the next step comes in that we ask for the information.
Based on this token, we again send this token back to the Google and say, Hey, Google, please give
me this information.
So next time, once you have received the token, then Google gives you the information.
Whatever you asked for, you can ask for a profile picture, you can ask for email, you can ask a lot
more.
I will show you how to build that consent screen as well later on in the course in this section only.
But this is the two way communication.
Once that information has been received by our application, then we either register the user or log
in the user depends on how the flow of your application is working.
The only advantage is Google has already verified the user, so we don't need to further verify it and
we are looking for the email now.
From here onwards we treat the application as exactly same as we have done in our t shirt store application.
We have received the email.
We we don't need password in this case, so we are not going to get that.
So based on just this email, we actually go ahead and register the user and you know, the flow after
that, after registering or logging the user, we create the cookie or we create the token, we send
it and move on with that.
But I will go a little bit further beyond that.
What we have seen and this is all it works, this is how you log in into your application.
This is how all it works.
So this is all what we are going to do.
But I'll follow a little bit of the more concept we have worked through with the cookies as well.
We have worked through the basics of that, that how somebody can actually pass us and be error tokens
as well.
But I'll also walk you through with the session cookies as well.
This is also a great concept to work on.
With that it's a little bit easier, but it has its own drawbacks and all whole things.
I'll talk about more on that now.
Let me give you the demo of the application that will be building that will help you to understand the
entirety of the thing.
Now, this entire two way request happens so far is that it gives us a very little chance to understand
this one.
That's why this application is designed in this way.
So notice here I go up here and it says You are at a home, so I am able to access this home page.
If I go ahead and click on the log out, that means now I'm logged out from the home.
Yes, I know it's not a beautiful home, but this is it.
Now, if I try to go home, it doesn't allow me that.
So we are restricting the routes as well.
That's great.
We have already seen the middle where there is no such big deal there.
Now if I click on this Google, it actually clicks in and ask me that, hey, this is the content screen
that, hey, this application is asking you for the following information.
It says, Share your name, email, address, language, preference and the profile picture with the
test app.
Yes, that's the name of our app.
As soon as I click on this application.
Now, this application is designed to see that what kind of information you get that.
But the most important information that you should look for is at the URL.
So in the URL it says callback question mark code equals to.
So at the first request it actually gives me the entirety of the code.
So that was the first request that we saw.
So this was the information that Google sent me, the token.
Now as soon as Google send me the token, I have fired up another method which actually, based on this
token, ask for further request and that's what it is coming back.
So this all ID and the name and the Google ID and this email that is all coming up from the Google itself.
So I know this happened really fast, but that's the way notice here in the URL callback, it gives
me the ID.
So this code is actually the token itself and I can further down the road I can go ahead and now access
all these things.
So this is the thing like protecting the router, designing a middleware for that.
These are all things we have done in the past.
So shouldn't be a big deal.
So let me go ahead and click on that log out.
So this is the basics of application that we'll be designing throughout in this section, but we are
going to do it absolutely slowly so that you understand each and every step how to apply that so that
you can actually repeat that in any application.
So that's for this video.
Let's.
Go ahead and catch up in the next one.