In the last section we fixed up a little issue around or redirect your eye.
Hopefully you've kind of taken a quick break between the last video and this one.
And now there should have been enough time to allow that new redirect your eye to kick in on the Google
allots side.
So we're going to now test our authentication flow again by opening up a new browser and sided or seamier
a new tab inside of our browser and visiting localhost Kolin 5000 slash off slash Google.
Now this time I will be redirected over to choose the account that I want to authenticate with.
Now just be clear.
You may or may not see the screen so you might see it.
You might not see it.
I'm seeing it.
I'm being prompted to choose an account again.
You might or might not see it.
I liked my account right here.
And then the instant I do I get a nasty looking error message that says cannot get on slash Google slash
callback.
If we look up at the URL it says clearly localhost 5000 slash off slash Google slash Colback.
So clearly we got sent back by Google to our server.
We are back at our server.
However our server does not yet have a route handler set up to handle a request coming into our school
sosh callback.
If we also look at the you l inside the query string over here you'll see a property called Code.
And so this is that very special code that we can use on our server to now make a follow up request
over to Google and get some actual information about this user.
So essentially at this point in time we have gone from here to here to here to here to here.
And we now have the code and we need to exchange it with Google servers to get some actual profile information
about the user.
OK.
So let's get to it.
This is going to be another one of those things where we're going to do a little bit of setup inside
of our index not just file.
We're going to add in a little bit of code and it's going to feel like gee how does this stuff all kind
of fit together like if you're just adding the code here without the benefit of this diagram and me
kind of you know telling you step by step what's going on.
It's kind of hard to get a sense of what passport is really doing.
So when we add on this next snippet of code this is probably going to be another location we were kind
of thinking like why like what's going on here what's happening.
And hey that's totally fine.
Remember it really just all comes down to this flow.
OK.
So our job right now is to make sure that when the user gets redirected to auth slash Google slash callback
we have some route handler that will take in the users request and do this entire like code exchange
thing.
So back inside of our index not just file our first step is going to be to add in a second route handler
to handle the case in which a user visits or slash Google slash callback.
So I will say app get app versus me off Google callback and then remember how we set up our handlers.
Usually we will pass in an Aero function right here but just like we had done previously with the last
handler that we did we are not going to handle all of this taking the code and exchanging it for information.
You know you and I are not going to do this follow up request right here.
Instead the Google strategy through passport is going to handle that for us.
So rather than putting some logic inside of here to say Okay take the code exchange it for some information.
We're going to say hey pass for Europe again take this request and somehow resolve it into an actual
profile.
So just like we did previously we're going to say passport dot authenticates and then we're going to
tell passports specifically to attempt to use that Google strategy to handle this incoming requests.
Now again remember that this string of Google right here the Google strategy internally has some identifier
that says hey my name is Google.
If anyone asked to be authenticated with Google use this strategy right here.
Now you might also notice that these two Raut handlers look awfully similar at this point in time.
The big difference between them is that when a user gets sent back to off slash Google slash callback
inside of the URL they're going to have that code available.
Remember the code.
So here's the code right here.
So when we send this request off to passports in this case passport is going to see that the code is
inside the you are l and they're going to say oh the user clearly is not attempting to be authenticated
for the first time.
They are attempting to turn that code into an actual profile.
And so even though these two route handlers right here look very similar.
The big difference is that when the user visits this route they're going to have the code and Google's
strategy is going to see that an attempt to handle the request a little bit differently.
It's going to say OK I'm not going to kick the user into the flow.
Instead I'm going to exchange the code for the actual user profile.
OK.
So we now have enough to actually test this out.
You know again hey like who knows what's going to happen let's just test it and see what happens right.
Let's see what we get.
So I'm going to go back over to my terminal because we change the code inside of our index file.
We have to restart our server.
And you can imagine that this is going to get tedious very quickly to restart our server every time.
Don't worry.
And just a little bit.
We're going to set up a little handle or a little helper to make sure we don't have to constantly restart
our server file every time we make a change.
But we'll do that in just a second.
OK.
So restart the server.
The server is now running and we're now going to go through our overflow again.
So I'm going to go to localhost Kolin 5000 slash off slash Google.
Again we get prompted to choose an account and then to select my account.
Now we're going to get kicked back over to our server of local host 5000 slash slash Google.
But you'll notice that it appears that we are just hanging on the screen right now and that is totally
OK.
That is to be expected.
So at this point we have now been redirected to our server and all we have said like the only code that
we have added in at all has been something to say hey passport take that code and turn it into like
a user profile.
So we haven't done anything at all to handle the underlying request and say oh we've now got that profile
like let's do something with the user.
So there's nothing on our server to say hey take the profile or take the user and actually show them
some content.
And that's why we are currently hanging on the screen.
However if we change back over to our terminal you're going to see a big long string right here of characters.
And so hey what where is this coming from.
This is kind of crazy.
Well if you remember I'll remember inside of our index file when we had to find our Google strategy
we had added on that callback function as the second argument right here.
And we had said take something for the first argument is called access token and just console log it.
And so that's exactly what's happening right now.
Our user has come back to our server.
We took the code.
We exchanged the code for a profile and whenever that happens the Google strategy then intends to call
this callback function right here.
And so if it seems like wow this is a real complicated flow of events like somehow the user got from
this callback right or Seamew this route handler right here and then this thing and they're jumping
over here what like what's going on here.
And yes I agree with you like this is pretty crazy and some pretty heavy duty stuff.
So if nothing else let's just kind of acknowledge that it looks like the process was successful because
we got some like access code or something like that right here.
So at this point let's take a break and let's just kind of acknowledge and say gee this seems kind of
confusing right now.
We're going to you in the next section and we're going to kind of figure out what is going on with this
little callback function right here what this access token is.
And just like in general what the heck is going on with this flow.
So quick break and I'll catch you in the next section.