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.

👉 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

[milkdromda]

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

[branislavbrincko]

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.

[syntheticquimera]

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!

[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 :)

[gorkemgok]

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.

[zohaibakber]

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

[PrayRNGesus]

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

[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

[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!

[MarkGruffalo]

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

Thanks for the awesome tutorial!!

[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.

[godhandinfamous]

thank you Jack, this is helping me getting started with the auth

[fAlekr]

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

[wwtche]

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

[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

[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!

[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!

[arjobansingh]

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.

[jaroslavhuss]

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!

[jacobrebec]

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