Registering Project with Google

[00:00:00]
>> We are now here in Sign in with Google in Chapter 4 and we will start registering the product, okay? And I'm pointing you here, because there is a link here that you can follow, if not Google, Sign in with Google setup, okay? So what's idea? Every time you're going to use this kind of federated login, again you wanna let your users to login with other people's accounts, with other websites accounts.

[00:00:30]
Google, Twitter, GitHub, anyone you typically need to go and get an account with them as a web developer if you need to get an account with Google with Apple case of Apple, you also need to pay them, okay? But so in this case, if you go to sign in with Google set up, okay?

[00:00:49]
You go to this is the whole documentation, it's a very large documentation, okay? But I will just point you to the most important parts or the parts that I actually always needed. For example, there is a section here that says Setup, this is part of Google Identity, Authentication.

[00:01:10]
You can see here that Authentication and Authorization is something different, okay? It's completely separate. So we are in Authentication, and let's go to Setup. In Setup it says, well, first, what you need is to get your Google API client ID. I said, where can I get that? Well, you will need a Google account.

[00:01:32]
So here you can sign in with your Gmail account. Are you great that Google account for this? It's up to you. So you click here where it says Google API's console and you go to the Google Cloud API and Services Console, okay? I already have a project for these but they will show you how to create a new one.

[00:01:54]
Just so you can follow along and create your own project in case you wanna implement this. So one idea here, this is the place where you can create projects that will use Google APIs, any kind of Google APIs, Google Maps, Google Sheets, Google Drive, any API that comes from Google.

[00:02:13]
And we will use authentication services from Google, okay? So you just need to be logged in with a Google account, that's all, in this case this is my Google account. So from here what you first need to do is create a new project. In fact, the first time you get here if you have never played with Google APIs, you don't have a project, okay?

[00:02:33]
In this case, also you have for free ten projects, I have seven remaining in my quota. All my projects are tests from courses, at least the one in this account. So we gave this a project name, so this is going to be my coffee masters. It's internal, no one is going to see that more than you, and you create it, okay?

[00:02:58]
So 30 seconds, and when it's done, let's wait for that, yep. You select the project, so now this is a project that will appear here in this drop down, okay? Coffee master, okay, so once that's done, we need to create a credential. But to create the credential, we first need to create the metadata or set the metadata for our OAuth consent screen.

[00:03:30]
In short words, because from our website, the user will see a pop-up or the user will be navigating to a Google website. That Google website will have your name, your icon, maybe the information about who are you, why are you requesting logging in with Google? And also you need to accept all the terms.

[00:03:53]
So that happens here in the consent screen, okay? So here it says okay, which kind of users will use your app, internal users? This is only if you have a Google for apps workspace. So if your company is every employee has a Google account under your domain or external.

[00:04:14]
In this case we will use external. So we want Gmail users to log in in our website. When you use external, before deploying these, you will need to get approval. So someone a person at Google will actually check that you're a real app okay, that you're not he will make it, I mean a simple check, right?

[00:04:37]
But that you are not fake bank website or something like that or you don't look like that please, okay? But while you are working with this, you can create test users up to 100. So then you don't need to wait for approval to actually see these working. You can have your own Gmail, or other people's Gmail account as testers, so they will be able to login even if you don't get approval, and it works with localhost which is great, makes sense.

[00:05:07]
So I'm going to say great and now it's asking me for information that will appear in that screen. That again, is sometimes it's a pop up, on desktop it's a pop up unless you have pop ups to disable. And in that case, it will just navigate away from your current page in a new tab, and that tab will come back to your tab later.

[00:05:33]
So here the app name, so CoffeeMasters, support email, okay, I can take any email from here. The app logo is not mandatory, so yeah, you can just keep it for now, you can upload your logo. By the way, we have a logo, so in the project, we can upload a logo.

[00:05:53]
So it's in images, Icons, IcoPNG, there is also a logo that I can use. So if you wanna add more information about your page, but this is completely optional, and this is important, you can add authorized domain. So for this to work, I need to add here the domains that are authorized, so in case, I will put this in coffeemaster.com, okay?

[00:06:22]
I will do that but also I can say localhost, okay? As an authorized domain, but if you look here, he says no, it must be a top private domain. So actually localhost is not here where I need to put I will need to add localhost but not here.

[00:06:39]
This is for public domains actually. Developer contact, you can contact mc.om that doesn't exist. Okay, this is actually a public email address, I'm not going to publish this with this data anyway. Scopes, we can completely ignore this for now. Scopes is a way that we have in this Google system to actually make different users to have different permissions over my quotas, like I can have my account and have permission to add the credit card and the billing system and blah.

[00:07:18]
So I don't need this, so I will just to save and continue. Here I can add my test users, okay, so here I can add all the test users that I want to add here, so any email address okay, it has to be a Google address, okay? Will work like I have Frontend Masters of Gmail, so I can add that one, okay?

[00:07:45]
And I can add up to 100, okay? I will add also my primary one and those are going to be testing users. Remember with this, you don't need then to be approved, okay? And now this is how it's going to look like, so now that part is ready, we can create credentials that's the last part.

[00:08:10]
So in this case we are going to create credentials for and OAuth ClientID. And we are kind of finishing here right now, so at the top I'm going to create the credential and I'm going to create one of those. What application type? It's a web application. So the name it just internal so this is I know the PWA wherever, and here we need to add the JavaScript origins that are available and here we are going to call for example our localhost 50, 50, okay?

[00:08:46]
For example, and in case later we use localhost without a port. We can as many as we want, okay? And for now, I think that's enough, and now we have these two things, a client ID and my client secret. This is like a public private key set, okay?

[00:09:14]
So we will need to get the client ID somewhere. I will explain where in a minute, but those are the first steps, okay? Now we are ready to implement this in our website, the good news is that so far it was a lot of work but implementing this is actually pretty straightforward.

[00:09:35]
You will see I will just copy and paste something and it will magically work now. That's because Google created like a library to make it work easily but if you're implementing this over GitHub or other providers well, you need to do it manually and yeah it will require a lot of steps.