Add a Google OAuth 2.0 Login Button to Your Site

[00:00] First, you need to go to console.developers.google.com. I will create a project. I'll call this login demo. No emails, accept the terms, create, and then it takes a second for it to create that project. Once that's done, you'll see login demo up here, and you'll want to go down to credentials.

[00:21] We need to create credentials for an OAuth client. It looks like we need a product name on the consent screen before I can move on, so I'll go there. Product name will be login demo, and save that. This'll be a web application. We'll name it login demo.

[00:37] For now, our authorized JavaScript origins will be http://localhost:5000. The port is important. I just know that the server I'm going to use uses that port. I'll hit create, and now I have a client ID, which I can use.

[00:57] I'll make sure and copy that, and I just have an empty project in a folder called login demo. I'll create this file, app JS, and just paste in that ID so I can use that later. Now, we'll create an index.html. I'll quickly stub out a page with init by typing bang then tab.

[01:18] I just need the script to hook into Google. We'll expand that out, and I'll just paste in this script. It's at apis.google.com/js/platform.js. We'll defer this until the DOM is parsed. I also want to load in my app.js.

[01:35] From here, just to make sure this is working, I'll console.log("Is this thing on?"), then just launch a web server. The one I'm going to use is called Serve. Make a font a bit bigger for you. It's called Serve. You can npm install this globally.

[01:50] I'll just hit enter, and then you'll see it launches on port 5000. I'll open that up, check my console, and everything's hooked up. From here, let's add a login button to our DOM. I'm just going to make an alias to the query selector, so document.querySelector.bind(document).

[02:05] This way, I can just grab the body, add some inner HTML, because I need a button that just says log in, and we'll give this an ID of login. I can look up that login button.

[02:24] I'll query for that. Login, add event listener, click. We'll just make sure this is working. I'll refresh in here, if I check the error here, it looks like I forget to defer my app script as well. We'll defer that. Now, the body should be ready, and when I click log in, we see it's working.

[02:47] The Google API is on the window after this script loads. The Google API needs to load the OAuth part of it. This is called Auth2. That takes a callback. Once that's done loading, you have GoogleAPI.Auth2 on there, and you can initialize it.

[03:07] You initialize it with an object with a client ID of this ID that we've saved from before. I'm going to paste that in there. The result of this being initialized, I'm just going to assign it to Auth2. This initialized Auth2 object will have everything we need to work with signing in.

[03:27] I'm going to take my login event handler, and when I click on the button, I'm going to say Auth2, sign in. To see if this is working, I'm going to listen to isSignedIn, which is on the Auth2 object. It's isSignedIn.listen. This will just be the status, which is true or false for isSignedIn. I can just console.log that out, so status.

[03:58] Now, when I come in here and refresh -- I'm going to make this button a bit bigger -- and I click log in, you'll see I get the prompt asking the login demo that it wants my email address and the basic profile info.

[04:11] I'm already logged in as this, so once I click allow, you'll see login true. One thing you'll notice if I refresh, that it already says login true because the Auth2 still knows that my session is active, and that I'm logged in as that account.

[04:29] Let's create a log out button with an ID of logout, logout. Close the button. Down here, we'll just duplicate this, call this log out, and call this sign out. When I hit save now, and I refresh, I can log out, then log in, and log out, and log in.

[04:53] Now, Auth2 also has a current user on there, and I can listen to when that changes, so I'll say user. From the user, I can say user, get basic profile to get the profile. To get the name, I can say profile.getName, and const name is that.

[05:19] If I log that out -- let's log out the name here -- and I refresh, you can see the name is One Egghead, first name One, last name, Egghead. That's the account I'm under. I can also do get email, email, and I can log out the name and email.

[05:38] When I refresh, you'll see we have an object with an email of this demo email address, and a name of One Egghead. On their profile, you can also get the avatar or the image, which is profile.getImageURL. We'll log that out, hit refresh.

[05:59] Now, we have the avatar, the avatar of the email, and the name. If I log out, I'm still this user. My state has changed from being signed in to signed out, but I'm still that user. I have to actually come over to this tab, and sign out of this.

[06:18] Now, when I log in, it will prompt me to sign in completely, which I could do with that account, or I'll sign in with a different account. Egghead IO demo two, I'll sign in with this, and I'll allow login demo to access this.

[06:35] Now, we can see we have Two Egghead. This user and the avatar in the email are all there, and I'm signed in. I can log out, log in. If I were to go into here, and change it so that I add an account to these there are logged in, so I have both One Egghead and Two Egghead logged in.

[06:56] If I come onto a page with a Google sign in button, and click log out, and try and log in, the behavior if I wasn't in incognito mode, just to keep my information private. If I wasn't in incognito mode, you would get that list of dropdowns to select which account you wanted to log in to.