Next-Auth on App Router - Solid Auth, Super Fast

authorizations in login are really just the last thing you want to think about when you're building out your application you just want to get it done and get it out of the way have people be able to log in and then get into the core of your application and then unique value that it provides so I'm going to show you how to use the next auth library with your next JS app router application and get authentication and login all set up and ready to go in just a few minutes it's going to be great I'm going to show you how to do the initial setup I'm going to show you how to do protected routes I'm going to show you how to do the server actions which are new to app router make sure that you get the user ID in that we're going to do user ID inside API routes we are going to get those API routes from the client we're going to get API routes from the server I'm going to show you basically everything that I can think of when it comes to next auth to make sure that you have every scenario covered and of course all the code is going to be available to you for free in GitHub in a link right down below hello but before we get into it I am doing a full course on next JS app writer called Pro next JS go to pronextjs.dev for more information to sign up for a mailing list you get tips and tricks and articles all for free before we even launch the course and I'm so excited to say that we will be launching in just a few weeks a full tutorial on how to do client State Management that includes Redux Joe Tai sushdund all of it it's really great in the app writer we've done weeks of research on this to make sure that it is Rock Solid and ready for you to take to production but in the meantime course let's talk about next auth and xjs let's get right into it [Music] the first thing we need is an xjs application to work on let's go create that right now we'll call this app writer off using next off we use the source directory and of course the app router and we'll bring it up in vs code so right away I'm going to add the next auth Library so what is next auth now next auth is just a library it doesn't actually have its own authentication Service there are a bunch of authorization providers that you can connect to using next auth let's go take a look at those if we go into the providers section you can see all of the different providers that you can use you can use one or more of these providers in your application that means right out of the box with just a few credentials that you create on your side you can connect to GitHub Google Twitter whatever you want in terms of authentication you can do it right through here and then you get as a developer you just get the user ID and the Avatar and the name and you're good to go and you don't have to worry about it anymore so what we're going to do is we are going to use this with GitHub in this example now the next thing we want to do is create a EMV file in our project that's we're going to have the environment variables that we are going to then send to our code that we have embedded in our app that connects to next auth we want to use environment variables for that because we want to have two different sets of environment variables one for local and one for production all right let's get into it so I'll create that.env file and in there we're gonna have three pieces of information we're gonna have the next auth URL that's the base URL for application obviously that's going to be different in production than it is in our local environment in this case it's on localhost we're gonna have a next uh secret that's just a secret that we need to come up with randomly so to do that we use openssl so over here in the terminal I'll use random from openssl it'll just create this kind of random code and I'll just drop that in there you can actually use any method you want this is kind of the one that folks tend to use and then we need our GitHub ID and our GitHub secret so we need to go over to GitHub and create an oauth application that'll give us those values so I'm over here on GitHub I'm going to go to my settings and once I'm there I'll go over to developer settings then into oauth Apps and I'll register a new application we'll call this app writer using next off for the home page URL I'll just use localhost easy enough and then for the Callback URL I'll use API off and then call back and GitHub so that's actually going to be an endpoint that we're going to create in our application we'll create that really soon the interesting thing about GitHub in this case is that you're going to actually create two different oauth applications one for development and one for production because you can only have one authorization callback URL per oauth application but that's just on GitHub different vendors do it different ways so let's go and register application so now we have our client ID by the way if you see any credentials here by the time you see this video they will be invalid anyway but hey if you want to put into the comments that I leaked credentials go for it it just helps the engagement all right let's go and take that client ID drop it in here is our GitHub ID and we'll want to create our client Secret by generating a new client Secret once it's generated that you copy it paste that in there for the GitHub secret and we're good to go now let's go create that API route Handler so go and create a new file we'll call Api auth and then within that we'll put some brackets and what we want is everything after API auth is going to be assigned to nextdo so we'll dot next auth after that route.ts so that's created that file as well as that directory structure and into there we're going to bring in next to auth we'll also bringing the GitHub provider and then we'll create the options that we're going to send to nextdoth to initialize it now in this case we're just going to specify that we have a GitHub provider and we're going to give the client ID and the secret there's a lot of other options you can put on here but this is just what you need to get going next we'll create a Handler using next auth that's going to handle any get or post requests so we'll then export that Handler as both get and post let's hit save and try it out so we'll start it up with pmpm Dev then we'll go over in the browser and we'll go to our home page and we see that we have our basic app going no problem we haven't made any changes there so that's what we expect now let's go to API off and then providers and we can see that we have our list of providers just GitHub in this case all set up and good to go so we can do now is we can do sign in holy moly look at that now we can sign in with GitHub we say we want to authorize and now we're being redirected back of course are we authorized yes we are but we don't know yet because we actually haven't used that session so the next thing to do is doing create a session and a session provider that we can use to see if we are logged in but yes we are logged in so good so far so the next thing we're going to do is create a session provider that's gonna share the session State as context throughout the application so I'm going to go create a new directory called components and within that session provider and of course this is going to be a client component because it uses context now the really cool thing about next auth is that of course it already has a provider it's just not marked as a client component so let's bring it in and then just re-export it as the session provider we're just going and adding on use clients or telling next that this is a client component even though we know it is because it's using context okay let's go bring that over into our layout and the next thing we want to do is bring in get server session from next off that is the server side session fetcher so we'll now go and invoke that in our layout so we need to await get server session because it's a promise so we'll need this to be an async function but otherwise we're good to go now we need to use that session provider and wrap our children in it so now our session is available to any client component through that session provider context now just clean this up a little bit more I'm going to go and wrap our children in a main with a little Tailwind on it now I do want to have it so that we have like a nav menu on the left hand side and we have some content on the right hand side because we're going to have a few different routes here they're going to play with so let's go build that nav menu so create a nav menu component and I'll make it a client component and bring in link because we're gonna be using a bunch of links navigate around because it's a nav menu and they're also going to bring in sign in sign out that's going to give us the URLs for sign in and sign out as well as use session which is what we're going to use anytime we're in a client component to get the current session from that session provider all right so at the top of this nav menu let's create a off button and this is going to use use session to go and get the session and if we have a session then we will say that who we are we'll give it the username and we'll say that you have an option to sign out if you're signed in or we say that we're not signed in and then we have a button that says sign in and finally we will create our nav menu by just having div with that auth button in it obviously we're going to add more links as we go let's hit save and let's bring that into our layout be import it and then we use it down in the main all right so let's go take a look over in page and there's a whole bunch of stuff in here that we can get rid of seems to get bigger every time I look at it and for the moment let's just put in home all right let's hit save now let's have a look all right looks good I did change it to a dark color scheme so it wouldn't blow you out your eyes but there you go so now I am logged in I am logged in as Jack Harrington and I've got our home over here so yeah when we did the API uh sign in everything worked awesome so let's sign out and then sign in again and see that whole flow and there we go how easy is that it is insanely easy okay so the first thing we want to do is figure out how to use the session in an RSC we actually already know but let's use this home page as our test page for an RSC get of the session so to get the server session in a react server component or RC you're just going to bring in get server session from next off and then just like we did before we're going to call a wait on get server session so let's make this an async function and then we'll get the server session now is this formatted up a little bit say we get the server session result and then we give the name otherwise we save it we're not logged in let's try it again and there we go so we get this get service session result is Jack Harrington I can sign out and now we're not logged in I can sign in again and there we go Jack Harrington cool now most likely the next thing you're going to want to do is create protected routes in your application those are routes that you can only use if you're logged in otherwise we send you to the login page easy enough so let's go build a out a protected route so I'll create a new file in here called protected and then create the page.tsx file inside of that now bringing our friend get server session from next off and create our protected route functional component and call get service session and then we just look to see if we have a session or not well if you don't have a session then what do we do well we used redirect and we'll just redirect the person to the sign in page just like we did before but if they do have a session we just say that they are on a protected route that's awesome okay so let's go over and try this out we'll go to slash protected and it looked at my sessions saw that I had one and then everything is cool but let's try it again lets you sign out now that we're logged out let's try it again and we automatically get redirected to the sign in page so easy now we're going to have a couple of these different examples so let's go and add on these routes to our nav menu and go back up to the top here and I'll begin use path name so we know what path we're on we'll create some Tailwind styling for active and inactive routes then down here we'll get our path name and then I'll just add a big old unordered list with a bunch of our links so it'll just look to each one and says it's at the current path if it is is the active route otherwise not let's hit save and take a look and now we've got our different things over here we're in the protected route currently looks good go back to home awesome Okay cool so obviously the next thing you want to take a look at is server actions according to our nav menu let's go build out a server action example to see how you get the current session inside of a server action so the first thing we're going to do is enable server sessions on our server so let's go to down here to our next config go into next config go into experimental and say that we want server actions to be enabled let's hit save rerun okay so let's create that server action route with our page in it 'll bring in git service session and create our server action page now we're going to create a server action so that is a function that the server is going to expose to clients so let's create one called who am I so this async function is a server action because we use use server in there and it's just going to get the session and then it's going to return the name if there's no name do we say that we're not logged in now we need to have a way to call that from the client so we need to have a client component that takes that server action and then actually calls it so let's call that the who am I button so we'll create a new component in here called who am I button that who my button is going to take it who my action that who my action that we just created that is a function that returns a promise to a string we're then going to take that string value that we get back and store it in name once we click on the button easy enough let's hit save go to page bring in our who am I button and then we'll just invoke that with the server action that we just created let's hit save try it again go to server action and it'll say I'm Jack Harrington how cool is that if I sign out and then try it again who am I I'm not logged in how cool all right let's sign in again awesome all right next we want to know is how to do protected API routes so to do that let's go and see how we do the server session in an API route so over in our API directory we'll create a new file called who am I and that's going to be a route Handler so we'll use route.ts now here we're just going to respond to a get request you can do API who am I and we're going to get back the name as a Json object and that's going to have our current name in it all we're going to do is just respond to get we'll get our server session and we will just use next response Json to return it it's that easy if you want to go and send back an unauthorized error message or whatever of course that's completely up to you in this case I just want to know if I'm logged in or not now let's try this first on the client by creating a new route called API from client and we'll make a page of course this page is going to have a piece of State called name and then it's going to use a use effect that only Launches on that initial load because it's an empty dependency array then calls fetch on that API route that we just created and then puts the result down in the TSX let's hit save and try again so go to API from client and there you go name Jack Harrington again sign out not logged in sign in again and there you go perfect now finally because I know somebody's going to ask for it I'll give you a way to do that exact same request but from an RSC so we'll create another route called API from server then I'll make the call back to ourselves by calling logos 3000 of course has to be an absolute URL because you're not calling this off the client and then we'll get the Json from that let's format up that result and give it a try all right we'll go from the server and now we are logged in but it's saying that we are logged out so why is that well what's happening is we are getting an authenticated request for the route API from server but then that on the server that route Handler is making your request back to itself but it doesn't actually have any of the headers that we had from before with the authentication so how do we get that well we can now go get the headers from next headers and then we pass those headers on as part of the fetch let's hit save try it again and it looks good awesome all right well hopefully that cover is every single possible scenario that at least I could think of when it comes to basic authentication in an xjs app writer application if there are more ideas that you have please put those in the comments section right down below in the meantime go check out that pronexjs.dev sign up on that mailing list and you'll get access to those tips and tricks and that really cool client State Management tutorial that I'm putting together right after this video right now I'm so excited in the meantime of course if you like this video please hit that like button it really helps the algorithm and also hit the Subscribe button and click on that Bell and be notified the next time a new one of these Blue Collar coders comes out

Channel: Jack Herrington

Views: 89,774

Keywords: nextjs app router, next js app router, nextjs server actions, server actions next auth, next auth, nextjs server action auth, server action auth, nextjs 13.4, next js 13.4 api, next js router, nextjs react, github actions, next server actions, react server actions, next js server actions, nextjs, next js, next.js, nextjs npm, vite, reactjs, react.js, react app, redux next js ssr, next 13 server actions, server actions next js, server actions nextjs 13, server actions

Id: md65iBX5Gxg

Length: 17min 20sec (1040 seconds)

Published: Tue Sep 05 2023