Next-Auth v5 is Almost Here! Learn it Fast on the NextJS App Router TODAY!

one way to handle authentication in your nextjs app router application is to use the open source next o Library it's coming out in version five pretty soon so let's take a look at how to add that to a xjs application right [Music] now all right I've started off with a stock nextjs app Rider application all I've done is specifi that I want Tailwind add Shad CN and a button and then change the homepage just as simply read homepage so now let's go and add next doth to our application now we're here in our vs code I'm going bring up the terminal stop the app and I'm going to add next off of beta now just to make sure I'm going to keep this repo up to date with all the things as I put it onto GitHub and give it to you I'm going to say that I want the latest next and the beta off and that's going to give us version five of next o currently all right let's install that next thing we're going to do is configure off so I'm going to put our off stuff in a new file at the top level of source called off it's actually a directory and then inside that index.ts that'll mean that I can do at SL off anywhere and get access to this now inside that file I'm going to import next o I'm going to bring in the configuration specification and I'm going to create o options which is our next off configuration I haven't listed any providers yet we'll get to that in a second I'm going to list a base path for so I'm going to put everything on/ API slof I think by default it's SL off but I'm going to put it on API off so I can show you to put it wherever you want so I'm going to export that as a constant because we use it in other places and also go and specify as the base path in our configuration I'll need a secret we'll get to that soon but at the end we're going to call this next oth function that next doth function is going to take that options configuration and give us back handlers we use that to handle the API it's going to give us an off function we're going to use that in a lot of different places that's going to give us our session then it's going to give us two functions sign in and sign out that we'll use for sign in and sign out so let's deal with the next off secret let's go back into our outline and then create a new file for the environment so EMV DOD development. loal is what I use they specify the way have an XTO secret but how are we going to create it let's go back over to our terminal and we use an open SSL command to create a random base 64 string so on my Mac I'm going to use open SSL and then I'm going to route that through PB copy PB copy just means that I want to put in the paste buffer I'm going to just paste it into here and that's what that random string looks like now that all set up let's go back into our configuration and now we want to go set up any kind of providers now I would normally show off something on GitHub here and that is one of the many providers that you can use you go back over here to the next off site you can see the full list of providers on the Le hand side there and it is massive but we're not going to use any of those we're just going to use some local credentials and an email password so to do that I'm going to bring in the credentials provider and then down in this provider section I'm going to add that as one of the potential providers so I'm specifying the name of the provider's credentials and also that the credentials that we're talking about are the username and the password you can specify whatever set of credentials you want which is really cool next up we have to specify a call back in this case authorize and it will give us the credentials that the person's entered and then we get to check it against whatever Source we want to check it against we're just going to go and create a local list of users those users will have an ID a username a name a password an email I'll just create two of them test user one and test user two and in both cases the username is going to be like test one and then pass next up I'll use a simple array find to just find the user that has that password and then I'll either return ID name and email or I'll return null now that we got our provider all set up next thing we need to do is deal with API off API off are the API route endpoints that are going to be called when you sign in and sign out and all that good stuff so we go over into source app and then create a new set of directories called API and then off that's where I decided to put it but you can put it in off if you like then we're going to create an xjs catchall route that means we're going to put in bracket dot dot dot next off that's going to take anything that's after the API off and put into a parameter called next off we're going to add on route. TS and there I'm simply going to import the handlers from off and then export them as get and post it's that easy let's it save and now let's go and bring up the app because we should be able to log in so we're back on Local Host 3000 and now we'll just directly go to/ API off sign in there we go now we got our form let's give our username test one password is pass and there we go we are logged in I guess let's go back to the homepage and now what do we do to go and see if we're logged in well we need to get the session in an RSC so that's the first thing we're going to do is go and get the session in a react server component so let's go into our homepage and right at the top here we're going to bring in O from at/ off with that we can simply await off but we're not an async function so let's make this an async function so now we've got our session and down below homepage let's just go and Jason stringify that session and see what we got all right looks like we're signed in that's awesome now let's go to API sign out let's sign out go back to home and we can see that session is null how easy is that well it's not particularly easy for the user so let's go make a nice button that folks can use to log in and log out so back over in our o code I'm going to go and add a new directory for some helper server actions we'll call that helpers.com here as we called Next doth we got sign in and sign out we're going to import those as na sign in and na sign out for next off and then we're going to wrap those in server actions sign in and sign out so that's going to turn them into server actions that we can call from the client now let's go create our off button and we're going to create this in two pieces so in the app directory I'm going to create the client version of the off button so going to call that off button. client. TSX this is a convention I've been seeing more and more of lately where you've got a component say off button and you've got two different files associated with you got off button. server. TSX that has the server part of the component that's going to go act on the server side and then you've got the corresponding off button. client. TSX that handles the client side of everything it's just a nice way to indicate that you really can't use one without the other so we're going to work on the client side first so we'll create offbut button. client. TSX we'll bring in the signin and sign out server actions that we just created over in off helpers we'll also bring in use session we got to connect that to session provider that's going to be over in our off button server we're bring in the Shaden button and then we'll use those in our off button implementation right at the top we'll use the use session hook to get our session and then we'll just switch based on whether we have a session or not if we have a session then the button will be for sign out if we don't have a session then the button would be for sign in now let's go create the server version of this so we create the off button dos server. TSX first up we'll bring in that session provider that's going to drive the use session in our client component then we'll bring in base path and o o is going to allow us to get that session and of course we'll bring in our button client in the react Ser component button code we're going to await that off that's going to give us our session and then we're going to do something interesting we're going to take a look at that session we're going to see if we have a user and if we have a user then we're going to trim that record down to just the fields that are safe on the client so in this case it be name and email we don't want to leak anything else out to the client that might be compromising down in the jsx we're simply going to invoke that session provider we're going to give it our base path to override the default one and then we're going to give it our session and then we're going to invoke our off button client okay let's go over to our home and actually use this all right we are signed out so let's sign in we'll sign in as test two this time and there we go so easy now let's sign out and yeah it's great we do get that but I do want us to go to the signin page if I sign out so I'm going to just go and tweak that a little bit go over to the client over here and after I sign out I will just ask for a sign in super easy let's give that a try so I'll sign in sign out and that looks great now currently this homepage Works in both authenticated and unauthenticated modes what happens if you have a sub route you want to make sure is always authenticated before you hit it let me show you how to do that so we'll create a new route within app we'll call it test route of course we'll create a page. TSX file and then inside of that I'll create a simple test route that just gives us our username using off so I can just navigate to that and now we've got our test route and of course I'm authenticated so I see that I've got test two there what happens if I sign out if I go back to test route I can still access it so let's go add some middleware and that middleware will ensure that if I try and hit test route directly it'll make sure that I'm authenticated and if I'm not authenticated it'll send me right to the signin to do that I'm going to go over my source directory and create a new file called middleware TTS and I'll Define some middleware so I'm going to bring in off and base path from that off that we created I'm going to Define when the middleware actually fires by exporting a config that's a nextjs thing the config gives a matcher and it says if you match this then fire the middleware it's a little interesting in this case we're actually going to do the inverse we're going to say if it's anything other than API next static next image or the fave icon then go and use the middleware inside the middleware we're going to look at the request we're going to see what the URL is next we're going to go and see if we are authorized if we're not authorized and we're not looking at slash then we're going to want to send them to the signin page so we format a new URL with the base pass so that's API off then sign in and then the Callback URL which going be where to go after we actually sign in all right let's give it a try so go back over here and we're automatically already to our sign in but let's give it a try anyway so let's do test route and boom we're back at signin we can see that we've got a call back URL let's let's go and log in and now we're not only logged in we're also on our test route now let's take a look at authenticating different ways that a client can call back to the server we'll start with server actions so over in our test route file I'll create a new server action inside of here called on get user action it's a server action because it's defined as an asynchronous function and it's got used server as a pragma in it all it's going to do is go and get our off and then give us back our username so let's create a client component that will invoke that server action I'll call it who am I server action and all this component is going to do is take that server action as a prop then going to invoke that function inside of a use effect on Mount and store whatever comes out of it in state and then display that state let's go bring it into our page. TSX and invoke it of course we need that action on there so let's go and add that user action as a prop and let's have a look and there we go now of course that Ong get user user action could be defined here or it could be defined over in another file like we did with sign in and sign out totally up to you another way that we talk to the server is through API routes let's go and create an authenticated API route so we an API I'll create a who am I API route by doing who am I and then route. TS and then into that I'll bring our handy o function in this case I'm going to export a new G that get is going to be defined by wrapping an async function which is the body of our git in off and off is then going to pass us as one of the parameters off so we get our o and we'll pick out of there the name and return it as Json so if I were to hit this right now just out of the browser you see that we get back to Json object with our username all right let's go back to our app and try it out from the client we'll create a new component called who Am my API this is going to do exactly the same behavior as the server action version except that instead of going to the server action it's going instead call Api who am I let's bring that into our page and then invoke that said save and now refresh and that looks great if you're wondering why we don't actually have to bust the cash on this because normally a get on a get route would be cashed by nextjs the reason is that our implementation of get in this case because it's using off is hitting up the request and whenever you hit up the request inside of a get endpoint it's going to not cach the results of that so one last scenario here with the QI API client here we're doing it on the client what if we want to have a react server component that also makes an authenticated request back to itself how do we do that let's go over in our test route and create one last one who am I RSC and in there we're going to create a react server component we're going to call back to Local Host 3000 with who am I the secret sauce here is that we're going to pass pass along the headers from the client request that we got in we're going to get that with next headers and so that's going to give us our authentication information proxied through so let's try that on our page and that works just fine so let's go have a look at that I'm not actually a huge fan of doing this specific thing calling back to myself I think if you need to get the information that's in API who am I you should just do that directly and if you have a function that's invoked on the API side you should just invoke that exact same function inside the RSC but if you have a case where you want to take those same credentials and call back to say a microservice behind you this is a good pattern for that well I hope you enjoy this quick look at how to bring in next off five into your appar application if you have any questions or comments be sure to put that in the comment section right down below the code as always is linked in the description while you're in the description click on that pron nextjs dodev link that'll take you to my Pro nextjs course if you sign up for the email list you'll get two free tutorials one on State Management and one on forms management I'm working hard on that Pro nextjs course every day and I can't wait to bring it to you really soon in the meantime of course if you like this video hit that like button if you really like the video hit the Subscribe button and click on that Bell and you be notified the next time a new blue collar coder comes out

Channel: Jack Herrington

Views: 28,647

Keywords: react 19, shadcn, next, nextjs react, nextjs app, nextjs server, nextjs14, nextjs app router, nextjs route, nextjs auth, auth js, next auth session, next auth v5, nextauth, next auth jwt, next-auth, next middleware, react auth, next auth app router, next auth, next js app router, nextjs router, app router next, next router, app router api, next js app router api, server action auth, api routes auth, next js 14, nextjs 14 auth, next js 14 next auth

Id: z2A9P1Zg1WM

Length: 14min 53sec (893 seconds)

Published: Mon Apr 29 2024