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

You can add authentication to your NextJS App Router in just a few minutes with next-auth, let me show you everything you need to know.
👉 Upcoming NextJS course: pronextjs.dev
👉 Code: github.com/jherr/app-router-a...
👉 Don't forget to subscribe to this channel for more updates: bit.ly/2E7drfJ
👉 Discord server signup: / discord
👉 VS Code theme and font? Night Wolf [black] and Operator Mono
👉 Terminal Theme and font? oh-my-posh with powerlevel10k_rainbow and SpaceMono NF
0:00 Intro
1:53 Project Setup
3:22 Next Auth Setup
6:49 Using The Session
10:06 Sessions In React Server Components
10:53 Protected Routes
12:31 Auth In Server Actions
14:19 Auth In API Routes
15:33 Proxied Auth In RSCs
16:38 Outro

[@syntheticquimera6642]

You're the best! Dealing with all the changes that NextJS constantly goes through can be a real headache, and often the documentation doesn't provide much help. But you explain things so well!

[@gorkemgok9313]

I love how straightforward this tutorial is. For the last three days, I was trying to figure out how to use this library. Documentation is not clear with the use of SessionProvider. But Jack, you are the man.

[@mazen.alsenih]

Thank you Jack, I just discovered your channel yesterday, and I'd like to thank you for all great, quick, straight to the point, and up-to-date tutorials. for everyone who's having the type error with building, to fix it move authOptions to it's own file and export the handler from there, then import it and export it again in the route.ts

[@clemonsLA]

Honestly this video does such a great job at explaining the overarching ideas of auth these days. The fact that it happens to be on app router is the cherry on top. Thanks!

[@Murv]

Thank you. The default documentation doesn't provide any app-router examples, leaving a beginner who just used the /api/ routes first time last night a bit stranded. Especially seeing as I don't have the attention span to sit through 40 minutes of video like the others. Straight to the point at the start with all the "example code" I need to understand how to structure it and then extend it with more providers, awesome !

[@jd_27]

Hi Jack, thank you very much for this detailed tutorial. It filled many of the gaps missing from the next-auth documentation. And your voice is smooth as honey

[@branislavbrincko7237]

The most frustrating thing about Next auth is “The functionality provided for credentials based authentication is intentionally limited to discourage use of passwords”. But the email password auth is the most common request from clients, so that’s what I would love to see in this kind of tutorial.

[@pranavrajveer3767]

Although as a matter of fact, day by day passwords are becoming a major source of security threats in this era, so it's not long before orgs move towards passwordless solutiions.

[@FunkyToe369]

@@pranavrajveer3767 Nobody disagrees with that, but "not long before" is a key part of your sentence... we are not quite there yet and it is very frustrating how awkward they make it. In current day, people still want password auth.

[@jherr]

As a service user I strongly prefer applications where I can login using auth from a trusted provider. Given the number of folks out there interested in home-brewing their own solutions I, as a user, don't really have much trust in those solutions given the number of high profile breaches.

[@bryson2662]

I think it's a good choice by Next auth. For learning purposes, it's good to know how to handle passwords and whatnot but realistically it's best not actually used.

[@my_yt666]

A bcrypt implementation isn't so difficult, but then you need to do the whole boilerplate as well such as forgot-password, set-new-password-after-forgot, send-email-confirmation, resend-email-confirmation, confirm-email, change-password, change-email, confirm-change-email, etc.

[@AmimulEhsaan]

THIS TUTORIAL SAVED ME after getting frustrated for an entire day of how to implement authentication using cognito in nextjs 13 appRouter. Thank you so much :)

[@wwtche]

wow, I watch a few tutorials on getting next-auth working but this one is so clear and concise. thanks for teaching us!

[@vernevens1598]

Me too, still looking at a blank screen not having a clue. Can't be done without daddy git I guess. This is almost making me want to go back to pounding nails for a living.

[@traconisek]

This is the most comprehensive, yet the most accessible nextauth tutorial (using app route ie easy to be adapted on t3stack etc.), I found :). Answered so many questions other treat as "trivial"! THANKS JACK!

[@milkdrom3da]

You will not believe the excitement in my eyes when i woke up this morning and seen this post after struggling and failing ALL YESTERDAY to figure out next-auth for the app router! THANK YOU AND GREAT TIMING

[@skyhappy]

Use clerk way easier

[@milkdrom3da]

@@skyhappy I'm def considering it.

[@dharylcarryalmora5414]

also kinde@@skyhappy

[@fAlekr1]

omg, Jack is such a great explainer! I feel embraced by his tutorials, he's a fantastic teacher!! Cheers from Brasil! \o/

[@PrayRNGesus69]

I can't believe how easy next-auth makes this painful process for me, thanks for teaching !

[@blyfo]

Bloody love this guy! Thanks for everything Jack

[@DivyanshuLohani]

Thanks mate for the setup I was literally stuck on this problem for over 2 days then I found this video

[@jacobrebec4951]

Thank you so much. This was so much clearer than all other resources I found for nextauth

[@dmltdev]

Still useful, and still relevant. I am extremely thankful for this video, as I was having really hard time implementing all of this. THANK YOU!

[@oliastepko6240]

Thank you so much! Love your style of teaching! And a huge thanks from a beginner for the detailed explanation!

[@catchshyam]

Thank you Jack, you are an amazing teacher and your tuts have the right amount of length and covers the exact amount details that I look for. I was working on the nextauth integration for a side project with credential provider and here was your video, talk of serendipity 😍 If I have to nitpick, I think you could cover the following, 1. nextauth middleware to handle redirection to login page for protected pages 2. attaching the access tokens to external API calls from server and client API requests 3. Customizing the auth pages I know these are advanced topics, may be for another video. Thanks again for making our lives easier.

[@goddessworshipper]

Wow @catchshyam you nailed exactly the topics I was going to ask for! Excellent tutorial Jack. 1) middleware is important so that one does not have to repeat the same get session and redirect code on EVERY protected page (and open up the door for forgetting to do so) 2) getting the access tokens to APIs is a critical piece... it would be great to initialize a wrapper for that external API ONCE (like a singleton) that takes the access_token once, and make it so every page/route etc has the ability to call that API without individually getting the access token (normally a jwt token) and 3) customizing the auth page is also important, and fairly easy to do in the pages router version of Next.js but have yet to try in app router version.

[@DarknessDescending]

Really solid how to tutorial. Well done and thank you.

[@nikhilev3840]

Awesome tutorial Jack! Loved it. Thank you

[@xaxoxuxu]

Amazing, love your style, love the way you talk. Keep it up!

[@RenardBergson]

Thanks a lot bro! Your video was the only thing that cleared my mind. Now, I have a start point to use the other concepts. Sorry for my english and regards from Brazil!

[@MarkGruffalo]

!!! It didnt work for me until I switched from version '4.24.7' to the *beta* version!!!! Thanks for the awesome tutorial!!

[@bryson2662]

damn, Jack. You've got the best content. Thank you so much.

[@jotasenator]

I like this a lot, and I noticed you were having a nice time too, regards and thanks !!!

[@roshandalami]

Thankyou. Looking for a while . Finally next-auth is here

[@craigcaski]

Just the video I needed! Thank you!

[@arjobansingh1940]

There is one downside of fetching the session in root layout at 7:55 (as we needed to pass in the SessionProvider). The root layout becomes dynamic route as it uses getServerSession which internally uses next/headers, thus making the root layout route as dynamic. And as root route is dynamic, every nested page by default becomes dynamic(which is not case we would always want, its like running getServerSideProps on every request of any nested page) due to this, no page will be statically generated by Nextjs, which is though the default behaviour provided by Next 13.4+. And also it causes issues running static paths generated by generateStaticParams.

[@jherr]

Agreed. You can scope that to either a sub-layout or into the page handler if you want to avoid that.

[@tinhoCs]

Good observation. Where would we ideally put it?

[@jherr]

@@tinhoCs At the top of the dynamic layout.

[@tinhoCs]

@@jherr Thanks for the quick reply Jack. Any way you can paste a short snippet here just so I'm clear?

[@jherr]

@@tinhoCs Sorry, no. There is a Discord server associated with this channel and you can request help there. Please READ and FOLLOW the #rules BEFORE posting. And the Next Auth folks have support channels as well.

[@amineayachi335]

Thanks for the great content you provide MJack

[@neutron417]

thanks man, didn't knew auth was that simple to implement

[@zohaibakber3056]

Awesome video Jack, maybe take it to next level with role based access and saving session and user info in database

[@kickflipz]

YES

[@soganox]

Fantastic tutorial! Thank you very much.

[@NourElGhamry]

Awezome 😂😂 , thanks alot Jak informative as usual

[@creativecoding5348]

i love the way u explain me and i love to see more educational videos thank you so much and have a great day

[@_hugo_cruz]

Thanks a lot Jack. I love you explications.!!! Excelent video! I wait the course!!

[@user-vm8ds3gs1l]

Hoping the family is doing well... thank you for the tech contribution....

[@knload]

Happy to see a confirmation I am doing it right. Thanks

[@azizkira7505]

you have to make a lot of videos on youtube , you are the best teacher ❤

[@mulusewsimeneh5673]

Thank you very much! Exactly what I wanted

[@Flo-lq3gq]

This is solid gold, thank you!!

[@vasiloconnell281]

Great stuff. Thank you very much!

[@jaroslavhuss7813]

Every time I try to live with Nextjs, it's because of Jack. Jack is such a good tutor. Unfortunately, I always quit Nextjs because of the server's architecture which I really don't like. But then again - Jack released a new video and I am messing with Nextjs over again to find out how unhappy I am with the architecture... And then again, and again... and again... Anyway, I am subscribed to the Pro NextJS and buying the course asap!

[@JJGlyph]

This is the greatest authentication video ever made. React server actions are the best.

[@hamidmohamadi2943]

You are awsome Jack, Thanks

[@fhkodama]

You are awesome! Thanks for teaching me so much! :)

[@Prachayawut]

wow this video makes it so easy to understand.

[@seccentral]

@12:42 - small verbal slip :)) should say "enable server actions" , not "server sessions". was a bit confused for a second. (Ty for this wonderful vid)

[@phptempaltedf]

after 10 tutorials and 9999 hours of tuto next.js. I feel of you and just "magique" . An 10 min, I fully understand SessionProvider

[@afsanazamannipa7711]

Great Tutorial. Thanks

[@margosdesarian]

Another great vid!

[@kamrant8915]

Thanks a lot. Perfect like ever.

[@mamlzy]

Thank you so much Jack!

[@bodywithoutasoul]

Yes yes yes!!! I needed this! How is it that the next-auth docs have such horrible instructions for the new app router?!

[@Luigi-lw6xg]

Great video Jack, thanks for clearing the fog. Tell me would you have an idea how to protect routes by roles? So for example a user visiting with an admin role has read and write permissions on a page compared with users that have just basic view.

[@brikka]

Hey Jack! Thanks for the tutorial, appreciate the time you took to teach us. Love the compact teaching style. Just one thing, I had to use /pages/api/auth/[...nextauth].ts as I was getting an error when building the server. Also, I had to update the export at the bottom of the file to export default NextAuth(authOptions)

[@shadow_aya]

Really nice video, appreciate it!

[@1MrGerman]

You are the best, man!

[@amirglx2028]

thank you dude you saved my life

[@camstuart]

Thanks Jack! I'd love to see a few things: 1) How can I call an external API (securely) by accessing the id token from the cookie (as I understand this to be the most secure way) and having any token refresh handled by next-auth. And then, 2) a rough overview of how a backend api might verify this request. Obviously thats tricky because there are so many languages and libs. so perhaps an express js example would be the simplest for people to translate. In my case to Golang. Finally 3) How can I make sure that any data fetching to external API's can be done after the session is all set up. EG, after a page refresh, I often get that flicker, and multiple call to my backend as the page loads and session initialises asynchronously!

[@jherr]

There is a Blue Collar Coder Discord server where you can ask the community for answers to questions like these.

[@darshandev1754]

The final point of passing headers to the GET request, was super needed I was stuck on it for days, not understanding why my GET requests weren't sending the headers even when I was authenticated

[@aliasalias510]

I'd wish to have a similar quick tutorial on how to do localization (i18n) with Next.js - App Router.

[@ayushgogna9732]

That was fast simple and easy Thanks...

[@xx__xx7199]

Thanks for all

[@imsantoshsingh]

Another fascinating video from Jack (the Codefather) 🤩

[@tillidie4889]

You saved me. I love you.

[@elsaman]

Looking forward to see version two of this video where you guys use the new beta of next-auth v5.0 😀

[@jherr]

I wish it was "you guys", it's just me. ;)

[@elsaman]

@@jherr you're kidding !

[@bicntt]

thank teacher, good lesson for me

[@oliverkidd5160]

Great video. Would be interested to see your take on performance with getServerSession? In current Nextjs builds it prevents any SSG and so leads to incredibly long ttfb. Any workaround beyond client side redirects? 🤔

[@techlightdev]

Great tutorial

[@ccouto2869]

The teaching really excellent, congratulations, I just think a protected page is unnecessary, it makes more sense to use middleware

[@alanmartins429]

valeu papai, video ótimo !!!!

[@datasagedev]

Jack thank you for all that you do, I'm curious though could you cover credentials manager It has been incredibly challenging and I would really like to see how you approach this. I know that provider auth is the future and the best practice now but people still want credentials as well as passwordless login. Both of those would be great to add to this video or make another this would be everything in one place. :) Merry Xmas!!!

[@ceotcr]

Best tutorial

[@waltervanwoudenberg6876]

Monorepo with nextjs + nestjs using drizzle and next-auth with the drizzle adapter would be cool video to watch. Where both next and nest use/share this drizzle db

[@blindsider409]

Awesome video! Can you cover how to use next auth with bearer tokens. And is it possible to style the component of the provider?

[@babayaga6172]

Great content as always I am wondering how to make a complex data fetching like a data tables with sorting search with server components Please make a tutorial on this Thanks 🙏

[@warlockCommitteeMeeting]

thank you

[@jacobphillips9235]

Thanks!

[@jherr]

Thank you!

[@sharpesthawk]

At 8:06 How did you highlight just some code and the rest is dim? Is that an extension of some sort? Is there a keyboard shortcut for that?

[@jherr]

That's something we do manually in ScreenFlow to highlight the code I'm talking about.

[@budiman-kr5ug]

You are the best!!!

[@gamescope2607]

Thank you for the informative video. I have a question regarding NextAuth: Can it support role-based authentication for both clients and administrators for custom pages

[@faizanahmed9304]

Thank you Jack sir, much needed video. what if we need to add multiple protected routes? I mean should we use here route groups?

[@jherr]

Put the check in a shared layout.

[@MilosJovancevic]

It would be awesome if you could show auth0 authentication but using their login screen. Also add sign out method etc cuz it’s not available out of the box. Graphql would be super awesome to include.

[@jaredgentry406]

How long do these server sessions last? Do you have to code in refresh token logic, or is this handled by NextAuth?

[@hqasmei]

Hi Jack, great video and explanation like always. Wanted to ask can we how would you use middleware with NextAuth for protected routes? I'd imagine you would what to do that session check in all protected routes.

[@jherr]

Yep That's another very valid strategy for protected routes.

[@yichao235]

Thank you for the great content Jack! Regarding your approach with using a Context component doesn't that make it so that the app will never SSR because the `RootLayout` component always has `use client` through the `SessionProvider` component? Is that avoidable at all?

[@jherr]

No. First of client components SSR. And second client components can have RSCs as children or element props.

[@liu-river]

Would be interested to see if the app router has changed how middleware works in comparison to pages directory, is it the same?

[@aznravensdrive5900]

For the nav... when you click on Server Action... if you see "Who Am I" but you don't see your name? that's because you have to actually click on "who Am I" in order to see your name. "Who Am I" is a button not just text.

[@chungleee]

thanks for the video - although i believe in not reinventing the wheel, i'm interested in knowing / learning how to implement all this without the already done package....if someone could point me to the right direction 🙏

[@williamdevonshire356]

Great vid thanks :) My only criticism is that the jump cut edits where theres no code and then all of a sudden all the code, is a bit too abrupt, and makes it a bit hard to follow what you did in the immediate jump with all the new code.

[@grant_vine]

You haven’t covered middleware, would be nice to add that 😊

[@jherr]

Middleware for?

[@grant_vine]

@@jherr next-auth middleware implemention

[@jherr]

@@grant_vine Hahah, yeah, I get it. To do what though? What do you want the middleware to do? Add roles to the headers or something?

[@grant_vine]

@@jherr it’s seems a logical central location for route protection and managing a common “why are you on this page”, so definitely supports DRY

[@jherr]

@@grant_vine Is it DRY though? because you have the path for the route, which is truth, and then you replicate that path in the middleware to add protection. So if you move the route you'd have to change the middleware. Which doesn't seem DRY to me. Honestly, I'd be ok either way with this, I was just curious if there was a customer requirement that I didn't cover.

[@thatsTrudeau]

Thank you Jack. Hey on the Server Actions part. I have everything verbatim what you have, however, when I test this in the browser and click the Server Action Button I only get "Who Am I" and not the div with "You are {name}". I don't see any errors in the console when inspecting the page and everything seems to compile. Any ideas? Thanks in advanced for the help. ***UPDATE*** After sleeping and taking a break, I rewatched this part........ attention to detail is important. It does work but I didn't realize that we actually created a button with the text itself. Once I clicked on the Who Am I? text, the attention to detail part, everthing worked. Thank you for your work and putting stuff like this out there.

[@vommir.]

Hi Jack, thank you for this tutorial. I am running into a failed build because of the route.ts. I copy pasted it the code from your source to make sure. It does work all fine on pnpm run dev. This is the response I get, - info Linting and checking validity of types ..Failed to compile. src/app/api/auth/[...nextauth]/route.ts Type error: Route "src/app/api/auth/[...nextauth]/route.ts" does not match the required types of a Next.js Route. "default" is not a valid Route export field. Do you have any what could cause this?

[@benhawy]

I love you.

[@hoainhannguyenphan5318]

Thanks for your videos, it's very helpful. But when I coded like you, my application was not able to get the value from the .env variable, hmm is there something wrong?

[@djibrilmugisho5874]

thanks so much for this content, authentication in Next.js has always been a mystery but now i understand everything. But what can i do if i'm trying to persist users in something like a database, how can i handle that registration process ?

[@huuthongle8768]

Hi Jack. there’s a comment on tweet says. useQuery hooks from RSC's, with client updates taking over on hydration . Would you please make a tutorial for this ? Thank you

[@ez_krk]

in it for the food thought tho.

[@RegalWK]

Jack could you make a video about adding context in tRPC and app directory? I did you prev video and stuck on creating trpc for RSC, serverClinet = appRouter.createCaller, because createCaller expect from as also a context

[@rahu1gg]

Yes I am also facing the issues where the createCaller takes the context as db and session. I am able to pass the db but facing an issue while passing the session because createCaller is not a rsc or a route handler to get the session 🥲

[@RuslanGonzalez-ox6vz]

It's just a matter of types, if you implement the context whether it is from the trpc middleware or the route. You will get access to the ctx... maybe with a bit of hack you infer the types definition so to get type safety and autocompletions.

[@RegalWK]

@@RuslanGonzalez-ox6vz Could you show that? The only solution I found is to use next adapter, but if we do that we need to create app/pages/api dir and we lose ability to call trpc in server components, I wonder if you mange to have both working types and context everywhere