Setup Google OAuth sign in 6 minutes

hey what's going on everybody so in this video I'm going to show you how to create a signin with Google option on your website so what we'll do here is we'll start inside of the Google developer console where we'll create a new ooth application generate some credentials and configure a few things and then we're going to use aite on the other end for user management so we'll take our oo credentials and then configure them to our aight application and then the aight SDK will help us take care of everything else if you're not using aight you can still follow along with the first part of this tutorial because we are going to start off everything from scratch and create a new oo app inside of our console so you can at least see how that all looks so let's go ahead and get started and we're going to start off by go into console. cloud.google.com and this is what you should see when you first log in so the first thing we need to do here is go ahead and create a new project before we create an oo app so I'm going to go ahead and create a new project here and we're going to create a new project and then just say tutorial and that'll be our project name I'm not going to create an organization here and let's go ahead and hit create and that'll take a second okay so our new project is created and the next thing we want to do is go into apis and services and we want to create an oath consent screen first before we create an oath app and this is that screen where it simply just asks you hey do you want to allow this application to see some of your information you click next and then it continues through that process so let's go ahead and refresh everything so we can see the new project and from here we can go ahead and select our project let's click on tutorial and give this a second to refresh and and here we can start creating our consent screen so for the user type I'm just going to click on external we'll hit create for the app name I'm just going to call this my app and for the user support email I'll just enter my email here the logo I'm not going to worry about that the app domain so that's going to be the homepage of our application we're just going to go ahead and grab Local Host here this is what I'm using and I believe it can't end with a for slash so let's go ahead and continue here so the developer email I'm just going to enter my email again and let's hit save and continue okay so it's creating our ooth consent screen right now for the user scope so what information do we want to get from the user so this lets us set the Scopes and what we're going to ask for I'm going to go ahead and click add I want the user's email and user basic profile information and then I think actually I'll get their Google ID as well so I'm not going to ask for too much just some basic information so this way we can set our account information within aight so I added that in and I should be good to go we'll hit save and continue and for the test users now in the first stage we're going to be in test mode so you can only log in with users that are added to your test users so if you don't add a user here and then you try to sign in it's not going to work make sure you add them here until you actually go ahead and go through that approval process with your application and not every application needs approval so that's going to be up for you to decide so right now I'm just going to test with Dennis at CPR right. this is going to be the email that I'm going to log in with so I need to add this as a test user and that should be good to go save and continue and looks like everything is set up here so now that we have our oath consent screen let's go ahead and jump into credentials now and this is where we're going to create our oo app so we're going to go ahead and click on create credentials and I'm going to click on oo client ID and I'm going to select web application here and and we'll just call that web client that's fine and here is where we're going to need that home URL here so we're going to grab Local Host again pass that in and again it can't end with a forward slash and then the authorize redirect youru I so this is where I'm using app right now inside of app right I'm going to go ahead and go into my o Tab and I'm going to select on settings and I'm going to first enable my o provider and then generate that call back URL so in here I should be able to find Google somewhere here here we go so I'll quickly just enable that and we'll just remove the app ID and app secret for now and we're going to go ahead and grab this call back URL right here so we'll copy that bring that in to our redirect URI and then we'll hit create so it's going to take a second if it doesn't work right away just give it some time now from here what we're going to need is our client ID and our client secret now once you hit okay remember the client secret will not be visible anymore so make sure you either save this if you lose it just go ahead and create a new one so we're going to take this client ID and we're going to bring this into app right console that'll be passed into app ID and then our client secret let's copy that and bring that into app secret so let's go ahead and update everything save that there and then I can hit okay and that's everything for our oath client now what we're going to do is go into the code and actually build in that login process okay for this next part we're going to use the aight web SDK to log a user in and this is going to be very simple to configure but before we do that let me summarize the code really quick just so anybody that wants to follow along has an understanding of what's going on so we have this very minimalist application it was created with vit I have some boiler plate that I set up here so let's just recap that inside of index.html we have a login screen with a login button and then a profile screen that simply has a logout button and then the username now we installed the aight web SDK we configured a few things and then just go ahead and Export the client and then bring that into main.js now in here we just get the login logout button and both screens then we have a method to get a user and then render the profile screen or login screen and these methods are very simple we're just removing the class of hidden and then displaying them so now we need to think about what happens when a user actually clicks on that login button so inside of handle login what we're going to do is call account. create oath 2 session and this method is going to take in a few parameters so the first one is going to be to make sure we pass in the provider which is going to be Google here and the second parameter is going to be that success URL so where do we redirect a user once they're logged in so that's just going to be our home domain right here and then the final URL is going to be the fail URL so in this case we're just going to pass in fail right here we don't have this right now but we're going to pretend that we do so if something goes wrong this is where users redirected to so if I save that and if we go to our application right now if I refresh everything let's just go ahead and try to log in we'll hit login with Google and let's just see what happens so this is the consent screen it's asking me to log in I'm going to select the user that I want to log in with we'll hit log in here and we'll hit continue and we're redirected back to the homepage and now we're officially signed in with Google okay so that's it for this video don't forget to subscribe to the aight YouTube channel and as always I'll see you all in the next video

Channel: Appwrite

Views: 20,170

Keywords:

Id: tgO_ADSvY1I

Length: 6min 50sec (410 seconds)

Published: Fri Mar 15 2024