You know the last section we added our client id and our client secret to the keystroke genius file.
Now when we did that you'll notice that I added on the name Google to both the client id and the client
secret just in case you're curious why it did that.
Let's imagine for a second that we are also going to set up Facebook a lot inside of our application
as well.
And so maybe we would want to add on a client id for the Facebook along to this file as well.
If we just call this thing simply client id and then we came back in and we said all sudden we have
a client id for Facebook.
Well which coin ideas which one right.
And so just because I expect to have many different keys inside this file over time I decided to just
put the name Google in front of it to identify the key and make its purpose really obvious.
The other thing that I want to point out to you and make sure that you really really triple check this
inside of your own keys dodgiest file.
Notice that I used a capital D for the client id right here so capital D very important do not do a
lowercase.
OK so now that we've got our key is inside this file We're going to import this file into our index
not file and then pass those keys to the Google strategy so that the Google strategy can properly identify
our application to the Google API.
So underneath the Google strategy require statement I'm going to add in Konst keys is require and I'm
going to pass on the path to the key start G-S file which is dot slash.
So in the current directory go to the config folder and then get the keys dot japes file.
Now for any file that we write that ends in us we don't have to add the file extension on there so we
can simply say keys like so.
OK so now we've got the keys object.
So this is now the object that has the Google client id and the Google client secret.
We can pass those two keys to the Google strategy.
So as the first argument to the Google strategy I'm going to add a empty object.
I'm going to give it a key of Client ID and do notice please triple check on your old code base.
Make sure you've got a capital D over here as well.
And then this will assign keys dot Google client id and again for the last time make sure you've got
a capital D over here as well.
And then we'll get our client secret which is going to come from Keys Daut Google client secret Okay.
So that's looking pretty good.
Now the options object right here requires one other very important argument or option excuse me.
But before we add that in I want to talk a little bit about its purpose.
So let's talk about this last option that we're going to add into this object and it will come back
here and actually added in.
So I'm going to go back over to my browser where we still have our flow diagram open now.
Remember how this flow is working when the user clicks on the log in screen the user is going to come
to our express server on the route auth slash Google.
Now we have not yet set up that route but we will very shortly.
Whenever a user comes to that route we are going to automatically forward the request on to Google servers.
So that will be a U or l of something like Not exactly this but something like Google dot com slash
off.
Once the user is there they will be prompted to grant permissions to our application after the user
grants permissions.
The user will then be redirected back over to our server with that code inside the URL.
And remember that code inside the query string is the real piece of magic.
Its what allows our server to do a follow up request back over to Google and say hey we want some details
about this user and here's the code you just gave them.
Now the tricky part here is after the user grants permissions to our application what actually happens
to the user.
You know we had said that they get redirected back over to our server but what address or what route
do they get redirected to.
And so we have to manually specify where we want the user to be sent to.
So in this diagram I had said that after the user grants permissions we want to automatically get the
user sent back to our server on the route of auth slash Google slash callback.
And so presumably we all have some route handler here or some logic to say whenever a user comes to
this route we want to then take the code you are l and do this like follow up requests over to Google
servers.
So the third option that we're going to pass into that options object is this route right here off slash
Google slash callback.
So it is the route that the user is going to be sent to after they grant permission to our application.
Now this might seem like a very fine grain detail and yeah I it definitely is right.
Remember one of the things that I said was kind of rough about passport is that you have to kind of
nudge it along or give it these little very small configuration pieces that can be kind of tough to
figure out how this stuff is all flowing and working together.
And so this is a great example of that.
You know I'm saying we have to provide this little u r l or this little router right here of where the
user should be sent to after the grant permissions.
But if you didn't really see this diagram right here you might say like where is this thing going to
be used like what is this you are l Why am I providing it.
Right.
So that's kind of this little you know nudging issue with passport in in practice.
OK.
So back inside of our code editor we're going to add on one more property which is called Colback you
are l with the capital you are in L and then as a value we're going to pass a string and this is going
to be the route that the user will be sent to after they grant permissions to our application.
So it's going to be slash off slash Google slash callback.
So in a little bit we are going to add a route handler to our express application to handle a user coming
back to our application on this route right here.
We have to add some actual logic that says OK this user is coming back from Google right now and they're
visiting this you are out or this path right here.
We need to handle that user appropriately.
OK.
So this object is looking good.
Now there's one last argument that we're going to provide to the Google strategy after we close out
this object right here.
As a second argument so second argument to the Google strategy I'm going to pass an arrow function like
some now right now we're not going to worry too much about this function.
I am going to add on a single argument to it.
I'm going to call it access token and we're going to console log that value of access token.
So let's just ignore this arrow function right now and we're just going to leave this console log here
and to say OK we'll figure out what's going on there a little bit later.
OK.
So we're going to leave that for now.
OK.
So we're going to save this file.
We're going to take a quick break right now and then when we come back we're going to be able to test
out the first leg of our outflow.
So essentially this first little connection where we send our user over to the Google servers and then
get them redirected back to our application.
So it's take care of that.
Inside the next section.