Hey, did everyone at Asia.
And let's go ahead and further continue our journey of the social logins, especially passport checks.
So one thing that I would like to bring your a big attention is onto this code.
So when I say auth Google callback, there is a question mark.
Code equals when and there is a big code.
This is an access code that Google is giving to us that, hey, feel free to ask me more information
if you want to.
And in fact, this is the entirety of the middleware thing that actually Passport does for us.
So we're going to talk about that.
Let's go back first and fix a couple of issues.
We did that, but these are not good practices that we are doing up here.
The first thing is require passport.
Yes, I've seen in many code that actually works like this.
So this is also fine.
So we're going to go ahead and call this one into available, although we don't need to hold this into
available if it just required.
That said, it does the job.
So we're going to call this one as simply passport config.
And there we go.
We don't need to use this variable anywhere.
It just works right out of the box.
There we go.
But also, once you are using this app to use wherever you are actually rendering all these parts and
everything, let's go ahead and use this one.
So I'm going to go ahead and copy this.
And just after MongoDB is connected, I would like to use the passport here as well.
So let's bring in the passport first.
So after the passport configuration, let's go ahead and say const pass port and that passport is going
to come from require.
And then we go ahead and say passport.
Now this is not going to make much difference, but this is a good practice that actually they actually
say that, hey, you should be doing this.
So once we are doing this inside this middleware that we just copied, we're going to go ahead and say
passport, dot, initialize, and there we go.
So this is a proper way, right way.
And you don't need to pass on this config and everything.
You don't need to do that.
It actually works right on the box.
It is not going to make any difference.
This is a better proper way that is mentioned in the documentation and that's why I'm showing you now
coming back onto the part, the same place where we were.
So Google has given us this code.
And now from based on this code, I actually have to ask for some of the more data.
Now, let's go ahead and see this strategy a little bit more.
Now, can you see this method up here a little bit more?
This is a method which runs into two parts.
I remember I told you the most important thing is this two way communication that happens.
So first, communication already has happened.
It has sent the token and now we need to ask for information and that is exactly why this is being defined.
So if I go into this here, this first thing automatically says, Hey, I'll ask for the token.
And the second part, this function actually brings up all that information and it says here, access
token refresh, token profile and a callback.
This is a little bit misleading as a name of callback, not misleading, but we have been using next
instead of the callback, which I think makes more sense for me.
So let's go ahead and work on further down the road.
So inside this passport is where we have been working.
Let's go ahead and just paste it down.
All the things up here and sort of the callback.
We're going to go ahead and call this one next since we have been calling it next for a while now,
once we have this one, we all we want to do is simply have a whole lot of console.log.
So let's go ahead and see of that.
And basically what I'm interested in is one single console.log.
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
it down all the profile that is coming up in.
So we're going to go ahead and say profile.
And you might be saying, hey, we're also bringing in the email.
So do we need to say profile, comma, email?
No, you don't need to.
The entirety of the profile object actually consist of everything.
And that is why I'm writing this one up here.
So this is all good.
We do have access token and refresh token as well.
I won't be talking about that much because that would make us another one chapter long.
So let's go ahead and keep it this way only.
Let's go ahead and save this one.
So this is all what we got.
But the bigger question in front of us is we don't have that root, which we just talked about.
So we have this get slash Google, but we don't have this get slash callbacks.
So I'm going to go ahead and make a copy of this.
And in fact, let's go ahead and cut it out.
We'd love to place it at the bottom.
No big reason.
Just wanted to do it.
Okay.
So now we have this one.
What we're going to do first, let's handle this one.
So we're going to say auth slash, Google slash callback.
And now I hope you can pretty much understand that it is not compulsory to call it as a callback, you
can call it as a dash, you can call it as Superman, whatever you like.
Okay.
Now, once this is being done and we are having all these requests, let's go ahead and use this send.
Now, I told you again, what is Passport?
Passport is a middleware.
So at the time when the callback is coming in here, also passport act as a middleware, you will find
a little bit of the hint up here that you can use the passport authenticate.
And when you have this passport and the callback notice, here they are saying, hey, this is where
you can say passport authenticate.
And you have to mention that, hey, we are using a Google Authenticator.
We can also mention a failure redirect in case you want to do that, I won't be doing it.
As of now, but you can go ahead and do that.
This is all what we need and what we have to do.
So let's go ahead and inject another middleware.
So we're going to go ahead and say, Hey, passport, please go ahead and authenticate and please use
for authentication Google.
Now, this is one of the most important thing which is abstracted, a lot abstracted.
So let me go ahead and do that.
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
keep it as of now and let's call it as simply Google callback.
That would be making sense.
Google callback.
Okay, now this is all good.
Let's go ahead and move back on to our application and see how much progress we have made.
So let's go up here, back onto this one up here and there we go.
So it is saying slash a, there we go.
So this is our application, a reload.
Let's go into the login page.
Now I say Google, this will give me a page.
I'll log in with chat, learn code online.
I click on that.
It is taking some time now.
Why is it taking this much of time now?
This is taking this much of time because I guess we have missed something really important.
Let me go ahead and quickly check that.
Okay.
Just found it up here.
So nothing.
We haven't missed anything.
Let me just walk you through with more.
So this screen is still hanging a little bit.
It says, hey, token error, bad request.
We will work on that.
Nothing of a big deal.
The simple classic error of the next.
We forgot to handle that, but nothing to be worried.
Let's go ahead and first analyze what is the response.
So in the password is I told you that we have to use this console.log and we are dumping down the entirety
of the profile.
So this is my profile object that came in for the very first time.
So it says my profile and then we have got all of this information.
So we got the ID, which is a Google ID, it is not Mongoose ID.
Then we have got the display name.
Nice, we have got name.
So all of my family name, given name, all these are there is also a emails and there can be more and
in here you can extract the value of the email.
So in the array the first object and we can find the value of here, you can also find the photo here
or you can find some of the JSON data or raw data.
So inside the underscore JSON object, I can go ahead and find this email.
So however you want to use that, Google is pretty much always consistent and on the point in serving
the response here.
So you'll always get the exact same data in this response.
But the bigger question is, hey, why did this give the bad request?
That is a valid point.
This is a good question.
And just after coming up here at the very first look, I realized that we haven't handled this next.
The job of this next is to hand on Passover the request that, hey, I'm done with the middleware.
Passport is a middleware, I'm done with the middleware.
Now go ahead and do whatever you want to do.
So I'm going to go ahead and come up here and I'll say, Hey, next.
And there we go.
Just that said, let's go ahead and try it out one more time and see if this is working or not.
Let's go back up here.
Hit a refresh and there we go.
Let's try into the login Google and there we go.
Login again, one here.
And this time we say unauthorized OC.
Why this is calling it as Unauthorized OC.
We'll get back to that because we haven't actually worked on anything.
We haven't done anything and a whole bunch of other things will come back onto this part.
But this is all what we got that now we are able to extract all this information and this is all going
in and actually we are able to process that request as well.
Now coming back onto this auth part, now we have to take down a little bit onto this Google and the
callback and we have to kind of polish it a little bit more so that we don't get that unauthorized,
rather we have a better request or something like that.
Let's go ahead and catch up in the next video.