Setting up AuthJS with Sveltekit 2.0

hi I'm Brad cyert and I make YouTube videos that teach you software development today we're going to take spelt and OJs and push them together let's get started so we're going to start a new spell kit project I'm going to go ahead and take the mpm create uh I'm going to relaunch iterm too apparently sorry about that should be quick wow so quick uh we'll update on my zshell later I'm going to go to my projects folder I'm going to run npm create felt latest uh my app um maybe we could come up with a better name for that so let's do that instead of my app we'll say off tutorial uh it needs to install the following packages yeah that's fine creates felt okay um I just want a skeleton project barebone scaffolding for your new spel kit app perfect uh yeah we're going to use typ script because we're cool we'll use eslint we'll use prettier vest uh um we don't necessarily need this felt 5 preview so we'll install some things now we can CD into off tutorial mpm install and in the meantime while this runs I'm going to go to OJs there is a reference document here um that's really easy to use uh we'll just follow along with this so our install should be just about finished maybe okay we'll npm install at off spel kit and while this is running we're going to go to GitHub and we're going to create a new ooth application um and GitHub is going to be oh canva is now a GitHub secret scanning partner that's cool uh GitHub ooth is what we are going to um authorize our our application with so we will go down to settings developer settings here ooth apps new ooth app uh off tutorial um homepage Local Host heck yeah um so we have an authorization callback URL so we want this localhost 5173 callback GitHub um hit register application it's going to give us a client ID and then it's also going to give us a client secret we'll need both of these in just a moment so we'll come back to our terminal okay everything looks good uh we will go ahead and uh open let's go ahead and open VSS code for this one okay so I'm assuming you have a little bit of understanding of spelt kit um and spelt but if you don't hopefully this won't be too hard to follow along so we have a page route here uh let's go ahead and run this so we'll go ahead and mpm run Dev um I think I think it gave us a command to run it with open D- space-- open let's give that a shot this felt server crashed that's not good okay so we're here we're not going to make this look pretty by any means but what we are going to do is we're going to add a script tag up here um and we can set the Lang equal to TS close out our script tag see the output for more information I am going to try to restart the language server and hope it doesn't crash um because it will be helpful here crashed five times what's going on module not found which one roll up oh oh yeah yeah okay sorry this is a weird issue I ran into this on my M1 um the other day I'm going to go to another spel kit repo and just find the line in my package Json that I need um there's a good chance you won't need to do this but if you're on an M1 like I am and you run into this issue uh you will need to do this um so you can just specify an override to point to the uh wasm node version of [Music] um uh shoot uh roll up could not think of the name of it so something like that uh now if we mpm install okay good to go restart the language server hopefully it doesn't crash this time it did crash five times okay well we'll we'll run without the language server sorry about that uh so we want to do a couple different things um so we're going to go ahead and in our project here we're going to create an environment file and let me just double check the location for that um but I believe it needs to be oh we aren't committing the environment yeah okay so it needs to be right here so if we do a EnV in the rout we can add uh GitHub client ID whoop and paste our GitHub client ID which comes from this and then we'll paste our GitHub secret uh I'm going to go ahead and hit generate a new secret um we will use a password and then I will delete this ooth application right after this tutorial so you don't have to worry about my key being used improperly okay so we have a secret now we can come back here and type get GitHub client secret I'll also try to blur those out um these will be loaded by our spelt environment man I'm really bummed about the language server crashing and then uh we can go back to our documentation here we're going to create a new file under Source called hooks. server. TS and we're going to go ahead and copy and paste this uh some of these things will change right so this isn't GitHub ID this is GitHub client ID and this is GitHub client secret okay and then we'll use those here so GitHub client secret GitHub client ID just make sure the names match um I'm seeing a red underline here because my SP language servers uh having some issues at the moment um but that shouldn't be the case for you if if it shows up with a red underline give it a second and spelt will recompile and generate the types for you okay so so great now that we're here um you there have other examples here in the documentation this is helpful uh if you are looking at any of this stuff you should definitely read the documentation as well and then they give you an example here so we're going to take um this sign in and sign out we don't need that script tag don't know why it grabbed it and we're going to add a button button um on click and we want to call sign in oops sorry we'll make this an anonymous function sign in GitHub oh man yeah the language server not working is really unfortunate uh sign in we'll also make a button here that says sign out and you don't need to pass a provider for the sign out call we should probably make this say sign out and now that we've done that let's go look at our application oh we need to run it again sorry about that okay so this is running close out that other tab okay so we have a sign in and a sign out uh you'll notice that we are getting an error here um I was trying to trigger this again mainly because this generates some new pages for you like an off page um so it's telling us that we need to define a secret there's a couple different ways you could do this you could add it to your environment variable called off secret uh like so and it should look that up for you so let's go ahead and do that so I'm going to go to um versell has a generate D secret. verel doapp sl32 it'll generate you a 32 character secret so we'll use that I'll go and restart the application I don't think I needed to V probably would have reloaded that for me but old habits die hard okay now if we hit sign in it takes us to GitHub we hit authorize we get redirected back to our application we're now signed in that takes care of just about everything and that's that's ooth for Sal kit let's do one more thing um it doesn't necessarily make sense to only show sign in and sign out both uh we should probably show the one that relevant for the user right so we have a couple options here we can do an if um and then maybe we want to do an else and then maybe we want to end that if and we'll do something like this obviously we need to add a conditional to this if so we'll do that in just a second um there's more information on the documentation here about specifically storing the session uh so that it's available um this is actually really nice so they show you here how you can add Source layout Source routes layout uh TS we're going to do this but I just wanted to point out like this is something that they are showing you here um how to do it you can just copy this from the documentation so that file Source routes layout server TS so we do plus layout server. TS oops and I accidentally made that a folder I want a file Plus layout. server. Ts and then we can paste this here event. locals. session okay and this is a little weird like where do where does this come from um this is handled by so it tells you right here custom data that was added to the request within the handle hook where's the handle hook right here um we're setting it equal to the spel kit off so this uh module here is taking care of setting that up for us um so now we have access to the session right and you can see here on page server load you can do things like event. locals. getet session um and then you can you know plug that into your application as well so if we come back to our spel page if uh so we want our page data sorry one second just double checking the here yeah okay so it gets added to the store so we want not the whole thing so we want if page. dat. session is not equal to null let's see what this gives us so we have sign out now if we hit sign out you see that we cleared our session and we can sign in again if we sign in again it actually won't necessarily authorize the application again because the way ooth works we don't need to trigger reauthorization here um because you've already authorized it and we have that in session storage session memory so uh you're able to just reup your session like that and sign in sign out bada bing there you go now you have access to the session so this item right here or this item right here um that that's how you'll access the logged in user and get that session you can get email address any anything oo that you would request um and I just want to take one quick second to plug OJs one more time um mainly because of their massive amount of login providers so if you wanted to allow people to login with coinbase Discord fresh books uh identity server 4 Instagram I I don't know what half of these are to be honest but um plenty of options and these are just the official providers there are hundreds of other unofficial providers so um hopefully this helps spelt kit has been fantastic for me I've been learning it recently and have just been loving everything that I've been building with it OJs makes off so easy it's so nice oh sorry um getting a little excited and I just wanted to share that so hopefully if you're building a spel kit application you can also use OJs put them together and have something work really well for you like I'm having it work really well for me all right that's it have a great day

Channel: Brad Cypert

Views: 2,572

Keywords: svelte, sveltejs, sveltekit, authjs, svelte auth

Id: ridRgYSJ0ds

Length: 13min 27sec (807 seconds)

Published: Thu Dec 28 2023