In the last section we started to wire up passport in the Google strategy inside of our index such as
file remember.
For right now we're going to put all of our passport in authentication stuff directly into this file.
But very shortly we'll separate it out to a couple of different files and folders inside of our server
project.
Now we have left things off saying that we needed to pass some additional configuration options to the
Google strategy before we make use of the Google strategy.
We have to give it two important options a client id and the client secret this client id and the client
secret are provided to us directly from Google's overall service.
Remember that when we went through our water flow we had said that we would take some user who is trying
to visit or slash Google and we would forward them on to Google where they would then be asked to grant
us permission to get their profile.
So when we take a user and just kind of like throw them over to Google Google has to be able to identify
where that user is coming from.
They have to be able to say oh this user is coming from the guys who are putting together the email
the application.
So when the user grants permission for them to read the profile we're going to send them back over to
the e-mail people in order for Google to be aware that our application exists and be able to make that
type of connection.
We have to sign up with the Google Olaf API.
And so essentially register our application and just tell Google hey we exist and we're going to have
people who want to a along with our application.
Now signing up with the Google auth API is a little bit complicated.
So let's start it right now and give ourselves a good bit of time to get through it.
I'm going to create a new browser tab and I'm going to navigate directly to console developers developers
dot Google dot com and I'll paste this inside of my code editor so you can see it nice and large.
OK.
So there you go.
Consulate developers dot Google dot com OK.
So once you navigate there if you do not yet have a Google account please at this point create an account
with Google.
It can be a total trash account.
You don't have to use your personal on any google account will do.
When you come to this developer's con. You might see something that looks like what I see on the screen
but you might see something instead that says hey you create your first project or something like that.
And so that's exactly what we want to do right now.
We want to generate a brand new project to use with our Google off API at present.
I see this screen because I already have a couple of existing kind of sample projects inside of this
account.
So you're only going to see this stuff if you already have existing projects.
Anyways let's create a new one that will be tied just to all the logic around this email application
that we're working on.
So up at the drop down up here click it.
And then on the far right hand side going to hit the plus button to create a new project.
Now I get prompted to add a project name.
I'm going to give it the name of email the dash dev like so and I do recommend you put dasht Dev on
there because we're going to make a second key a little bit or a second project a little bit later on.
OK so after that I'll click the create button and then this is really important.
Let me pause you right now.
Really important when you click on Create right there.
It does not instantly create your project.
Instead it starts the process of creating a new project.
And very briefly you'll see a spinner appear in your notifications area as Google is creating that new
project.
So I'm still looking at my previous one and I have to make sure that I click on the dropdown and then
select the new project email Emily dashed that I just created.
Now that's only relevant if you have other projects already in here.
If you have a completely fresh account chances are it will do the right thing.
Basically at the end of the day just make sure that you seemingly dashed death up in the nav bar up
here.
That's what you want to see.
OK so now we've created this new project we need to do two separate things.
And again this is where I said that the sign up stuff is a little bit complicated.
So let's just get through these two things.
The first one is going to be to enable the Google auth API.
And then secondly we're going to create a brand new API credential.
So first we're going to enable the Google API.
I'm going to click on enable API up here and then it gives me a list of all the different API that we
have access to inside of this account for us.
We want to get access to specifically Olaf API.
And so you can search for cloth and you'll notice very helpfully.
And I say that entirely sarcastically it says no results for off so I'm going to tell you right now
this is definitely one of the things they here in this course for because this is really not clear to
outside beginners at all.
When we want to sign up for the API we actually want to sign up for the Google Plus API so search for
Google Plus you'll see a result of Google Plus API.
Click on that.
And then on the page that pops up you're going to see something that says oh yeah access user data with
a law to point out.
So in my opinion this API right here is truly buried because you can't search for a lot.
So hey what good is it anyways.
I'm just throwing that out there.
You know just a little bit of a headache.
So make sure you're looking at Google Plus API and then you click on and Nabl at the time it'll take
just a second to turn it on.
And any second.
OK.
So we're going to go now just enabling the API is not enough.
Remember we also have to generate an API credential.
So now this API is enabled in our accounts but to access our account and the API that are Nabl inside
of it we have to make a credential.
So you can either click on the Create credentials message that pops up here or just click on credentials
on the left hand nav.
So we click on credentials.
You'll be prompted with the window that says oh you create credential you can click on the button and
then we want the option that says oh all client id want client id so the fun is not over yet.
We're not done yet.
The funds are not over yet still some other stuff some hoops to jump through.
Yes this process is just crazy town.
So in order to get a client id we have to set up a product name for our consent screen.
So what does a consent screen.
Well remember whenever we take this user who's attempting to sign in and we take them over to Google.
Google is going to ask the user if they grant permission to our application.
And so when the user gets prompted to grant us permission that is the consent screen that is the thing
that says hey these people are trying to get access to your account information is that OK.
And they'll have our our our account name on it and our Maybe our picture and some other stuff on there.
And so that's what this consent screen is.
So a click on config consent screen and then we've got a couple of different things to fill out in here
right now.
The only thing we have to fill out is the product name.
So we will put email the dash dev in here and then we don't have to put anything else in here.
Everything else is optional.
So let's click save and then we can select the application type that we're trying to create.
So we're making a web application so we click on web application and then we get a couple of other options
to fill out inside of here as well.
First off is the name we'll leave that as web client one we get authorized javascript origins and then
we also have authorized redirect you are it's now for right now.
We're going to just put some values in here and we're not going to talk a lot about what's going on
with them.
OK.
Now I guarantee we will come back.
We'll talk about what these two settings are that we're filling out.
But we'll do that a little bit later.
So first for the authorized javascript origin we're going to say age TTP colon slash slash local host
colon 5 0 0 0 0 and slash star 5000 slash star and then we're going to put the exact identical thing
I've got a typo somewhere in here.
What is it.
Oh it doesn't like the slash star we want just localhost 5000 on this one.
My apologies on the second one.
That's where we want the slash star much better.
OK.
So first one local host five thousand second one local hosts 5000 slash star.
Now like I said we will come back we'll talk about what these things are for at a later point in this
flow.
Right now let's click on Create do make sure you get there like little dots on there.
You might have to click on the create button twice now after we finish that up we get this nice pop
up and it tells us a client id and a client secret.
So these are the two little identifying tokens that we need to get access to.
So right now we're going to copy the first one we're going to go back over to our code editor and for
right now I'm going to just paste it in here and I label it as Client ID.
Now I'm going to do the same thing with the second one as well.
It's going to copy the client secrets a label it as clients secret and they'll paste that one too.
Now we're going to make use of both of these in just a second.
The reason we're copy pasting them over here right now is that we're going take a break right now.
And just in case you want to stop watching and don't have to pull this window back up.
I want to make sure you've got a reference to them right here.
So we're in take a break right now.
We're going to come back in just a second.
We'll make use of the client id and the client secret at that point.
So I'll see you in just a second.