In the last video we spoke about the flow that a user is going to go through whenever they initiate
a layoff inside of our application.
So now in this video we're going to start going to the actual setup process.
All right so here's the general idea of what we're going to do.
If you've already gone through that previous application building that YouTube application a couple
of these steps might feel a little bit familiar.
So the first thing we're going to go go to is the developers council at Google.com.
We're going to create a new project once we create this new project we're going to first set up in the
confirmation screen that confirmation screen is essentially the same one that you go through any time
that a user starts that flow.
And we asked the user for access to their e-mail or profile or whatever else after that.
We're then going to generate a lot Client ID.
This is going to be an identifying token that is going to identify our application to Google servers
following that will then install Google's API library and initialize it with that oath client id and
then we'll make sure that any time that the user clicks on that log in with Google button we make use
of that Google API library to start the process.
So let's get to it.
We're going to first begin by setting up a new project at council that developers start google.com.
So inside of a new browser tab I'll go to cons..
I always mix up the order there.
I always do.
Developers dot con..
All right console developers dot Google dot com.
Now once you come here remember you might see a project already on the screen.
If you have ever created a project with Google before you probably don't do NOT want to reuse a project
that you've already created.
Instead we want to create a new project so we're going to find the project dropdown up here at the top
left down side and then click on it.
Once we have this dropdown open or this pop up open then click on new project up here at the top right.
We then get asked to enter in a project name and so I'm going to use a project name of simply screamy
and then click on Create.
Now remember when you generate a project with Google you're going to see a little notification spinner
appear even though you think that you just create the project.
It is still in the process of being created.
And so when you get dumped back at this page you're still probably going to be looking at a previously
generated project.
So it's only after that notification spinner ends and I see that little one right there that my project
has been created and I can now successfully select it.
So I got to go back up to this dropped down on the top left hand side and select screamy.
So now I have the correct project selected.
All right so now we've generated our project.
We now need to set up an a confirmation screen so to do so we're going to find the credentials button
on the left hand side.
I'm going to go to a Watkin's sent screen and we're going to generate a new screen right here.
Now all we have to do is really enter in our application name going to entry in an application name
of stream me like so then I can go down to the bottom and click on safe.
After that I'm going to go back to the credentials section or select the credentials sub menu and then
I'll see this big notice right.
You're in the middle that says that we need to create a set of credentials.
So going to click on that button right there and we're going to make sure that we select a wath Client
ID.
We're not making an API key here.
We're making a client I.D. It's going to select that.
We then get asked what type of application we are making we're making it webapp will then see this little
form appear.
Now the only thing we have to add in here is a authorized javascript origin.
This little check right here or whatever you are right here is essentially a little security check.
Google is only going to allow requests to come in from a domain that is equal to whatever we list right
here.
So at present we are making use of our re-act application at local host 3000.
So I'm going to put in HTP colon slash slash localhost Kulin 3000 like so.
And notice that I did not put in HTP.
It is simply HTP.
And then I'll click on Create at the bottom I then see this pop up right here for my client and it has
my client ID.
So the only thing that we care about is the client id.
We are not going to be making use of our client secret.
We would only make use of that client secret if we were creating a flow with the first server's flow.
But we are doing a lot for G-S browser applications and for that type of flow we only need the client
id right here.
So I'm going to copy this ID and then I'm going to go back over to my code editor.
I'm going to create a new file.
I'm not going to create it in my project directory I'm just going to essentially go to file new file
and inside of here I'll say Client ID and L-Space that in like so.
Now again I'm not going to save this file because we're going to make use of this key in just a moment.
I just want to make sure that you don't lose it and have to go back over to the dashboard and get access
to it a second time.
OK that's it.
We've now got our client I.D..
So let's take a quick pause right here.
We can't close that window when we come back in the next video.
We're going to start to install the Google API library and then initialize it with that client id and
then set up that click event handler.
So quick pause and I'll see you in just a minute.