Supabase Auth Deep Dive Part 5: Google OAuth Provider

okay so this is how to use google oauth as a provider in your super base app now the first thing we've got is we've got a blank super base project here and if we go to the auth settings you'll see if you scroll down we've got all these providers so the first thing we want to do is we want to enable the google provider and you'll see it asks us for a google client id and a google secret now to get these we need to go to the google cloud console so you can go console.cloud.google.com now you may need to sign up for a cloud account if you don't have one already then what we want to do is we want to start a new project so we can click this new project icon on the right and we want a project name so super base test is fine it doesn't need an organization now after the project is created hit select project and then in the search bar just type oauth and you'll see this oauth consent screen this is what we want now you get a choice whether you want this to be an application only used internally by people on your domain or whether it's public facing so i want a public-facing external application so i'll hit create i'll give my app a name super based test a user support email and an optional logo now the last thing is to just add the developer contact information and we can save and continue now we can go ahead and generate some credentials remember this is the google client id and google secret that we need and at the top we hit create credentials award client id and then we can choose our application type so for this we'll want a web app web client one is fine now the last thing we need here is the authorized redirect uris now for this we're going to use the base url of our superbase api which is this and then we're going to add slash auth slash v1 slash callback so that google know where to send the user to after they've been through the login flow and hit create great now it gives us the two values that we need we can copy and paste them into the auth settings google client id and secret and hit save now i'll show you how to do this on both the raw http endpoint and also in javascript so let's start with the http endpoint now to test the raw http endpoint we can actually just use the browser so let's grab this superbase url we'll paste it in we'll do slash auth slash v1 slash authorize with the query parameter of provider equals google and we'll submit now you'll notice that you won't need the api key header for requests to this specific endpoint which is important because people need to access it from the browser directly now the user will just select their google account and you'll see they've been forwarded to localhost 3000 with an access token now if we copy this access token and put it as always into jwt.io we can see that the providers google it's the uuid of the user in our superbase database and it even has some extra information from google such as the avatar url and the user's full name and as always we can verify the signature by heading to settings grabbing our jwt secret plugging it in here and seeing that the signature is verified now you might wonder why this has gone straight to localhost 3000 and that's because this is the default domain for your app if you want this to be something different such as https foobar.com then we can try the flow again and you'll see that this time we've been forwarded to fubar.com with an access token and it looks like this domain isn't particularly friendly so we'll definitely avoid that for future demos but now we can see that in our superbase dashboard under users we have the new user with provider google and they do indeed have the same user id as is present in the jwt token now the last thing i want to show you is just how to do this in javascript and for this i'll actually use code pen to show you that you don't even need react or next js or any of these libraries to interact with super bass you can do it directly from html and js so i'll go now to super bass js i'll scroll down to the umd section and i'll grab one of these scripts either is fine we'll put it into codepen and then we can copy what's inside this second section here into the js and we'll need to add our credentials so let's grab them from settings api url and add on token and if we console log super base we should see that we have a valid super based client and now all we need to do with this is say superbase.org dot sign in and add the provider of google now when we save we can see that codepen isn't happy but we can open this site in a new window and it will show us the google dialog again choose your user and end up on presumably some incredibly malicious website now just to clarify this bit this domain is basically whatever you put in the site url you want to make sure that this is a domain that you control so that other people don't end up with access tokens for your user like they did in this case and that's it for google if you want to try any of the other oauth providers the flow is very similar you need to create an app on that provider's website grab the client id and secret plug it in here and you're good to go we've even gone one step further and we've added inside our ui library here at super base slash ui on github you'll find that we've created a widget for you to use where you can enable and disable whichever providers you want so super easy if there's any questions about this or any of the other videos you can email us at beta superbase.io or ask any questions in the comments one last thing to point out as well is if you have an active super base client or go through js client on the page that we end up on it will automatically receive the access token and initiate the user session so that you don't need to manually plug out this value from the url fragment one thing that we're working on also is the ability in superbase.js to choose the redirect location which will most likely be redirect2 and then some path or url such as a welcome page as long as it is on the same origin website as the domain that you put in the authentication settings here

Channel: Supabase

Views: 19,283

Keywords: supabase, oauth, google, firebase, superbase, rules, RLS, postgres

Id: _XM9ziOzWk4

Length: 8min 23sec (503 seconds)

Published: Wed Feb 10 2021