Supabase Authentication: Setting up Google Auth

[Music] okay let's set up google authentication for our superbase project you'll need an account at google cloud platform so we'll start by going here to [Music] console.cloud.google.com which should take you to the getting started page we're going to click on select a project at the top left if you already have a project just go ahead and click on that and then we're going to click on new project fill out our app information this case is called as abab and your organization your location go ahead and hit create this can take a couple of minutes i'll just wait for it to complete i'm going to select the project should bring us to the dashboard of our new project great now there's a search bar at the top right we're going to click in the search bar and search for oauth oa uth and then we're going to click on oauth consent screen from the list [Music] and the oauth consent screen select external [Music] down and then here create so we're going to set up a set of external oauth keys now on the app registration page we're going to fill out our app information so here just fill out stuff that is required app name again uh support email see this is just a choice okay you can put in your app logo app domain other authorized domains and we'll go ahead uh developer contact address okay just hit save and continue here okay now we're going to go to credentials on the left take us to the credentials page this is uh the create oauth client id page i'm going to select our application type um i'm going to use web application um typically we're going to use web application even uh if we're going to end up compiling for one of the the mobile platforms the most important part here is our oh our redirect uri it's really important that we get this right so let's go over to supabase select our project in this case we've already got a superbase project set up we're going to go down to settings and then api and this is your api url for our superbase project right here is our project id if you've ever ever asked for that all we want to do is copy this api url and then take this back into google and paste this here now that's only part of it we always have to add slash auth slash v1 slash callback to the end to get our complete uri so we're going to put this in the authorized redirect uris box and then hit create okay now we have our oauth client id and uh and client secrets this is what we're going to need to put into our dashboard so what we're going to do is we're going to copy the client id to the clipboard and then we're going to go back to back to supa base and go over to authentication and settings down at the bottom here's where all of our third-party providers live we're going to go down to google and enable google we're going to paste the client id right here and we're going to go back to back to the google page and we're going to copy the client secret to the clipboard go back to our project paste this in the google client secret section scroll up and hit save so now our project at superbase is configured with a client id and a client secret for google and now all we have left to do is add the code to our client application so let's take a look at that we start by importing the client or the create client from the supabase js library and now we need a reference to the superbase object to get that we just go to to our superbase project we go to api and authentication and this is already filled out for us which is really nice we're going to need this client api key for superbass this is a public api key so it's okay for it to live in your code where people might see it it's just a reference uh it's a public key and then go back over to the api authentication page and copy your superbase url and a link to the superbase object copy that to the clipboard paste that into your code and you can get rid of rid of this process env that's for node.js and we're on the client here we're all set here and now we just need the code to log in and log out so i'm going to create two functions i'm going to say log in with google and what i typically do here is create login with provider and pass it a variable with the name of the provider and i can use the same function for many different providers but we're just doing google right now and then we're going to do a function to log out of the application now we'll go get this code and this code is already written for us if you go back to the supabase website and go to the documentation and search for auth sign in once you get to auth sign-in just go down to sign in using third party providers and this is the code we need right here we're just going to copy it to the clipboard and paste it into our login and we're going to change this to google and again if if this was a generic function you that you passed a variable you could just put the variable right here and just call that same function and from from for any provider and you're going to attach this function to a button you put somewhere that says google login or text whatever you want and then for the log out function we're going to go back to the documentation and click down here on sign out and again this is literally one line of code we don't even have to write one line of code all we have to do is paste it here and now we have a client application that allows our users to click on a button and log in with google and log out

Channel: Mark Burggraf

Views: 10,516

Keywords:

Id: dE2vtnv83Fc

Length: 7min 21sec (441 seconds)

Published: Sat Jun 19 2021