Next Auth V5 - Advanced Guide (2024)

Learn how to add advanced authentication to your NextJS App.

Key Features:
- 🔑 Credentials Provider
- 🌐 OAuth Provider (Social login with Google & GitHub)
- 🔒 Forgot password functionality
- ✉️ Email verification
- 📱 Two factor verification (2FA)
- 👥 User roles (Admin & User)
- 🔓 Login component (Opens in redirect or modal)
- 📝 Register component
- 🤔 Forgot password component
- ✅ Verification component
- ⚠️ Error component
- 🔘 Login button
- 🚪 Logout button
- 🚧 Role Gate
- 📈 Extending & Exploring next-auth session
- 🔄 Exploring next-auth callbacks
- 👤 useCurrentUser hook
- 🛂 useRole hook
- 🧑 currentUser utility
- 👮 currentRole utility
- 🖥️ Example with server component
- 💻 Example with client component
- 👑 Render content for admins using RoleGate component
- 🛡️ Protect API Routes for admins only
- 🔐 Protect Server Actions for admins only
- 📧 Change email with new verification in Settings page
- 🔑 Change password with old password confirmation in Settings page
- 🔔 Enable/disable two-factor auth in Settings page
- 🔄 Change user role in Settings page (for development purposes only)

Timestamps
00:00 Intro & Demo
02:05 Project setup
15:19 Routing crash course
38:06 Home page
48:40 Card wrapper
01:04:51 Login form
01:23:08 Register form
01:40:16 Database & Prisma setup
01:57:14 Create user
02:06:30 Middleware & Login
02:50:52 Callbacks
03:20:34 OAuth (Google & Github)
03:47:58 Resend (Sending emails)
04:19:27 Email verification
04:48:12 Reset password email
05:08:11 Reset password form
05:22:48 Two factor authentication
05:55:28 User button
06:15:02 Server & Client example
06:30:06 Admin example
06:47:25 Settings page
07:33:09 Sponsor demo
07:38:14 Deployment

[codewithantonio]

Hello everyone 👋 Thank you for choosing this video, and I hope you will enjoy this next auth v5 masterclass. I listened to your requests and decided to dive deep into creating our own auth toolkit with reuseable components, hooks and utils to use auth in server & client components, api routes and server actions. We will also deeply explore the middleware and learn how to extend next auth session, use callbacks, pages and events configuration. Thank you all for an amazing 2023, and see you in 2024! ❤

[bobbuilder]

This tutorial needs to be in official NextAuth documentation.

[santech]

8hrs of content on Next Auth? Brother you're awesome, I am definitely contriuting once I get a frontend job, the amount of value you give out for free is priceless. Awesome

[jonathanbaird]

For security purposes, you should always return a generic Invalid credentials message no matter if the user account exists or not. For unverified emails on user accounts your function for sending the verification emails will send an email no matter if the password is correct or not. Instead you should verify that the the password and the email before sending the verify email. Also for password reset; the response should not be Email not found if the user account doesn't exist. It should always return Reset email sent message. The reason for this is because you do not want a malicious actor to find out if an email belongs to a valid user account. If they can get a list of your users they can try brute force or password spray techniques to hack your app.

[xOmzi]

Damnnn 🤯. You keep outdoing yourself Antonio. This is the EXACT tutorial I need right now. I've always wanted to go beyond the basics with NextAuth (now AuthJS) but haven't had much success. Thanks a million for this timely tutorial 🙏🏽.

I also have a testimony to share 😅. Due to the skills & experience I gained following your tutorials, I won my first hackathon ever!

Thanks again 🙌🏽😁.

[ypeng]

This is awesome! By following your airbnb clone I landed my first job in tech and now I’m building a website using next auth for them? even though I have done the most basic part but a in-depth nextauth is what I need!❤ thank you so much

[Triple._.A]

This is EXACTLY what I needed! I was getting a little tired of using Clerk, I don't exactly like the idea of using pre-made components that we can't style however we want. I'll be using Next Auth from now on. Feels like I've learned so much from this, thank you as always, really appreciate your videos!

[adabooost]

for those of you getting errors at 2:31:45. Just end the control with a simple return.
After the update the function signature you're using for the middleware does not match what the new auth package expects... so if you don't wanna downgrade from auth beta.9 ... just return a native Response, or just do a simple return without the null.

[zuqmjiy]

If there were a YouTube Valuable Creator Award specifically for teaching coding, there is no doubt in my mind that you would be the perfect candidate for this prestigious recognition. Your dedication to educating others about coding and your exceptional teaching skills make you truly deserving of such an accolade.


Through your YouTube channel, you have consistently demonstrated an incredible ability to break down complex coding concepts into digestible and easily understandable explanations. Your videos are not only informative and comprehensive but also engaging and enjoyable to watch.


Your commitment to helping aspiring developers and programmers navigate the world of coding is inspiring. You go above and beyond to provide valuable resources, tutorials, and practical examples, empowering your viewers to learn coding and enhance their skills.


The impact you have on your audience is evident through the numerous positive comments and gratitude expressed by those who have benefited from your instructional videos. Your ability to make coding accessible and enjoyable for learners of all levels sets you apart as a truly exceptional coding instructor.


Your passion for coding and your genuine desire to see others succeed in their coding journey shines through in every video you create. Your dedication and expertise have undoubtedly made a significant impact on the coding community, and for that, you are truly deserving of recognition and appreciation.

[eshw]

Amazing, I would love more tutorials focusing on concepts like this instead of only project clone tutorials all the time. Great video!

[nemeziz_prime]

Man you're magic! I learnt some of NextJS and Auth.js from your Airbnb clone video, but it was a bit complicated for me as a beginner. I always wanted to learn middleware based Auth in NextJS 14 and you just dropped a massive tutorial for the same. You're awesome 🔥

[epatrickification]

I just read your bio on your website. Feels good to be taught by someone who has actually worked in industry. Keep up the good work man!

[anonymouseverx]

My entire mindset has been changed because of you, Antonio. For this, I can't say thanks enough. I know one thing without any doubt that I can't find this quality of learning and doing anywhere else. Thank you so much, Antonio for everything. ❤

[unknownheart-x]

I've watched 1 hr 30min so far, and I want to say that this is the first time I have seen an honest tutorial without errors or mysterious or ambiguous codes which u dont know from where they come from every minute! Thank u for ur honesty doing this tutorial

[nasko]

Antonio I've gotta say after completing your Messenger clone tutorial and moving on to this one your teaching skills have really improved and you're actually taking time to explain small details that are very important. Great stuff man.

[teetanrobotics]

Hi Code With Antonio,

I just wanted to drop by and say a huge thank you for your recent video on Next Auth V5. Your explanations were clear and concise, making it easy for me to understand and implement in my projects.

I'm really interested in learning more about the t3 stack, and I think your expertise would be invaluable in helping me and many others navigate this technology. If you have any plans to create more content on the t3 stack in the future, I would be eagerly looking forward to it!

Thanks again for all the amazing content you put out, and keep up the fantastic work!

[btrhrtj]

Hi, Antonio!
I successfully completed your guide! Step by step, starting from create-next-app and ending with deployment to Vercel

THANK YOU SO MUCH!!!!

The best tutorial I've ever seen, especially on authjs (aka next-auth)

[Tapadar.Monsur]

Thanks a lot, Antonio! The quality of your content is unrivalled.

[guigabelline]

Congratulations on the videos, I'm following them all. These classes are rich in knowledge and Antonio explains very well. I'm from Brazil and there isn't much content about nextjs here, I even want to share your channel with my friends... Keep creating your legacy, a legion is with you! Congratulations on the work... 😉

[Fiilipes]

8 hours of nextauth is just crazy. Appreciate it very much!!!