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! ❤
Thank you very much for the quality of the content you offer! We see that you keep improving from one video to another and that's what makes you teach us a lot! For the next video, would it be possible to achieve the same with image hosting without going through an external provider or using base64? From my point of view, it would be interesting to store the images on our server directly 😉 Thank you again and happy new year 2024! ❤
Your content is amazing! Could you consider creating a video about Inventory Management Systems? Your expertise would make it incredibly valuable. Thanks!.
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.
actually i am thinking the same, if password is wrong then it should not send 2FA mail, I did it by checking the credentials using a sever action and if creadential are correct then it goes to 2FA mail. besides that everything is gem in this video i think... and till now the best Next-auth tutorial on RUclips.
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 tutor!!!!!
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.
@@Salah-YT i removed all return lines, but when isLoggedIn = false and isPublicRoute =.false, middleware not redirect to /auth/login can you show me more,
actually it wasn't redirecting to /auth/login when I tried accessing the /settings route. So I added another condition "&& nextUrl.pathname !== "/auth/login"" then it worked
If there were a RUclips 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 RUclips 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.
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
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 🙌🏽😁.
These kind of tutorials are very, very helpful so please create these kind of projects like what are the main security concerns before we upload on the cloud and how to make our website more and more secure so that it can not be managed by others by some bugs as these kind of contents will be of a great help as these kind of things are not available online.
@@codewithantonio people will like these types of videos more because simply cloning the website is not that helpful if we don't have a clear idea of "behind the scene"
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!
These are the basic things which wordpress had like 20 years ago, and now some companies such as clerk are trying to intervene and make such a simple functionality as an exclusive thing, and making cap on users, this is ridiculous.. There must be a standard from next themselves on this, its tiring..
for those who are having problems in 4:05:20 code: const existingUser = await getUserById(user.id) problem: "Argument of type 'string | undefined' is not assignable to parameter of type 'string'. Type 'undefined' is not assignable to type 'string'.ts(2345) (property) id?: string | undefined A unique identifier for the user." my solution: const existingUser = await getUserById(user.id as string)
This is some top quality content, Antonio! With regards to the user object at 2:56:32, it is undefined because it contains the result of the authorize callback within the authConfig, meaning that it will only ever have a value once during signIn, after which it is undefined. Since the value of the session is set during signIn, you can just use the user object instead of making a request to the database again in the jwt callback. Hope this helps, and thank you for awesome content!
And regarding extending the user (3:11:02) and the token (3:13:48), this works: import { User } from "@auth/core/types"; import { JWT } from "@auth/core/jwt"; declare module "@auth/core/types" { interface User { // add your custom fields here } interface Session { user: User; } } declare module "@auth/core/jwt" { interface JWT { // add your custom fields here } } The issue with your implementation of the token custom field is that you are making it optional by adding the '?', meaning it is either "ADMIN" | "USER" | undefined, which does not match what you have in the user.role field (it is not optional). So either make them both optional, or both required, and it should work.
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
Man im 7 hours deep and I swear, if people just memorize this project they know everything they need to know to build whatever they want to build. this is life changing project/video.
Just finished the course, I swear this is the only course i have ever followd that didnt throw bug at my face while following the course.. again thank you so much learnt a ton also clerk thing is amazing too.
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. ❤
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 🔥
Hello, Antonio It took about 14 hours to complete the tutorial as soon as the video came up! Thanks to you, I think it will be a good start to 2024 Thank you and take care of me in 2024 too!
Thank you, Antonio, for this awesome video on authentication. I always learn a lot from your clear and concise explanations. You make a complex topic easy to understand and implement. I appreciate your dedication and passion for teaching. Keep up the good work! 👍
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!
Thank you for starting from the very beginning and not skipping steps assuming everyone is already familiar with them in depth. I picked up things that i had been struggling with in how to properly structure my app that no one else was explaining.
Just landed upon your channel, checked number of subscribers and checked when you started. To be honest it was a surprise you got to this number in less than an year. Then I checked your other videos. Now I know, with few videos, you have delivered so much value for free that its just priceless. Subscribed.
Just starting now. Really thrilled to see, someone is making detailed videos on specific things like auth on youtube for full free. You are real Hero Man, thank you
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.
I want to thank you for taking the time to make this video. It has been quite challenging to follow you on speed, I finished your video in 2 days LOL, I tried to follow you implementing all this stuff in my own project and I understood pretty much all you explained, and as you mentioned now, I have my own building block framework for authentication. THANKS!! This video is pure gold, the content is relevant, perfectly explained and the best part... it's not just a "how to", you explain the basics and that's what is most appreciated. PS. There is one small bug in the 2FA but you explained the basis we can tweak is as we need
Hello, Thank you for this amazing tutorial. I tried this and it worked: 'declare module "next-auth"' instead of 'declare module "@auth/core"', to add the role to the session (around 03:12:00).
For those of you strugglers who want to do the module augmentation in version 5.0.0-beta.15 - this works in auth.ts file: declare module "@auth/core/types" { interface User { role: "ADMIN" | "USER"; } } declare module "@auth/core/jwt" { interface JWT { role: "ADMIN" | "USER"; } }
Thank you, Antoni! You have no idea how much this channel is helping me. If anyone is learning Next.js, I highly recommend this channel. I'm looking forward to your next video on ts-node API in Node.js. Like this concept
i honestly really lack the words to express my gratitude for the value you put out here for us consistently. Thank you so much Antonio. Still looking out to see your teaching using "Nest.js" backend and hooking it up to a "Next.Js" frontend here on your channel, cos somehow things become so easy to understand listening and watching your build ideas. Happy new year and God bless.
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)
Thank you so much Antonio for all the videos this year ❤. You are raising the skill sets of so many people and it's just incredible. My goal for 2024 is to be almost as good as you 😂. Would be super dope though if you made mobile apps though for 2024 as well( maybe using react native coz I think it's up your alley). Anyways thanks so much and I wish you and everyone here a blessed 2024
Was sitting here working on a project and I thought about how useful this would have been to have as I knew it was in the works, and u dropped it. Thank you :)
Once again, the outstanding quality and benefits provided by the best person like you, Antonio, are truly appreciated. I feel extremely grateful for your assistance 😍.
This is the best tutorial I have come across on RUclips, I had many doubts about Next.js, but now I understand most. I want to be grateful to you and continue your work. I believe that in the near future, I will contribute a lot to your channel so it doesn't stop here and goes beyond borders. Congratulations and success.
At around 5:57:00 I was having an issue with useSession() in a client component. It wouldn't load the session on initial page load. If you're stuck on this, create a layout.tsx file in the (protected) route group and put the SessionProvider there. This fixed it for me.
I've been struggling with this for hours, thank you very much! Let me add some word for people who are searching for this solution client - first load - refresh - login - session - not showing
It looks like a very robust tutorial and at first glance it covers all the topics that are extremely important for a real word application. Perhaps the best video on RUclips so far that deals with its topic?! Thank you for your work!
Hi Antonio! Again super good and cutting-edge tutorial. Just want to mention that when I tried it out I was using "next-auth": "^5.0.0-beta.11", and the error @3:14:09 for the session.user.role disappeared. They also updated the docs and this is the snippet now: "import { JWT } from 'next-auth/jwt'; declare module 'next-auth/jwt' { interface JWT { role?: 'ADMIN' | 'USER'; } }"
Hey Antonio, love your tutorials! Can you make a tutorial on 3D effects in Next.js? Been following since the Netflix clone - your tutorials are super helpful. Have an awesome day!
I’d really like to see a straight up JavaScript/TypeScript front to back course from you. Your understanding of most of these technologies is leaps and bounds above most every other content creator who does these types of videos and I feel like you could make a great tutorial for the base language. Maybe even a full on web dev course that starts with HTML and goes all through to front and back end frameworks.
Thank you for creating this video! 🙏You did an impeccable job covering all important topics about Next-Auth. Out of all the tutorials that I've gone through, this one is by far the best! I'm looking forward learning from you in the future!👏🏽🔥
You can use instead this at 3:15:51 import type { User } from "next-auth"; import NextAuth, { DefaultSession } from "next-auth"; import { JWT } from "next-auth/jwt"; declare module "next-auth" { interface Session { user: Omit & { id: string, role: "ADMIN" | "BASIC" | "OWNER" }; } }
Hi Antonio. There is no need to get user from database in jwt callback in auth.ts. User object is available in jwt callback when a user logins. Just pass it along with token as a parameter. Jwt callback is called when a user logins and when session is accessed. User object is populated with data only when a user logins, but when jwt callback is triggered by accessing the session user object is undefined. So it is important to check if user object exists before copying data from it to the token.
i use it and success: async session({ session, token, user }) { if (token?.token) { session.token = token.token; } return session; }, async jwt({ token, account, profile, user }) { if (user?.token) { token.token = user.token; } return token; },
In line with the rest of the comments: Thank You very much, Antonio. This is truely an awesome topic for NextJS starters like me in 2024. I've done the Trello Tutorial and I'm amazed by the code-consistency and quality.
Hey Antonio, Please make a video about next auth new version! I installed next-auth@^5.0.0-beta.5 instead of ^5.0.0-beta.4 now even If I go to ^5.0.0-beta.4 it gives types error! Please make a small video to fix it!
After spending several hours troubleshooting, I have finally found this tutorial and was able to resolve the issue with my assignment project. Thank you for your help.
Amazing tutorial! Meanwhile just completed the 8 hours content and found some issues as of today: 1. NextAuth renamed 'update' to 'unstable_update' in beta5 (the official repo is using beta4). While Server side page shows latest user session values properly, client side page always fail to keep up. 2. In order to double check the issue, I cloned the official repo provided by Antonio above. After logged in with credentials, goto settings and change the role, the Server side page still showing old role value while Client side page shows the latest role, which is different from the video content. Antonio did mention that it is an inconsistent behavior so far. Sadly this bug makes the repo not usable in production. But still a great learning experience! Thanks again!
Awesome video, thank you very much. For anyone wanting to bypass the issue of duplicate verification at the 4:42:00 mark, one option is while in development to disable reactStrictMode by adding the following to next.config.js. You can set to true or false as needed. NextJS 13.4 and up I believe this value is "true" by default. module.exports = { reactStrictMode: false, }
Nowadays, RUclips isn't rewarding long videos as much as before, but as always, I continue to watch your videos and learn from them. I leave comments and give thumbs up to show my support for you. You've done a great great job! Keep it up, bro.😁
Absolutely! Your expertise is truly impressive and has won me over. I'd like to suggest a topic for your next project - an inventory management system. Given your skills, I believe delving into this area would be highly beneficial and insightful for your audience. Thank you for considering this suggestion.
I cannot express how much grateful I am to be able to learn so much in one single tutorial. The code you provided not just user friendly but also very elegant to use. Thank's a ton!
Cant stress enough how valuable this video is! Just an update I found, authjs pushed a pr that updated that fixed the docs for the type augmentation and it matches your solution to the issue as well!
From the bottom of my heart, I would like to say Thank you so much Antonio. Your ability to explain complex topics in such a clear and simple manner is truly appreciated. Looking forward to more of your interesting and advanced tutorials. Once again, thanks a lot ❤.
The best tutorial so far nextjs 14 and nextauth. Really got in the nitty gritty as the documentation of nextauth is not up to date. I am switching back from Clerk to nextauth as well. Thanks Antonio!
Watching the Middleware & Login chapter and thinking that making proper and good auth is an art because I don't even know how to come up with that many solutions and proper steps to do such things from scratch. Just need some summary/outline/notes to do so step by step. Or spend much time to summarly do all of these after bugs, requirements, etc. And how new people who can appear on the project to fix or change smth can even understand what has been done, why and with what logic? For me now it's a kinda complicated topic) So need real practice. Thanks for sharing.
Extending the type of Session.User to include role worked for me as: In file next-auth.d.ts import NextAuth, {AdapterUser, User, DefaultSession} from "next-auth"; import { JWT } from "next-auth/jwt"; declare module "next-auth" { interface Session { user: User & { role?: 'USER' | 'ADMIN' }; // Add the optional 'role' property } } declare module "next-auth/jwt" { interface JWT { role?: 'USER' | 'ADMIN'; // Add the optional 'role' property } }
Hi, Antonio, your classes are great. Could you provide a tutorial on setting up VSCode, including recommended extensions, commands for quick code generation, and how to customize the terminal to match your preferred format?
2:31:54 If you use `return null'` under `if (isApiAuthRoute)` and see error, simply remove "null" after "return",. just leave"return;". It will fix the bug
When I was struggling with OAuth, implementin it into NextJS login system. At the same exact moment some gigachad was uploading 8 hours course about all my problems, thanks brother
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... 😉
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! ❤
Professional stuff as to be expected from Antonio! Many thanks! ❤
thank you you did awasome tutorial.
This looks loaded 😊😊, ❤; I’m at 48 minutes now.
You have done a lot of wonderful works this year, stay safe Brother.
Greetings from Tanzania 🇹🇿
Thank you very much for the quality of the content you offer!
We see that you keep improving from one video to another and that's what makes you teach us a lot!
For the next video, would it be possible to achieve the same with image hosting without going through an external provider or using base64?
From my point of view, it would be interesting to store the images on our server directly 😉
Thank you again and happy new year 2024! ❤
Your content is amazing! Could you consider creating a video about Inventory Management Systems? Your expertise would make it incredibly valuable. Thanks!.
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.
Thanks for sharing these with us 🙏
actually i am thinking the same, if password is wrong then it should not send 2FA mail, I did it by checking the credentials using a sever action and if creadential are correct then it goes to 2FA mail. besides that everything is gem in this video i think... and till now the best Next-auth tutorial on RUclips.
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 tutor!!!!!
Glad you like the content :)
who has 8 hours to watch?
@@maskahleo someone who really wants to learn
It is worth the 8 hours
@@ChristopherMakrides definately
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.
i was searching all of the internet for this solution thank you mate
@@Salah-YT i removed all return lines, but when isLoggedIn = false and isPublicRoute =.false, middleware not redirect to /auth/login
can you show me more,
thank you, it worked
actually it wasn't redirecting to /auth/login when I tried accessing the /settings route. So I added another condition "&& nextUrl.pathname !== "/auth/login"" then it worked
return NextResponse.next();
don't forget to import :
import { NextResponse } from "next/server";
this works for me!
This tutorial needs to be in official NextAuth documentation.
Glad you like it!
@@codewithantonio hey! It's not working properly in production (middleware and redirections)
Is you have completed this project?
@@iganic7574 yeah
If there were a RUclips 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 RUclips 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.
Thank you a lot for the kind words ❤️
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
Happy that my videos helped you!
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 🙌🏽😁.
Great job!!!!!
Amazing, I would love more tutorials focusing on concepts like this instead of only project clone tutorials all the time. Great video!
I would be happy to do more like this if people like it :)
@@codewithantonioI agree with him, Please do more like this!
These kind of tutorials are very, very helpful so please create these kind of projects like what are the main security concerns before we upload on the cloud and how to make our website more and more secure so that it can not be managed by others by some bugs as these kind of contents will be of a great help as these kind of things are not available online.
@@codewithantonio people will like these types of videos more because simply cloning the website is not that helpful if we don't have a clear idea of "behind the scene"
Yes because he already made clones of all famous apps 😂😂😂
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!
These are the basic things which wordpress had like 20 years ago, and now some companies such as clerk are trying to intervene and make such a simple functionality as an exclusive thing, and making cap on users, this is ridiculous.. There must be a standard from next themselves on this, its tiring..
I always perceive Clerk as SCAM. Most RUclipsrs mention them because they're paid to promote them. 🤢🤢🤢
for those who are having problems in 4:05:20
code:
const existingUser = await getUserById(user.id)
problem:
"Argument of type 'string | undefined' is not assignable to parameter of type 'string'.
Type 'undefined' is not assignable to type 'string'.ts(2345)
(property) id?: string | undefined
A unique identifier for the user."
my solution: const existingUser = await getUserById(user.id as string)
Thanks a lot!
This is some top quality content, Antonio!
With regards to the user object at 2:56:32, it is undefined because it contains the result of the authorize callback within the authConfig, meaning that it will only ever have a value once during signIn, after which it is undefined.
Since the value of the session is set during signIn, you can just use the user object instead of making a request to the database again in the jwt callback.
Hope this helps, and thank you for awesome content!
Thank you for that insight, it definitely confused me. I will explore!
And regarding extending the user (3:11:02) and the token (3:13:48), this works:
import { User } from "@auth/core/types";
import { JWT } from "@auth/core/jwt";
declare module "@auth/core/types" {
interface User {
// add your custom fields here
}
interface Session {
user: User;
}
}
declare module "@auth/core/jwt" {
interface JWT {
// add your custom fields here
}
}
The issue with your implementation of the token custom field is that you are making it optional by adding the '?', meaning it is either "ADMIN" | "USER" | undefined, which does not match what you have in the user.role field (it is not optional).
So either make them both optional, or both required, and it should work.
@@KramCodes I love how the teacher and students learn together! Antonio is my newest favorite teacher on youtube! Much love!
@KramCodes could you to write example of the user object?
@@KramCodes On adding my custom fields, the adapter started throwing type error too
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
Glad it helped!
8 hours of nextauth is just crazy. Appreciate it very much!!!
Hope you enjoy it!
Seems like it might be overkill. I suspect 50% of this tutorial is going to be markup and CSS styles, but it looks like it's worth watching anyway.
Man im 7 hours deep and I swear, if people just memorize this project they know everything they need to know to build whatever they want to build. this is life changing project/video.
Just finished the course, I swear this is the only course i have ever followd that didnt throw bug at my face while following the course..
again thank you so much learnt a ton also clerk thing is amazing too.
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. ❤
Thank you for the kind words, I am happy I could be of help!
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!
Happy to hear that :)
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 🔥
Enjoy!!
Hello, Antonio
It took about 14 hours to complete the tutorial as soon as the video came up!
Thanks to you, I think it will be a good start to 2024
Thank you and take care of me in 2024 too!
wow already! amazing job!!! hope you enjoyed it
Thanks a lot, Antonio! The quality of your content is unrivalled.
Thank you very much :)
Thank you, Antonio, for this awesome video on authentication. I always learn a lot from your clear and concise explanations. You make a complex topic easy to understand and implement. I appreciate your dedication and passion for teaching. Keep up the good work! 👍
Happy to hear that, enjoy the video!
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!
Thanks for the suggestion!
Hey Antonio, I have completed 75% of the course. Its so crystal clear, that I had to come back and thank you again!! Great work man!
Thank you very much, hope you are enjoying it :)
Thank you for starting from the very beginning and not skipping steps assuming everyone is already familiar with them in depth. I picked up things that i had been struggling with in how to properly structure my app that no one else was explaining.
Glad you liked it!
If anyone needs a typing solution in 3:11:00 :
import "next-auth/jwt";
declare module "next-auth" {
interface User {
role: UserRole;
}
}
declare module "next-auth/jwt" {
interface JWT {
role: UserRole;
}
}
Just landed upon your channel, checked number of subscribers and checked when you started. To be honest it was a surprise you got to this number in less than an year. Then I checked your other videos. Now I know, with few videos, you have delivered so much value for free that its just priceless. Subscribed.
Thank you very much, happy you like my content :)
Just starting now. Really thrilled to see, someone is making detailed videos on specific things like auth on youtube for full free. You are real Hero Man, thank you
Enjoy! ❤️
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.
I want to thank you for taking the time to make this video.
It has been quite challenging to follow you on speed, I finished your video in 2 days LOL, I tried to follow you implementing all this stuff in my own project and I understood pretty much all you explained, and as you mentioned now, I have my own building block framework for authentication. THANKS!!
This video is pure gold, the content is relevant, perfectly explained and the best part... it's not just a "how to", you explain the basics and that's what is most appreciated.
PS. There is one small bug in the 2FA but you explained the basis we can tweak is as we need
Glad it helped!
Hello,
Thank you for this amazing tutorial. I tried this and it worked: 'declare module "next-auth"' instead of 'declare module "@auth/core"', to add the role to the session (around 03:12:00).
Thank u
For those of you strugglers who want to do the module augmentation in version 5.0.0-beta.15 - this works in auth.ts file:
declare module "@auth/core/types" {
interface User {
role: "ADMIN" | "USER";
}
}
declare module "@auth/core/jwt" {
interface JWT {
role: "ADMIN" | "USER";
}
}
Thank you, Antoni! You have no idea how much this channel is helping me. If anyone is learning Next.js, I highly recommend this channel. I'm looking forward to your next video on ts-node API in Node.js. Like this concept
Thank you for the kind words and suggestion!
i honestly really lack the words to express my gratitude for the value you put out here for us consistently. Thank you so much Antonio. Still looking out to see your teaching using "Nest.js" backend and hooking it up to a "Next.Js" frontend here on your channel, cos somehow things become so easy to understand listening and watching your build ideas. Happy new year and God bless.
Makes no sense to use both together.
Both are backend framworks.
React + Nest.js, this wold make sense.
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)
Hey, could you share the codebase with me? It's paywalled now
This video is a life saver! Best video on Next Auth v5 I've seen anywhere. Thank you so much!
damn, 8 hours auth next js, I finished it in 3 weeks. thanks man u mean a lot for us. god bless you
This is absolutely amazing. Thanks Antonio for all this year!
Thank you for your support! Enjoy!
Thank you so much Antonio for all the videos this year ❤. You are raising the skill sets of so many people and it's just incredible. My goal for 2024 is to be almost as good as you 😂. Would be super dope though if you made mobile apps though for 2024 as well( maybe using react native coz I think it's up your alley). Anyways thanks so much and I wish you and everyone here a blessed 2024
Definitely planning on doing some react native as well! Enjoy the content and continue improving! you can do it!
Was sitting here working on a project and I thought about how useful this would have been to have as I knew it was in the works, and u dropped it. Thank you :)
Fantastic! Enjoy the video :)
2 hours into the video I've already grabbed a whole lot. Thanks for this wonderful quality content.
If you're having the TypeScript error around 2:31:00 just return everywhere you're returning null
i have such error with types of req . Could you explain more precisely what i need to do?
yes, i just removed null and now it's only return; :)
Once again, the outstanding quality and benefits provided by the best person like you, Antonio, are truly appreciated. I feel extremely grateful for your assistance 😍.
Glad you like my content :)
This is the best tutorial I have come across on RUclips, I had many doubts about Next.js, but now I understand most. I want to be grateful to you and continue your work. I believe that in the near future, I will contribute a lot to your channel so it doesn't stop here and goes beyond borders. Congratulations and success.
Glad to hear that!
At around 5:57:00 I was having an issue with useSession() in a client component. It wouldn't load the session on initial page load. If you're stuck on this, create a layout.tsx file in the (protected) route group and put the SessionProvider there. This fixed it for me.
Thank you very much sir!
I've been struggling with this for hours, thank you very much!
Let me add some word for people who are searching for this solution
client - first load - refresh - login - session - not showing
Thanks antonio, I am learning tons of skills from your content. Happy new year🎉
Happy new year!
It looks like a very robust tutorial and at first glance it covers all the topics that are extremely important for a real word application. Perhaps the best video on RUclips so far that deals with its topic?! Thank you for your work!
Hi Antonio! Again super good and cutting-edge tutorial. Just want to mention that when I tried it out I was using "next-auth": "^5.0.0-beta.11", and the error @3:14:09 for the session.user.role disappeared. They also updated the docs and this is the snippet now: "import { JWT } from 'next-auth/jwt';
declare module 'next-auth/jwt' {
interface JWT {
role?: 'ADMIN' | 'USER';
}
}"
My hero is back ❤❤, no words to describe what u do for us, thanks Antonio ❤
Enjoy :)
Hey Antonio, love your tutorials! Can you make a tutorial on 3D effects in Next.js? Been following since the Netflix clone - your tutorials are super helpful. Have an awesome day!
Thank you for the suggestion!
Im so gratefull about this
Glad I could help!
I’d really like to see a straight up JavaScript/TypeScript front to back course from you. Your understanding of most of these technologies is leaps and bounds above most every other content creator who does these types of videos and I feel like you could make a great tutorial for the base language. Maybe even a full on web dev course that starts with HTML and goes all through to front and back end frameworks.
Thanks Antonio for another great tutorial, it will be a very helpful one
My pleasure!
Watch at 1.5x - you will save 3 hrs..
@@sarmadrafique426 I mean if you have good knowledge in coding, then we can watch at 1.5x
@@sarmadrafique426i think your slow learner😂
No, thank you. His explanation is at a nice pacing
And learn nothing 🤡
I always use 2x speed
finally a simple ass tutorial that doesn't assume what you know and what you don't
Hope you enjoy it!
Thank you for creating this video! 🙏You did an impeccable job covering all important topics about Next-Auth. Out of all the tutorials that I've gone through, this one is by far the best! I'm looking forward learning from you in the future!👏🏽🔥
Very happy to hear that :) Thank you for watching!
He build the Clerk Auth within 8 hours
return null; won't work in the middleware, it gives "No overload matches this call" error
Don't return null, Just simply "return"
You can use instead this at 3:15:51
import type { User } from "next-auth";
import NextAuth, { DefaultSession } from "next-auth";
import { JWT } from "next-auth/jwt";
declare module "next-auth" {
interface Session {
user: Omit & { id: string, role: "ADMIN" | "BASIC" | "OWNER" };
}
}
I can't tell you how much I'm thankful that you posted such great content. I really appreciated the devotion you put into this tutorial. Thanks again!
is you completed this project ?
Your tutorial is very useful, but I got an error in auth.ts
callbacks: {
async session({ token , session }) { -- error : Property 'token' does not exist on type '({ session: Session; user: AdapterUser; } | { session: Session; token: JWT; }) & { newSession: any; trigger?: "update" | undefined; }'
console.log(token);
return session;
},
async jwt({ token }) {
return token;
}
}
this is library bug, and it still happen in 5.0.0 beta 5
What is the solution?
@@miksterdam ignore it and wait version beta 6
thank you dear@@duykhanhnguyen9274
Thought so... thanks@@duykhanhnguyen9274
Antonio. Always coming through for me.
Thanks for all you do. It's been great learning from you in 2023. Wishing you an even better 2024.
Thank you very much and wish you all the best as well!
Hi Antonio. There is no need to get user from database in jwt callback in auth.ts. User object is available in jwt callback when a user logins. Just pass it along with token as a parameter. Jwt callback is called when a user logins and when session is accessed. User object is populated with data only when a user logins, but when jwt callback is triggered by accessing the session user object is undefined. So it is important to check if user object exists before copying data from it to the token.
Thanks for clearing that up! Have you tried this with updating the session? For me the session did not update using this method
@@codewithantonio Yes, my session gets updated upon my login. I'd show my code but it looks like I can not paste code here.
Thanks I needed this as I cannot call db from there. An error about edge is showing up.
i use it and success:
async session({ session, token, user }) {
if (token?.token) {
session.token = token.token;
}
return session;
},
async jwt({ token, account, profile, user }) {
if (user?.token) {
token.token = user.token;
}
return token;
},
Thanks mr., this is a good suggestion. I will try it in my project.
In line with the rest of the comments: Thank You very much, Antonio. This is truely an awesome topic for NextJS starters like me in 2024. I've done the Trello Tutorial and I'm amazed by the code-consistency and quality.
Thank you for watching :)
i cant catch error.type CredentialsSignin
any solution?
I'm getting callbackrouteerror instead of credentialssignin
@@user-xg1jv4rw7e I'm also receiving only callbackrouteerror
catch (error) {
if (error instanceof AuthError) {
switch (error.type) {
case "CallbackRouteError":
return { error: "Invalid credentials!" };
default:
return { error: "Something went wrong!" };
}
}
throw error;
}
@@user-xg1jv4rw7e console.log(error.type) return same type callbackrouteerror
Hey Antonio, Please make a video about next auth new version! I installed next-auth@^5.0.0-beta.5 instead of ^5.0.0-beta.4
now even If I go to ^5.0.0-beta.4 it gives types error! Please make a small video to fix it!
After spending several hours troubleshooting, I have finally found this tutorial and was able to resolve the issue with my assignment project. Thank you for your help.
What a series it is.
I was about to read the next auth js document, then your video arrived. It is very helpful. Thank you ❤❤❤❤
Hope you enjoy it!
@@codewithantonio Yes offcourse sir, 2 hours still left
I have also watched 4 projects from your playlist
Amazing tutorial! Meanwhile just completed the 8 hours content and found some issues as of today:
1. NextAuth renamed 'update' to 'unstable_update' in beta5 (the official repo is using beta4). While Server side page shows latest user session values properly, client side page always fail to keep up.
2. In order to double check the issue, I cloned the official repo provided by Antonio above. After logged in with credentials, goto settings and change the role, the Server side page still showing old role value while Client side page shows the latest role, which is different from the video content.
Antonio did mention that it is an inconsistent behavior so far. Sadly this bug makes the repo not usable in production. But still a great learning experience!
Thanks again!
Thank you for watching!
Hello, is there any update on it? Is it consistent now?
Considering how disastrous Auth.js documentation is right now, this material is a raw gold!
This is the Course I was looking for!! Now I understand auth from the basics. Thank you
Glad it was helpful!
Awesome video, thank you very much. For anyone wanting to bypass the issue of duplicate verification at the 4:42:00 mark, one option is while in development to disable reactStrictMode by adding the following to next.config.js. You can set to true or false as needed. NextJS 13.4 and up I believe this value is "true" by default.
module.exports = {
reactStrictMode: false,
}
Bro, this is by far one of the most complete coding tutorials i've ever seen on yt. Amazing job ;)
Glad it helped!
Nowadays, RUclips isn't rewarding long videos as much as before, but as always, I continue to watch your videos and learn from them. I leave comments and give thumbs up to show my support for you. You've done a great great job! Keep it up, bro.😁
Absolutely! Your expertise is truly impressive and has won me over. I'd like to suggest a topic for your next project - an inventory management system. Given your skills, I believe delving into this area would be highly beneficial and insightful for your audience. Thank you for considering this suggestion.
I cannot express how much grateful I am to be able to learn so much in one single tutorial. The code you provided not just user friendly but also very elegant to use. Thank's a ton!
Cant stress enough how valuable this video is! Just an update I found, authjs pushed a pr that updated that fixed the docs for the type augmentation and it matches your solution to the issue as well!
Thank you for watching, hope you enjoyed!
Just watched all 8 hour long video. I am happy that I found your channel! Keep up the good work man! +1
Thank you for watching the entire thing!
Just what I needed to implement credentials login using next-auth v5. Thanks for all you do, great work!
Glad you like it!
From the bottom of my heart, I would like to say Thank you so much Antonio. Your ability to explain complex topics in such a clear and simple manner is truly appreciated. Looking forward to more of your interesting and advanced tutorials. Once again, thanks a lot ❤.
I'm learning so much with this complete tutorial, so much clearly and updated!
Keep doing more of this guides :D
So happy to hear that! ❤️
bro, shadcn/ui is just incredibly well written, I definetely using this style for coding my components
The best tutorial so far nextjs 14 and nextauth. Really got in the nitty gritty as the documentation of nextauth is not up to date. I am switching back from Clerk to nextauth as well. Thanks Antonio!
Glad you liked it!
That is much much simplified and straight foreward.I Hope that in future there will be more foundational tutorials like that😊😊
Glad you enjoy these different types of videos :)
Watching the Middleware & Login chapter and thinking that making proper and good auth is an art because I don't even know how to come up with that many solutions and proper steps to do such things from scratch. Just need some summary/outline/notes to do so step by step. Or spend much time to summarly do all of these after bugs, requirements, etc. And how new people who can appear on the project to fix or change smth can even understand what has been done, why and with what logic? For me now it's a kinda complicated topic) So need real practice. Thanks for sharing.
Extending the type of Session.User to include role worked for me as:
In file next-auth.d.ts
import NextAuth, {AdapterUser, User, DefaultSession} from "next-auth";
import { JWT } from "next-auth/jwt";
declare module "next-auth" {
interface Session {
user: User & { role?: 'USER' | 'ADMIN' }; // Add the optional 'role' property
}
}
declare module "next-auth/jwt" {
interface JWT {
role?: 'USER' | 'ADMIN'; // Add the optional 'role' property
}
}
Hi, Antonio, your classes are great. Could you provide a tutorial on setting up VSCode, including recommended extensions, commands for quick code generation, and how to customize the terminal to match your preferred format?
Ok, you're tutorial is just perfect. Couldn't be more.
One funny thing though, your voice sounds more legit with 1.25 speed than normal speed xD
2:31:54 If you use `return null'` under `if (isApiAuthRoute)` and see error, simply remove "null" after "return",. just leave"return;". It will fix the bug
Thank you very much Antonio, I don't even speak English and I still give my all to learn all your content, which is fantastic and impressive.
You have very big dedication and I hope you will reach your goals! Enjoy the video!
When I was struggling with OAuth, implementin it into NextJS login system. At the same exact moment some gigachad was uploading 8 hours course about all my problems, thanks brother
glad I could help!
Type problem at 03:11:20 - resolved, you can declare the types like this:
declare module "@auth/core/adapters" {
interface AdapterUser {
password: string
role: "ADMIN" | "USER"
}
}
declare module "@auth/core/jwt" {
interface JWT {
role: "ADMIN" | "USER"
}
}
Thanks for the tip!
I'm taking this tutorial step by step, and it is an incredible work, Antonio.
so happy to hear that
the most useful 8 hours I have spent on RUclips in the last 8 years
give this guy a Nobel prize
thank you very much ❤️
@@codewithantonio thank you for your super great effort
Best video for beginners who want to dive in nextjs without watching or having any other video tutorials knowledge.
Love you bro ❤
Very happy my video helped you!
This man is carrying all the NextJS content on youtube💪🏾💪🏾 keep it going!
Appreciate that!
Wow! Thank you so much, Antonio! This is by far the best Next JS tutorial from ones out there!
Happy to hear that! Enjoy!
Man, you always drop about the topics i need, love the content
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... 😉
Thanks for this Gem. The quality of your tutorials is unmatched
Happy to hear that!