How to setup Lucia auth in Next.js (in 8 minutes)

so I'm going to try to show you how to set up Luccia off and xjs in hopefully less than 5 minutes I won't lie this is going to be all over the place so pay attention and probably just go look at a code example to actually get this working first thing is let's go to getting started and in your project let's install Lucia awesome the next steps is you need to make a module that you can use in your codebase to verify if you're authenticated using sessions let's make an off. TS file inside this lib directory and paste that in because in this project I'm using drizzle orm with turo lib SQL right so I need to bring in a different adapter let's go to databases let's go to drizzle orm let's find SQL light down at the bottom and notice that you can grab some of this code to get everything set up but before do that let's run impm install and install that drizzle adapter right that's done installing go to the bottom make sure you grab the correct example and we want to basically bring in that drizzle SQL light adapter we can kind of import that there and use it so scrolling to the bottom you'll see that there's an adapter that you use go ahead and try to pull it in make sure you Auto Import the DB that's coming from our schema file and then we also need a sessions and a users table we haven't defined that but there's examples of how to do it right here so let's grab that code go to our schema let's paste it in definitely make sure you export those things so you can bring them in and now if you were to go back to this page you can import your sessions table and your users table and now this adapter is set up with your current schema now I won't lie this is kind of a mess to setup and the docs are kind of all over the place so what I recommend doing is just go to tutorials go to username and password password and let's just follow the app router guide that they have and hopefully we can get this going so basically some of the things that are changing here is just just grab all this stuff and we're going to go ahead and just put it right here this is just going to allow us to get a username when we try to get the session uh you'll see in a second so the next step is we need to create an app sign up. page. TSX let's just go ahead and go and create that make a new file we'll do this here we go grab this page go ahead and Auto Import some missing stuff and then the action we're going to have to also paste in so let's make an actions file and let's grab all this we'll say actions. TS so inside this action file let's make sure we autoimport some stuff this needs to come from just DB and down here this needs to be db. insert we'll say users table values okay and at this point the users table doesn't have a username or password hash so we're going to have to go back to this and we're going to have to add some stuff in let's say username and we'll say password hash all right and now we should be able to insert that user once they register so now we have a signup action but let's just go ahead and Export that so we can use it inside of this page so just go ahead and import this and we're going to delete this one because we don't really care about it uh but we will import the signup action here honestly instead of going through these docs which I find just kind of confusing just go and look at the example project and copy some of this code and and kind of understand it but let's just try to keep going through these docs which are kind of a mess so now that we updated our schema let's do a DB push which will add that session in that user table and we can track the username and the password hash here go down here I think we are using this node RS argon 2 so let's just go ahead inside of our next config we set this up let's open up our next config and paste that in should be good now let's just test this out mpm run Dev and then I'm going to go and open my app so here's our form it looks pretty bad but let's just roll with it for username I'm going to say Bob and then for password I'll just go ahead and say like something random and click continue and hopefully that created our user let's go to our turo database and refresh and see that we have a user who was actually created in our system awesome the next steps is we do want to create a page for signing in so let's just go ahead and grab this and I'll make it on the app login page so make this page go ahead and grab this login code and then same idea we're going to make an action here which needs to run all of this code little bit of clean up because I'm doing stuff a little bit different from how the docs are doing it um but that's fine so scrolling down you'll see that this gets a username and a password from the form data and it verifies that it actually is a valid username and a password and this example is not using drizzle so we do need to kind of like import this and I'll say query dot user table. find first where and then we'll say EQ user table do username is equal to username of lowercase let's just try this make sure you import user table and then also import EQ from drizzle so this Returns the user and if the user doesn't exist we throw an error otherwise we validate the password using the password hash against the password that was sent in if it doesn't match we throw another error and then we can finally set a cookie for the user once they've logged in let's try this and say Bob and I'll say what is and I won't actually finish the password and notice that it doesn't work but if I finish the password click continue I'm logged in if I go to my application over here and click on my cookies you'll see that we have a off session set up so the next step is how do you actually know if your log in or not when your user is hitting your app what you can do is you can grab this validate request example let's just grab this and we are going to go ahead and just put this going make another file here called validate request. TS and paste it in and we don't actually want to import Lucia here we want to find the Luci and import that from the off directory that we already have set up and what this is going to do is check your session cookies and then return your session information if you have a cookie set and everything is valid so now in your app what you can do is I can say const user is equal to await validate request okay and now we'll get back either a user session or we'll get back nothing so basically what you can do if the user is defined then we can simply just show a link and take them to uh a log out page and if it's not defined you could take them to a login page so let's just say login and of course we can take them to sign up or register page if there's no user as well so again this is just the bare minimum to get going and you can style it later on so right now we have a logout button if you click it it doesn't actually log the user out how do you log the user out well you have to basically call a server action to clear the cookies and the sessions so scrolling down they have an example of how you can do sign out let's just go ahead and grab this and inside the app I'm going to say actions. TS go ahead and paste this in and we're going to go ahead and just make our own special little action here which we can call from wherever we want like this and so if you call this log out action that should sign the user out by clearing out their cookies so going back to this logout link I think it would make more sense if this was actually wrapped in a form like they have in this example so let's grab this form here and let's just go ahead and call that logout action if someone were to click this form and let's verify this is all working so let's go back to our app go ahead and click sign out and notice that it does redirect us back to the signin page but now if I go back to the main page it says sign sign in or sign up so I can kind of go back to the sign in or the sign up let's try again we'll say Bob and we'll say what is up I'll click sign in and now we actually have a session set and we can change the content based on that so honestly that was probably a lot more than 5 minutes but there's a lot of stuff going on you have to manually do when you opt into using Lucio off but again it gives you a little bit more fine grain control of how you can set up your authentication the main takeaway is that once you have this all set up you want to use this validate request on all of your server actions and all of your react server components to know if the user is authenticated or if they're not honestly making this video makes me want to just make my own library because this is actually quite a lot of work in hacking stuff together I think having some type of authentication Library built specifically for drizzle and xjs would make this much easier because now you have to go and pick and choose all this various stuff but anyway I hope you guys enjoyed have a good day and happy coding

Channel: Web Dev Cody

Views: 6,640

Keywords: web development, programming, coding, code, learn to code, tutorial, software engineering

Id: cCxobhR70vE

Length: 8min 19sec (499 seconds)

Published: Thu Jun 27 2024