Hey there, everyone here this year.
And before we move further, I would like to ask you a question.
What is passport?
Can you answer this question?
What is this passport?
It is a middleware.
Let me ask you again, what is passport?
It is a middleware.
Hey, why are you repeating yourself?
Because this is the entirety of the stuff.
This is where the entirety of the application is hidden behind.
This is a middleware.
And don't forget that our rest of the things are going to become automatically easy for you.
So let me walk you through that.
So what we're going to do on this Google login screen, we expect that we'll be having auth because
that's where we are writing all of our files.
So that makes sense.
If I go ahead and say Google my Google, whatever that is, this root should be declared.
Makes sense very much.
Let's go into the order.
JS And just like we have slash login, we should have another route up here.
So we're going to go ahead, copy this one and we'll be saying that.
Okay, now this will be Google already we are injecting in the middleware slash.
So this should be slash or slash Google.
Okay, that is fine.
Now, this is going to be instead of rendering this one, let's go ahead and send this one simply that
this is going to be simply restart send and we're going to say log in with Google.
So now we have a route which can actually do some job.
Let me go ahead and refresh and check you that refresh and now click on Google and there is something
which is handling log in with Google, but there is somebody which is handling.
Now whenever you want to show the consent screen, you have to inject passport.
How do we inject passport as a middleware on whatever the route you actually wish for?
So in this case, let's go ahead and bring on the passport.
So we have already installed that.
So we're going to go ahead and say pass passport.
And that passport is going to go ahead and say, I need passport.
There we go.
Now passport is here.
How do we inject it as Google?
So we simply go ahead.
And as they actually mentioned that on their home page or website that all you got to say is passport
authenticate and whatever you want to authenticate just mentioned that, yeah, we're going to do that.
So we're going to go ahead and come here as a middleware.
And now let's go ahead and say, Hey, Passport, I want to use your method, which is authenticate
which you promote quite a lot.
And the authentication is what I'm using is Google.
That is nice.
Now it also takes another parameter here, which is an object.
And in this object you have to mention that what is the scope or what is the scope of amount of data
that you are going to be bringing in?
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
and say scope and scope is actually an array.
And in this you can mention whatever you wish.
So by default it actually brings up the profile.
But since we have asked on one more thing, which is email which is required and trivial for our application,
we have gone ahead and used that.
So this is all basics, what we have got and notice it doesn't have any comma.
So after email and this authenticate, it should have a comma here, save that and now it is all happy
and it says, okay, now there is a Google, there is a passport authenticate and there we go.
Let's go ahead and see if this is the only work that we have to wish I wish we had to do.
But there is a little bit more.
But let's see now we have injected the middleware I see in the Google and says, hey, a non Google
strategy.
So I don't know how this strategy is implemented in the so much of our work that we have done together,
we have seen that if you inject anything in the middle, there is some kind of process that is going
to follow through and then it passes on the chain that, hey, now you do whatever you want to do.
This is exactly has happened here.
This is a passport authentication that we have injected.
Now, if you really want to go through one more step, then you have to bring in the strategy.
Let's go ahead and see how the bring that strategy because I have no idea how that works in.
So this is the strategy that they say, hey, this is the strategy you have to work on.
And notice they also write this one.
So where this is the Google strategy that we'll be bringing in and says passport use.
Now you have a couple of options how you want to do and bring this entirety of the application.
So I'll come back here and usually such kind of middleware actually goes into the index file.
So this is where just where we are writing these app dot use and everything, we actually need to do
that.
But since this password is written so nicely that you can actually go ahead and place that inside another
folder, so usually you are going to see another folder which is passport, just like that.
It is that much famous of a library that it actually goes inside in its own folder.
Now inside this passport, we're going to go ahead and simply create another file which will be same
passport dot.
JS Okay.
What we're going to do is we are going to bring up the strategy first.
Let's bring the passport here as well.
So we're going to go ahead and say passport.
That is going to be simply require passport.
So this is the one thing that we always are going to require.
Now let's see how this strategy works on.
So in this first it says, hey, bring on this strategy.
So entirety of the Google and everything.
So we're going to go ahead and copy this line to much copied.
There we go.
This is the only thing that we want to bring in first and we want to study this everything.
So it says, hey, Google strategy, assuming that you have installed this one, which we have and we
are bringing in the strategy now after moving that, it says, hey, now further down the road, I ask
you to use this one.
So passport use and you have to use this new Google strategy and then you have to show me the client
ID, client secret callback URL, and then I'll give you access to this function pretty much.
Okay.
But I want to write it so that I can actually understand what's happening at each of this phase.
So I'm going to go ahead and say passport, dot use.
And inside this one I want to use a new Google strategy.
So I'm going to go ahead and say new Google strategy.
Now, this new Google strategy will take a couple of parameters and we just saw that these are the parameters.
So I create an object here and it takes client ID, client secret and callback URL.
Let's go ahead and open that.
So the first thing is it takes client.
Let me copy that because I think I might make a mistake here.
There's a I and both capital so client ID how we are going to bring in the client ID now that is obviously
a new thing for us.
So what we're going to do is let me open up my sublime text.
So this is really big.
And remember the application file that we downloaded for the client ID and the secret?
Yep.
That's exactly from where we are going to bring in this one.
So this is too big of a file.
And why is it adding these ones?
And let's go ahead and break it up, because this is really, really too big.
Let me open this up into V code itself so that I can actually see it.
Open and restricted mode here.
That's fine.
And I can go ahead and move that.
So there we go.
So now we need first is the client ID.
So this is my client ID, it has a lot more information, but I don't need that.
I'll copy this one only copy that.
And now let's go ahead and add this up here.
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
client ID.
Let me just go ahead and quickly see that this one is expecting a comma.
Why are you expecting a comma?
Oh, my bad.
Cut this out entirely.
Because this needs to be an object.
There we go.
And then it should be all happy.
Save that.
There we go.
So now we have the client ID.
Let's work for another one.
Okay, so this time we need a client secret.
Copy that.
And there we go.
And I'm going to say client secret.
And let's go ahead and inject a client secret.
The Clean Secret is available just right up here.
Copy that and paste it up there.
We do have more stuff to actually provide, but we're going to go ahead and work on that this much only.
Now, remember one thing I told you, this Google strategy, if you closely analyze this one, this
is the Google strategy.
And just after the Google strategy, it actually provides you a callback function.
And here it actually uses the function, which is usually a better way in this scenario especially.
But we can actually go ahead and use the arrow functions in case that is your favorite.
So let me go ahead and put up a comma hit to enter.
And just here we can actually go ahead and use a simple callback and we're going to just put a comment
here which says, call back.
That's pretty much it.
Let's go ahead and save this one.
This arranges this nicely.
Och, this is och this is good that we have understood that how to use properly the Google strategy.
Not really a big deal.
We just passed on client ID and secret.
Yes.
I'm pretty sure that a lot of you actually focused on this one that hey, we have a callback URL.
We are not using it.
I will.
But I just wanted to show you how it works on now since this is a middleware and we are writing this
middleware, some in the strange outskirt file, it shouldn't be like that.
This needs to be imported into the index file as well.
So now we're going to go ahead and go into the index or JS file and further just bring it up here.
Now, one thing I absolutely love about this one is let me show you that I'll go into the index one
and I'll say just up here that I need to require a file.
So I'm going to go ahead and say require and inside the required I'm going to go into passport.
And inside the passport.
I have this passport.
That's it.
I haven't folded it in available.
I have done nothing at all.
I have just required it.
That's it.
Now, as soon as you require it, what happens automatically?
Your code for passport, which is passport use, automatically gets injected into here at the appropriate
place where the middleware should be.
And that is the fantastic thing.
Now let's see what actually it does for me.
Now, my roots should be technically ready.
Now, if I go back up here and hit a reload just up here, if I click on the Google now notice here
it has given me all of this details up here.
It says missing parameters which is redirect.
You re I get you.
I have missed one explicitly, but at least I'm on to a Google authorization page here or Google consent
screen.
So we have figured out one thing that this callback URL is pretty important.
So let's go ahead and give that as well.
So we're going to go ahead and copy this callback URL.
Let's go ahead and copy that.
Now let's go up here into passport JS and let's add that part here as well.
What is the value of this callback URL?
Let's go ahead and check it out because I forgot that honestly, let's go up here.
And this time this is the web client ID.
So my ae all tab.
Yeah, this is the one.
And this is the callback URL.
So let's go ahead and copy this.
And there we go.
So we are going to go ahead and open this one now, Kenya.
Notice one more thing here.
We do have this auth slash Google.
So if you look at this odd geez, we have this login, we have this Google.
So auth slash login, we have auth slash google but there is no such thing as odd slash google slash
callback.
This doesn't exist.
So what is going to happen in this case?
I don't know.
Let's go ahead and check it out.
So I'll go up here and come up here.
Let's hit a reload quickly and I go ahead and say, Hey, Google this time, let's try to log in.
And I have logged in and this time since I was having a callback, it is actually showing me this screen.
Now, if I go ahead and say, Hey, I want to log in with learn code online, I just go ahead and say,
Hey, I cannot get an oath slash Google slash callback so I know what my error is.
There is one root which is missing, but there's a little bit more to it.
Let's go ahead and catch up in the next video.