Supabase OAuth with SvelteKit (Discord, Google, GitHub)

in this video we're going to learn how to add social auth to our Super Bass and spell kit application by the end of this video you'll be able to log in users to your app using GitHub Discord and Google we'll also be covering how to handle social off from both the server side and the client side and if you haven't seen my previous video covering Super Bass and spell kit authentication I'd highly suggest you check that out first as we'll be starting out where we left off there in this video so without further Ado let's go ahead and get started alright so if you watched my previous video on spell kit and sub-based authentication this will look very familiar we just have a very basic login form we have the option to log in with email and password and then I've added the GitHub Discord and Google buttons here underneath which we are going to use to sign in with GitHub sign in with Discord and sign in with Google so let's start off with GitHub for the time being and the reason I chose these three is that I feel like these are some of the more popular options here but really the process is very similar for any of the social auth providers that you'd like to use so before we can do anything else we really need to go into our swim based admin dashboard we need to go to Authentication we need to come down to providers this is where we're going to be able to enable the different providers that we want to use to authenticate users to our application so we're going to start off with GitHub so we'll just click here on GitHub and it's going to give us a redirect or a callback URL that we need to copy so let's go ahead and copy this for the time being and then we'll head into our GitHub account and we need to go to github.com settings developers and we're going to go under the oauth apps Tab and then we need to register a new application we can name this wherever we want we can say spell kit Super Bass demo the home page URL this can be the URL to your actual application in this case we're just going to give it localhost 5173 and then the authorization callback URL that's the one that sewer base provided us here inside of this redirect URL input so then we just have to click register application and now we have an application created successfully so it's going to give us a client ID and client secret so we'll take this client ID here and we'll pop we'll paste this into the client ID field and then we'll go back here we'll generate a new client Secret and then obviously you want to make sure this is not shared with anybody copy this here and then paste that into the client secret box now we can click save and now we have officially added GitHub as an option to log into our application so let's go ahead and set up the code for that on the back end so let's go into our vs code and if you watch the previous video you should be familiar but if not it's nothing nothing too crazy is going on here so currently inside of our server side action our login action we're just taking in the body from the request.form data and then we're logging the user in using the sumibase SDK and then on our actual page.spel we just have a form here for the actual email and password login and then I've also created another form here with these different buttons within it and we're going to do a cool little trick here where we can send information to different endpoints about this form and based on that information is how we're going to actually authenticate the user so this will make sense in just a second so the first thing I want to do is add method equals post here to this and then what we can do is we can come to each one of these buttons here and we can say form action equals and we'll say question mark slash login so the same action that this form is submitting to right which is going to hit our login action here and then we can pass an additional search param or query param into this action which we're going to parse out on the server side so let's just say login and provider equals Google or GitHub for this one and then we can do the same thing for each of these other ones as well and then just change the provider so we'll say Discord and Google okay so now on our page.server what we can do is we can take in in addition to requests and locals we can take in url and then at the top we can just say cons provider equals url.searchproams.getprovider and if you're using typescript this is going to be of type provider so we can say as provider which comes from superbase JS and then we want to check to see is this actually even there so is provider provided if not we just want to run the regular login process if there is a provider we obviously want to initiate the social auth login so what we can do is we can say if provider so if we didn't provide this at all then this would be undefined right and what we can say is we can say cons and then destructured data and error as error equals a weight locals.sb.auth DOT sign in with oauth and then for provider we'll just pass in the provider that we pulled out and we can say if error we want to return or I'm sorry if error we want to return a fail of 400 and we'll just say message something went wrong now of course we went to console log that error here on our server so we can see it and then else what we want to do is we want to throw a redirect to data.url so let me just console log what data is first before I go about throwing this redirect so I can explain why we're doing it I think it's important for you to know so now if I come into my application here and I click on GitHub and then we go into our BS code here we'll see that data contains a provider and a URL so this URL is where we want to actually redirect our users to in order for them to initiate the login process with GitHub okay so by throwing this redirect here we're essentially just taking care of that on the server side we're also going to implement this on the client side as well but for the time being this is how this is going to work so we just throw redirect with the URL that's provided and if you noticed up here they also had provider equals GitHub right so this isn't something that we provided Super Bass this is Super Bass is URL to log in with GitHub we are just throwing that redirect from the server side so the user is able to go there and sign up so this will make sense in a second so let's go over here and let's click on login with GitHub again and now you'll see that we're asked permission to authorize folkit super based demo if I authorize this we will now be redirected back to our application and you can see that we are now logged in with our GitHub account this is the email address that I use for my GitHub account here the test one and then if we look at our suabase authentication tab here our users we can see that we have Hunter byte Test Plus GitHub gmail.com with the provider as GitHub it says the created date and all that good jazz so now we have officially created a user using GitHub as our provider so now let's go ahead and add the ability to sign in with Discord so let's go to our Discord if we go to discord.com developer applications make sure you're signed into your Discord account I have a test account here set up for the purpose of this video we want to create a new application we can give it a name I can just call this Super Bass demo it's going to have some general information here we don't have to fill anything else out on this page here but we want to go to oauth2 and now we you can see that we have a client ID and a client secret so again a very similar process if we go into our authentication Tab and providers go to Discord we enable it and then we copy this redirect URL we go back to our Discord portal here and then we add a redirect we're going to add a redirect to this and I'm also going to add a redirect to localhost 5173 I'm going to click save changes I'm going to copy this client ID and paste this in here and then I'm going to I'm going to reset the secret copy this and then also paste that here as well and click save all right so now we've added Discord so let's go back into vs code and figure out how we can wire this up a bit better so we know that we already have the front end stuff set up here as far as you know getting the right information back over to the server side so we know which provider to use but what we want to do now is really right now if provider exists then it's going to try to run through this right but technically provider could be anything right I could pass whatever I wanted as provider it doesn't mean that we necessarily have that provider we support that provider so what we can do here we can set up a little constant array up here and we can say oauth providers and we'll just say Google discord and GitHub and these can be the options that are allowed when passing in providers so what we can do is we can add a check here so if there's a provider if not oauth providers.includes provider then we want to return a fail of 400 and we'll pass in an error as we'll say provider not supported this way if a provider that we do not support is passed in we can at least render something back to the user you know we can take advantage of this fail here and show some type of error message if we wanted to letting them know that hey this provider is not supported you must use one of the supported providers so now the provider should be one of these here inside of this array and we can remove this console log data here for the time being and the data.url is still going to be there so everything else is going to work the same way so really once you have this set up properly you really should only have to modify your oauth providers array here to add the additional providers and then obviously setting it up on your super based backend to accept those providers adding the secret adding the ID and it's pretty easy to add as many providers as you would like so now if we go back into our application and we click on Discord to sign in now and I'll get that super based demo once accessed your Discord account they can access our username Avatar and banner and your email address so we can authorize this and now we can see that we are now signed in with Discord and if we go back to our users we now have Hunter byte test plus d chord at gmail.com and the provider is Discord so now let's go back to Providers and we'll add our final one for this video which is gonna be Google so we'll copy this redirect URL here and what you need to do is you need to go to the Google Cloud console so console.cloud.google.com and then what you want to do is we want to type in oauth here in the search bar we can see that we have oauth and consent screen we'll click on that and we need to create a project so let's just create a project now we'll call this super based test project and doesn't belong to an organization that's okay case that just takes just a second to start the project so now we can do is we can click on external here for the user type and then click on create we can provide our app name the support email I'm just going to use the email that's associated with this Google account you can of course upload a logo if you wanted to I'm not going to and then we can add a link to the home page again these are not required but they are highly recommended if you are you know obviously publishing this application you want to include the privacy policy in the terms of service and we can also add an email address here I'm just going to add hunt by test at gmail.com for the developer contact I'm going to hit save as for Scopes this is where we can ask for permission to authorize specific things on that user's account really we just want the email and the profile so any of the first name last name profile picture and their email address so we can just click these two here and click update and then we will save and continue now we can add a test user here for the purposes of this application being in testing mode right so I can just add a test email that we're going to be using so we're going to use Honda bytest gmail.com and then we'll hit save and continue it's going to give us our summary and then the next thing we need to do is we need to go do credentials here on the left and we want to create credentials and we want to create is an oauth client ID so the application type is going to be a web app and then we can just name this superbase spell kit client so under authorized JavaScript Origins that's where we're going to add in HTTP colon localhost 5173 or whatever the root is of your application wherever it's running and then we have the authorize redirect Uris so we're going to add both localhost 5173 as well as our super based callback can be copied from the Google redirect URL field here so it does take five minutes to a few hours for these settings to take effect normally it takes just a couple seconds for me but it may take longer for you so if it doesn't work right away be sure to wait a few minutes to make sure so we'll click on create now you can see that I get a client ID and a client secret so I can copy these here and paste them into smooth base click save now we have successfully added Google as well so now if we go back into our application it may not work right away but let's just try it out go to login and go to Google we can see that we now have the ability to sign in with Google if we click on the test user here that I was that I created we're now logged in with Google if we go back into subase here go to users we can see we have users from both email GitHub Discord and Google as the different providers all right so now we can go back to the client side and add some Progressive enhancement to improve the way that this works right so we don't necessarily need to go to our server to log into user with GitHub Discord or Google if JavaScript is available in the browser I would like to just go straight to supabase and request to log in rather than having to go to our server first right but now that we have the Baseline covered we know it's going to work regardless let's add some Progressive enhancement so let's just say cons sign in with provider and we'll this will be asynchronous and we'll take in a provider which is going to be of type provider which we can import from supase again and what we'll do is we will say const data and error it's very very similar to the back end except we're going to say sewer based client dot off DOT sign in with oauth rather than the SB right because this is the client the JavaScript client that's running on our browser and the locals.sb is the server side client okay so now that we have this function defined here what we can do is we can just set up a submit function so we can say con submit social login it's going to type submit function and we want to take in a couple things we're going to take in url or I'm sorry we want to take an action and cancel and then we can set up a switch statement here so we can say switch based on the action.search params.get provider so the first case we'll do is going to be Google so we'll say case of Google then we want to await sign in with provider and we will say Google and this needs to be asynchronous here sorry about that and then we'll break case of Discord wait sign in with provider Discord break and we have case of GitHub oh wait sign in with provider GitHub and then break and then default we'll just break so you can either do it like this or you could just check to see if this is again a part of the providers that find the providers here as well and then just run you know passing provider here to this but it's just another way that you can do the same thing and then after this what we want to do is I'm going to say cancel so we don't want this to actually submit to our server right we're handling things on our client side we don't need to interact with our server so we're not going to actually make a form submission there so we need to run cancel here and then we'll save we'll come down to our second form here we'll say use enhance that needs to be imported from apps forms and we'll say equals submit social login so remember action has the URL is a URL object that will have these search params that we pass through and we're looking for the provider which does the same thing that we're doing here right and then we're switching based on the value of that provider so if it's Google we're going to sign with provider Google and so on and so forth then we're going to cancel and of course you'd want to handle some type of errors here I'm not going to go too far into that in this video I've done a ton of videos on this already but let's just test this out so let's go into our application let's log out and then just to show you that we're not hitting our server we can go here we can console log hit login action and go into our application here and click on login and then we'll just start out with the GitHub so as soon as I click on it you can see I'm logged in if we go to our server side code here and we open up our terminal we can see that we did not hit this log in action so the same thing would work for any of them right so we can log out and log in with Discord works just the same way and then last but not least we can log in with Google and you can see that we are now logged in so that is how you add social auth to your super bass and toolkit application if you found value in this video please don't forget to like And subscribe it greatly helps the channel and if you have any questions feel free to join the Discord and ask them there or leave them in the comments down below I appreciate you so much for watching this video and I will see you in the next one [Music] thank you [Music]

Channel: Huntabyte

Views: 14,098

Keywords: sveltekit, sveltekit tutorial, sveltekit crash course, sveltekit load functions, sveltekit endpoints, sveltekit routing, sveltekit form actions, sveltekit forms, sveltekit actions, form actions sveltekit, +server, api route svelte, sveltekit API routes, svelte routes, layouts, sveltekit layout groups, advanced layout sveltekit, supabase sveltekit, supabase auth, supabase oauth, supabase github login, supabase login with google, supabase login with discord, supabase socialauth

Id: KfezTtt2GsA

Length: 17min 30sec (1050 seconds)

Published: Mon Dec 19 2022