Hey, did everyone had their share?
And in this video, since we have to work with the Google log in, we need the Google consent screen.
And whatever the application you are going to be working, there is a developer console or kind of a
console that application name or developer or application name.
So there is a developer dot facebook.com, there is a console cloud google.com.
Every single application has some way to provide you these API keys.
If they don't provide the API keys, we cannot proceed further in that application.
So as the time of recording of this video, Instagram doesn't give you any option.
Option by the convention means that log in with Instagram, it rather gives you login with Facebook.
So that is possibilities and not possibilities that are things there.
So please visit this console dot cloud, dot google.com or console developer google.com.
I believe they both take you on to the same Google Cloud platform and this is where how we can create
the API.
Zapier signing up for the Google account is up to you.
I believe that's the easiest thing.
So in case you are not able to find it, just look at all the menu of the Google Cloud itself and we
want to go into the APIs dashboard.
So this is the easiest way to access this screen where we want to.
Now, in my case, it says, Hey, I have already this my GitHub, but in case yours is saying that
I don't have it, you will be finding this new project.
Just click on it and it will take you on to the screen and you can just fill up these details and that's
pretty much it.
Just go ahead and add in your location and just that's it.
I won't be creating another project, although this is a dummy account that I use for just the teaching
purposes, but still I don't want to fill it up.
So in this case we have already got an app and whatever the app you are having no big deal.
We can actually work with that.
Now in this account I have a OAuth consent screen which is not yet configured, so you can see that
this is not configured and we have to do it.
The idea behind showing the consent screen that we want to have this credentials and through this credential
we want to actually access the web application.
So if I go ahead and try to confirm any of this, just notice here it says, remember to configure your
consent screen so you can reach out to the same screen from any of those places.
Now, this app is going to be external.
That means it will be eventually be published.
I guess that's the goal of your application as well.
So always use the external, you can actually click on internal as well, but this will be inbuilt just
within your organization.
What do I mean by those organization?
So right now this account is logged in with to learn code online and we use the Google account and the
Google Cloud quite a lot here.
So in the in the case we don't want other users to use it, only add the rate learn code online user,
then we can create this as internal type of application.
So that can be worked up here.
And in most of the cases, you want other people to sign up from outside the organization or from the
regular Gmail.
So that's what it means.
I'm going to go ahead and choose external and click on the create.
Now this is the place which gives a lot of trouble to the people.
You can give you an app name, whatever the app name.
In this case, this is a project, blah blah stuff we are going to call this one is simply my AE app.
That seems to be good.
One Support email.
It just suggests me whatever the email I am logged in.
That is something that you should be picking up logo you can definitely pick up.
It will show up at the time of whenever the consent screen is being shown.
I am not much interested in that.
Now here comes is the authorized domains and a whole lot of other things.
You really don't want to touch this one.
A lot of people try to just add local host and everything up here.
No, this is not the place where you add these things.
Let's go ahead and click on Save and Continue.
So this is going to be a developer contact information.
Please go ahead and take my email.
No problem at all.
Learn code online, dot in.
There we go.
Let's go ahead and click on Save and Continue.
And when we comes on to this, a scope application, this is where we can add or remove the scope and
this is the most important screen.
This will allow you to have that what kind of application access you want to have in this case?
Let's just say you want to have the user email, so I'll just get the email.
I also want to get the user profile.
It's up to you how much more you want to have, how much less you want to have.
In most of our application, what we design, we actually just take the email information, not even
the profile, because we don't have to do anything with your username or maybe your photo.
We actually don't need that much of access, but in some cases these are required.
So these are the most two that most of the developers use, including us.
So we're going to go ahead and pick these ones.
Now, scroll that and make sure you click on update here.
Now these two scopes are added.
Now you can access email and profile here.
Now how to access that?
Don't worry, we are going to learn that part.
We're going to click on Save and continue.
It says optional info.
No, I don't have any optional info.
I'm going to save and continue and it's going to give you the summary of it.
And now we can click on Back to Dashboard.
That's it.
That's your consent screen.
That is already there.
Now let's go ahead and click on Create Credential.
Now after the consent screen, we can create the credential.
So let's click on Create Credential.
I want OAuth client ID, not the API key.
Remember OAuth client ID and this is where you actually add all the details up here.
So application type, my application is web application and the client name is going to be.
My ae kind of a on tap.
Yeah, that's kind of a decent name.
So yeah, whatever that name is, we are going to go ahead and use this one.
And then it comes to the UI for the authorized JavaScript origin and the redirect directory.
If you remember, I told you there is always, always a two way path here.
Show the content screen, send the token and send the information.
And this is why both these two domains are actually required up here.
Let's go ahead and add this one.
So here I'm going to go ahead and say HTTP, colon, slash, slash, and this is going to be simply
local host and that's it.
I want to have this one up here.
And as soon as you click outside of it, that's going to just take it as it is.
Now, what it says is, Hey, now you want to have authorized redirect Uris as well.
I will talk quite in depth about this one, but right now just go ahead and add this one HTTP, colon,
slash, slash, and we're going to go ahead and say local host colon 4000 and we are going to go ahead.
And after that we're going to say slash, auth, slash, and we're going to go ahead and say Google
slash callback.
And again, this URL can be anything that you want.
Right now, you don't have that much of we haven't actually talked that much that I can show you how
you can change that.
So go ahead and keep this as it is.
Let's go ahead and also make this one that authorized URL is going to be colon 4000.
That is fine.
In this case.
We don't need to.
But let's go ahead and add this one.
Let's go ahead and create this one.
Now, this is going to give you this all information that, okay, now everything is done and you can
actually download this JSON file, which I'm going to go ahead and do this one and I'm going to call
this one as my download JSON so that I can remember this one and you can actually copy your client ID
and the client secret directly from here.
Feel free to go ahead and do that.
I'll actually copy that.
I'll take it directly from the JSON, but this is where you actually get it.
Let's go ahead and click on.
Okay.
And that's all that's all you need from this consent screen and everything.
So all the setup that is required is all necessarily is done.
Let's go ahead in the next video.
Let's go ahead and create a new application and work on the social login.