Next Auth V5 - Advanced Guide (2024)

Поділитися
Вставка
  • Опубліковано 25 січ 2025

КОМЕНТАРІ • 1,9 тис.

  • @codewithantonio
    @codewithantonio  Рік тому +438

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

    • @NaniwaRocky
      @NaniwaRocky Рік тому +5

      Professional stuff as to be expected from Antonio! Many thanks! ❤

    • @ilyaasomar9173
      @ilyaasomar9173 Рік тому +1

      thank you you did awasome tutorial.

    • @raymondmichael4987
      @raymondmichael4987 Рік тому +3

      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 🇹🇿

    • @baptistefuseau1332
      @baptistefuseau1332 Рік тому +1

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

    • @Yahya_Umar
      @Yahya_Umar Рік тому +2

      Your content is amazing! Could you consider creating a video about Inventory Management Systems? Your expertise would make it incredibly valuable. Thanks!.

  • @adabooost
    @adabooost 11 місяців тому +111

    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.

    • @eness_ctnn
      @eness_ctnn 11 місяців тому +8

      i was searching all of the internet for this solution thank you mate

    • @thiettruong7381
      @thiettruong7381 11 місяців тому +5

      @@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,

    • @mideolaniyi
      @mideolaniyi 11 місяців тому +4

      thank you, it worked

    • @mideolaniyi
      @mideolaniyi 11 місяців тому +5

      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

    • @gendev1105
      @gendev1105 11 місяців тому

      return NextResponse.next();
      don't forget to import :
      import { NextResponse } from "next/server";
      this works for me!

  • @santech5669
    @santech5669 Рік тому +271

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

  • @bobbuilder2837
    @bobbuilder2837 Рік тому +133

    This tutorial needs to be in official NextAuth documentation.

    • @codewithantonio
      @codewithantonio  Рік тому +8

      Glad you like it!

    • @Besaoct
      @Besaoct 8 місяців тому +4

      ​@@codewithantonio hey! It's not working properly in production (middleware and redirections)

    • @iganic7574
      @iganic7574 7 місяців тому +1

      Is you have completed this project?

    • @Besaoct
      @Besaoct 7 місяців тому

      @@iganic7574 yeah

    • @Team-hf7iu
      @Team-hf7iu 3 місяці тому

      ​@@BesaoctThere must be something wrong with what you did, it should work

  • @0xOmzi
    @0xOmzi Рік тому +41

    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 🙌🏽😁.

  • @jonathanbaird1633
    @jonathanbaird1633 8 місяців тому +117

    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.

    • @deadgun0817
      @deadgun0817 8 місяців тому +4

      Thanks for sharing these with us 🙏

    • @someshkarmakar47
      @someshkarmakar47 8 місяців тому +8

      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 UA-cam.

    • @shivamsaxena7378
      @shivamsaxena7378 Місяць тому

      This was really helpful Jonathan! Thank you for taking the time to write this comment :)

  • @ypeng5811
    @ypeng5811 Рік тому +45

    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
    @Triple._.A Рік тому +31

    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!

    • @paulks9771
      @paulks9771 Рік тому +9

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

    • @michaelmiller7264
      @michaelmiller7264 10 місяців тому +5

      I always perceive Clerk as SCAM. Most UA-camrs mention them because they're paid to promote them. 🤢🤢🤢

    • @siddhisalvi1628
      @siddhisalvi1628 3 місяці тому

      Hi am actually developing website right now but this is about just desktop what about mobile or tablet version? I want to watch everything but I am stuck thinking should I continue whole things knowing there won't be anything for mobile version or responsive site?

    • @kento_10
      @kento_10 Місяць тому

      ​@@siddhisalvi1628 Hey! The tutorial mainly focuses on authentication logic rather than styling. To make your website responsive for mobile and tablet versions, you can enhance it using Tailwind CSS. It’s super flexible and allows you to add responsive design effortlessly. Don’t worry-you don’t need to redo everything. Just tweak the existing styles with Tailwind’s responsive utilities. You’ve got this! 💪

  • @ValeryFlutter
    @ValeryFlutter Рік тому +59

    If there were a UA-cam 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 UA-cam 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.

  • @eshw23
    @eshw23 Рік тому +169

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

    • @codewithantonio
      @codewithantonio  Рік тому +68

      I would be happy to do more like this if people like it :)

    • @0xYounes
      @0xYounes Рік тому +12

      @@codewithantonioI agree with him, Please do more like this!

    • @mohdali-yq8gq
      @mohdali-yq8gq Рік тому +9

      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.

    • @rikki7663
      @rikki7663 Рік тому

      @@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"

    • @mediacreatif
      @mediacreatif Рік тому +3

      Yes because he already made clones of all famous apps 😂😂😂

  • @KramCodes
    @KramCodes Рік тому +22

    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!

    • @codewithantonio
      @codewithantonio  Рік тому +1

      Thank you for that insight, it definitely confused me. I will explore!

    • @KramCodes
      @KramCodes Рік тому +19

      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.

    • @CaseStudyQB
      @CaseStudyQB 11 місяців тому

      @@KramCodes I love how the teacher and students learn together! Antonio is my newest favorite teacher on youtube! Much love!

    • @true227
      @true227 9 місяців тому

      @KramCodes could you to write example of the user object?

    • @GeniusHawlah
      @GeniusHawlah 9 місяців тому +1

      @@KramCodes On adding my custom fields, the adapter started throwing type error too

  • @Fiiilipes
    @Fiiilipes Рік тому +19

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

    • @codewithantonio
      @codewithantonio  Рік тому

      Hope you enjoy it!

    • @CoryTheSimmons
      @CoryTheSimmons Рік тому +2

      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.

  • @unknownheart-x
    @unknownheart-x 11 місяців тому +5

    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

  • @anonymouseverx
    @anonymouseverx Рік тому +6

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

    • @codewithantonio
      @codewithantonio  Рік тому

      Thank you for the kind words, I am happy I could be of help!

  • @nemeziz_prime
    @nemeziz_prime Рік тому +9

    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
    @epatrickification Рік тому +5

    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!

  • @Tapadar.Monsur
    @Tapadar.Monsur Рік тому +12

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

  • @nasko235679
    @nasko235679 10 місяців тому +3

    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.

  • @sodiqardianto
    @sodiqardianto 9 місяців тому +3

    damn, 8 hours auth next js, I finished it in 3 weeks. thanks man u mean a lot for us. god bless you

  • @OulidenReudaL
    @OulidenReudaL 2 місяці тому +2

    Antonio, thanks to you 😊 I’ve been able to develop my first session system in Next.js. I can’t thank you enough! 🙌 I’ll keep the ads running and share the video 📢. Finally, someone who makes a session video the right way! 💪✨ Greetings and a big hug from the Canary Islands, Spain 🇪🇸🌴.

  • @iMarkyJD
    @iMarkyJD 5 місяців тому +18

    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.

    • @miq_5239
      @miq_5239 5 місяців тому +3

      Thank you very much sir!

    • @spuknan
      @spuknan 5 місяців тому +1

      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

    • @femelipe
      @femelipe 4 місяці тому

      Hey guys, I'm pretty much stuck with the sign out behaviour,
      it is not working.. When I hit the sign out button it refreshes the page but my session is still there.. It works with the previous implementation though (the one before starting this chapter)
      has anyone ran into this?

    • @iMarkyJD
      @iMarkyJD 4 місяці тому +1

      @@femelipe I think I had to add a redirectTo option to fix this: `await signOut({ redirectTo: "/auth/login" });`

    • @fahrizakurniawan9959
      @fahrizakurniawan9959 3 місяці тому

      @@iMarkyJD thanks

  • @삼장-c2z
    @삼장-c2z Рік тому +6

    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!

  • @softdevstuff1008
    @softdevstuff1008 Рік тому +7

    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.

  • @kungfinehow
    @kungfinehow 8 місяців тому +2

    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.

  • @antareephasan
    @antareephasan Рік тому +3

    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

  • @heguer87
    @heguer87 Рік тому +8

    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!

    • @codewithantonio
      @codewithantonio  Рік тому +1

      Thank you very much, hope you are enjoying it :)

  • @StudyBuddy-jj5pb
    @StudyBuddy-jj5pb 5 місяців тому +3

    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.

  • @graphicdesigner8710
    @graphicdesigner8710 3 місяці тому +1

    I really liked the callbacks part, specially that u show the problems you had and then gave the sulution instead of just giving the working code
    thaanks man for such a detailed explanation!

  • @erickandrade154
    @erickandrade154 Рік тому +4

    This is absolutely amazing. Thanks Antonio for all this year!

  • @dambujopaulo4204
    @dambujopaulo4204 11 місяців тому +1

    This is the best tutorial I have come across on UA-cam, 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.

  • @ferdinandeke9590
    @ferdinandeke9590 Рік тому +3

    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.

    • @matheus.maiberg
      @matheus.maiberg 10 місяців тому

      Makes no sense to use both together.
      Both are backend framworks.
      React + Nest.js, this wold make sense.

  • @shashankjaiswal3653
    @shashankjaiswal3653 5 місяців тому +8

    Hey Antonio!
    At 3:11:00 we can use this code
    declare module "next-auth" {
    interface Session {
    user: {
    role: UserRole;
    } & DefaultSession["user"]
    }
    }
    and then session.user.role = token.role as UserRole;
    I hope this helps. Source : AuthJS Docs

    • @israx2
      @israx2 2 місяці тому

      Thanks bro!

    • @yun411
      @yun411 Місяць тому

      Thank you !

  • @godfreyowino1525
    @godfreyowino1525 Рік тому +35

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

  • @theMrM_
    @theMrM_ 8 місяців тому +1

    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

  • @desuchanz4956
    @desuchanz4956 11 місяців тому +12

    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)

    • @ankurdatta586
      @ankurdatta586 9 місяців тому

      Thanks a lot!

    • @fahrizakurniawan9959
      @fahrizakurniawan9959 4 місяці тому

      thanks 🙏

    • @fazalkarim5595
      @fazalkarim5595 3 місяці тому +1

      thanks a lot brother ,love your effort🔴

    • @draganpetrovic4738
      @draganpetrovic4738 3 місяці тому +2

      Maybe it is better to add a guard to check if the id exists since can potentially be undefined, something like if (!user.id) return false; and after that you will not have this error anymore.

    • @darthrayder94
      @darthrayder94 9 днів тому

      @@draganpetrovic4738 yes that is the best approach to avoid runtime error if (!user.id) return false;

  • @StudyBuddy-jj5pb
    @StudyBuddy-jj5pb 5 місяців тому +1

    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.

  • @eguenou
    @eguenou Рік тому +4

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

  • @rainchei
    @rainchei 9 місяців тому

    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!

  • @user-bt1rh9rt8j
    @user-bt1rh9rt8j 10 місяців тому +4

    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)

    • @simplatory802
      @simplatory802 8 місяців тому

      Hey, could you share the codebase with me? It's paywalled now

  • @YuriyChamkoriyski
    @YuriyChamkoriyski 11 місяців тому +1

    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';
    }
    }"

  • @beyondthoughts2740
    @beyondthoughts2740 Рік тому +7

    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

    • @codewithantonio
      @codewithantonio  Рік тому +8

      Definitely planning on doing some react native as well! Enjoy the content and continue improving! you can do it!

  • @nmdpa3
    @nmdpa3 9 місяців тому +2

    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,
    }

  • @tstkenny
    @tstkenny 11 місяців тому +4

    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!

    • @codewithantonio
      @codewithantonio  11 місяців тому

      Thank you for watching!

    • @cangorkemgunes
      @cangorkemgunes 5 місяців тому

      Hello, is there any update on it? Is it consistent now?

    • @kento_10
      @kento_10 Місяць тому

      ​@@cangorkemgunes Hey! Maybe you just need to revalidatePath in your settings.ts
      await db.user.update({
      where: { id: dbUser.id },
      data: {
      ...values,
      },
      });
      // here
      revalidatePath("/settings");

  • @Lic_JJ
    @Lic_JJ Рік тому +2

    Im so gratefull about this

  • @novaardiansyah6254
    @novaardiansyah6254 Рік тому +6

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

  • @carlosFdez77
    @carlosFdez77 6 місяців тому +2

    Thanks for the video!! Awesome! I want to add a tip about session:
    Now in Auth.js, the method update from NextAuth is named "unstable_update". So I supose that they have problems to update the session from server side. Other solution is clean the cache from the page /settings. Adding revalidatePath('/settings') after update the user data update the session in client and server side.

  • @riteshKumarWebDeveloper
    @riteshKumarWebDeveloper 3 місяці тому +3

    Hello Antonio, thank you for this amazing tutorial. I have completed the video and developed the project. It was an amazing experience. Thank you so much dor this quality of content.

  • @christopherlonzo
    @christopherlonzo Рік тому +2

    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!👏🏽🔥

    • @codewithantonio
      @codewithantonio  Рік тому

      Very happy to hear that :) Thank you for watching!

  • @GeniusHawlah
    @GeniusHawlah 9 місяців тому +6

    If you're having the TypeScript error around 2:31:00 just return everywhere you're returning null

    • @true227
      @true227 9 місяців тому

      i have such error with types of req . Could you explain more precisely what i need to do?

    • @true227
      @true227 9 місяців тому +1

      yes, i just removed null and now it's only return; :)

  • @doguarunbayraktar
    @doguarunbayraktar Рік тому +2

    Just watched all 8 hour long video. I am happy that I found your channel! Keep up the good work man! +1

  • @omkarghodake4985
    @omkarghodake4985 10 місяців тому +6

    return null; won't work in the middleware, it gives "No overload matches this call" error

    • @Samkhan7t3
      @Samkhan7t3 5 місяців тому +3

      Don't return null, Just simply "return"

  • @martinvalenzuelamagallanes640
    @martinvalenzuelamagallanes640 11 місяців тому +1

    I was struggling with the next-auth v5 because of lack of documentation, this video really helped me! Thanks!

  • @LittleVidds
    @LittleVidds 4 місяці тому +4

    6:55:52 for some reason the update() function works fine for client components but server components do not update. On the other hand, if this function is not used the server component updates nicely. Anyone else having this issue?
    Also, if you enter the wrong code for 2FA, you are unable to resubmit as the state of the email and password is lost (which I am assuming is due to the short circuit conditional rendering of the components).
    EDIT: Issue was brought to attention around 7:30:00. Basically the update function is unstable as of now :/

    • @harshitpant07
      @harshitpant07 2 місяці тому +1

      for me sometimes it works perfectly fine with update and sometimes it update for a sec and then revert back to previous i dont know may be its because of caches or something else and the we are using with usesession is update (which is used with JWT) and the unstable one is provided by next-auth with func like sign signout this one is total sh*t

    • @kedarbabaleshwar9922
      @kedarbabaleshwar9922 Місяць тому +2

      In actions/setting.ts i used revalidatePath like this
      revalidatePath("/server");
      return { success: "Settings updated" }; and my server component updated.

  • @maka55567
    @maka55567 8 місяців тому +1

    2 hours into the video I've already grabbed a whole lot. Thanks for this wonderful quality content.

  • @maimunatwork
    @maimunatwork Рік тому +4

    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!

  • @A.Dalton
    @A.Dalton Рік тому +1

    Man, you always drop about the topics i need, love the content

  • @신비-w3l
    @신비-w3l 7 місяців тому +1

    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!

    • @iganic7574
      @iganic7574 7 місяців тому

      is you completed this project ?

  • @rotanapisey4953
    @rotanapisey4953 Рік тому +6

    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;
    }
    }

    • @duykhanhnguyen9274
      @duykhanhnguyen9274 11 місяців тому +1

      this is library bug, and it still happen in 5.0.0 beta 5

    • @miksterdam
      @miksterdam 11 місяців тому +1

      What is the solution?

    • @duykhanhnguyen9274
      @duykhanhnguyen9274 11 місяців тому +3

      @@miksterdam ignore it and wait version beta 6

    • @rotanapisey4953
      @rotanapisey4953 11 місяців тому

      thank you dear@@duykhanhnguyen9274

    • @miksterdam
      @miksterdam 11 місяців тому

      Thought so... thanks@@duykhanhnguyen9274

  • @prabeshnarsinghkunwar1540
    @prabeshnarsinghkunwar1540 11 місяців тому +2

    This is the Course I was looking for!! Now I understand auth from the basics. Thank you

  • @true227
    @true227 4 місяці тому +4

    5:59:13 don't forget add redirectTo: await signOut({ redirectTo: "/auth/login" });

  • @victorgabrielreis8586
    @victorgabrielreis8586 11 місяців тому +1

    I'm learning so much with this complete tutorial, so much clearly and updated!
    Keep doing more of this guides :D

  • @ddofvideos
    @ddofvideos 8 місяців тому +2

    Hi Antonio,
    I have completed this course 5 times, re-recording and refining it each time. However, I'm experiencing an issue with signing out on the server side. Specifically, when I try to log out, the path does not update correctly. For example, in your video, the sign-out button on the settings page uses the use server directive and should redirect to the login page. However, when I log out, the URL remains at localhost:3000/settings. Is there a fix for this? Currently, I need to refresh the page to update the path.

    • @luiscifuentes1581
      @luiscifuentes1581 8 місяців тому +1

      Use:
      action={async () => {
      'use server';
      await signOut({ redirectTo: '/auth/login' });
      }}
      in button logout

    • @ddofvideos
      @ddofvideos 8 місяців тому

      @carl-arashi yes action={async () => {
      'use server';
      await signOut({ redirectTo: '/auth/login' });
      }}

    • @edychandra3479
      @edychandra3479 5 місяців тому

      @@luiscifuentes1581 it was working with me perfectly, thanks

    • @harshitpant07
      @harshitpant07 2 місяці тому

      export const logoutAction = async () => {
      try {
      await signOut({ redirectTo: "auth/login" });
      } catch (err) {
      if (err instanceof AuthError) {
      console.log("> Login failed: " + err.message);
      }
      throw err;
      }
      };
      this sends me to /undefined route
      but this works fine
      ```
      Sign Out
      ```

  • @Enzo-td4ch
    @Enzo-td4ch 4 місяці тому +3

    Guys I have a problem and I don’t know how to resolve it. When I login with credentials in server side with signIn function (in auth.ts) and after the redirectTo /home the client session is not trigger and I need to manually reload the page to trigger. And in the video this problem don’t appear … If someone can help me

    • @Lukiiino
      @Lukiiino 4 місяці тому +1

      Hi! Try to move component in (protected) folder's layout file. Tell me if this helped you! :)

    • @christy_berry
      @christy_berry 5 днів тому

      ​@@Lukiiinoit did help me, thanks!

  • @ashishpatel6078
    @ashishpatel6078 Рік тому +2

    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 ❤❤❤❤

    • @codewithantonio
      @codewithantonio  Рік тому +1

      Hope you enjoy it!

    • @ashishpatel6078
      @ashishpatel6078 Рік тому +1

      @@codewithantonio Yes offcourse sir, 2 hours still left
      I have also watched 4 projects from your playlist

  • @dharanigowtham3731
    @dharanigowtham3731 7 місяців тому +3

    He build the Clerk Auth within 8 hours

  • @juanevillam
    @juanevillam 8 місяців тому +1

    Bro, this is by far one of the most complete coding tutorials i've ever seen on yt. Amazing job ;)

  • @ziacodes
    @ziacodes Рік тому +4

    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!

  • @GeniusHawlah
    @GeniusHawlah 9 місяців тому +2

    Considering how disastrous Auth.js documentation is right now, this material is a raw gold!

  • @kharisovruslan5523
    @kharisovruslan5523 7 місяців тому +6

    i cant catch error.type CredentialsSignin

    • @PauloRdeOFerraz
      @PauloRdeOFerraz 7 місяців тому

      any solution?

    • @user-xg1jv4rw7e
      @user-xg1jv4rw7e 7 місяців тому +5

      I'm getting callbackrouteerror instead of credentialssignin

    • @PauloRdeOFerraz
      @PauloRdeOFerraz 7 місяців тому

      @@user-xg1jv4rw7e I'm also receiving only callbackrouteerror

    • @Mukuthasan
      @Mukuthasan 7 місяців тому

      catch (error) {
      if (error instanceof AuthError) {
      switch (error.type) {
      case "CallbackRouteError":
      return { error: "Invalid credentials!" };
      default:
      return { error: "Something went wrong!" };
      }
      }
      throw error;
      }

    • @kharisovruslan5523
      @kharisovruslan5523 7 місяців тому

      @@user-xg1jv4rw7e console.log(error.type) return same type callbackrouteerror

  • @sukritiguin5637
    @sukritiguin5637 4 місяці тому +1

    This tutorial was absolutely mind-blowing! 🔥 The way you broke down the advanced authentication methods in Next Auth V5 and Next.js 14 was simply brilliant. From setting up credentials and OAuth providers to implementing features like email verification, two-factor authentication, and user roles, every single step was crystal clear and easy to follow.
    The inclusion of server actions, role-based access, and middleware usage was exactly what I needed to take my skills to the next level. The detailed explanations of extending sessions and exploring callbacks were just top-notch. Plus, the clean UI and smooth user experience you demonstrated throughout the video made everything look so professional!
    I have to say, you truly deserve millions of subscribers and millions of views for the incredible effort and passion you put into your tutorials. The dedication you show in creating such high-quality content is inspiring. Salute to your hard work and efforts-I'm really grateful for everything I learned here. Thank you so much! 👏🙏

  • @vishnu-krishna108
    @vishnu-krishna108 11 місяців тому +97

    Watch at 1.5x - you will save 3 hrs..

    • @vishnu-krishna108
      @vishnu-krishna108 10 місяців тому

      @@sarmadrafique426 I mean if you have good knowledge in coding, then we can watch at 1.5x

    • @ajaya9541
      @ajaya9541 9 місяців тому +5

      ​@@sarmadrafique426i think your slow learner😂

    • @mleite1
      @mleite1 9 місяців тому +2

      No, thank you. His explanation is at a nice pacing

    • @muhammaduseram9405
      @muhammaduseram9405 9 місяців тому +9

      And learn nothing 🤡

    • @p-00190
      @p-00190 8 місяців тому +3

      I always use 2x speed

  • @dyashwanth9822
    @dyashwanth9822 9 місяців тому

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

  • @falcan7752
    @falcan7752 Рік тому +2

    What an awsome project mate 🥳 Happy New Year!!!!!

  • @yiannis_p
    @yiannis_p Рік тому +1

    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!

  • @prepperdon
    @prepperdon Рік тому +1

    Just what I needed to implement credentials login using next-auth v5. Thanks for all you do, great work!

  • @ZadSoleimaninia
    @ZadSoleimaninia Рік тому +1

    Wow! Thank you so much, Antonio! This is by far the best Next JS tutorial from ones out there!

  • @bluestar1810
    @bluestar1810 8 місяців тому

    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.

  • @collinsk8754
    @collinsk8754 9 місяців тому +1

    Great tutorial ! A critical point he mentions from 2:46:22 on throwing the error that is necessary for NextJS redirect to happen. Without this you may encounter problems logging in.

  • @ianalfwani7638
    @ianalfwani7638 10 місяців тому +1

    Thanks for this Gem. The quality of your tutorials is unmatched

  • @carlaalves08
    @carlaalves08 2 місяці тому +1

    This is the best tutorial I've ever seen. The most complete, detailed tutorial. And very useful for any project to be done. Thank you! 😊🤗🙏

  • @djubadjuba
    @djubadjuba Рік тому +1

    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!

  • @suvaranjanpradhan-s4f
    @suvaranjanpradhan-s4f 3 місяці тому +1

    OHH BOY... This is one of great tutorial of authjs including nextjs concepts.Big Thanks to Antonio. You're the best.

  • @guigabelline
    @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... 😉

  • @AjaySingh-jz8qx
    @AjaySingh-jz8qx Рік тому +1

    That is much much simplified and straight foreward.I Hope that in future there will be more foundational tutorials like that😊😊

    • @codewithantonio
      @codewithantonio  Рік тому +1

      Glad you enjoy these different types of videos :)

  • @Pikapi259
    @Pikapi259 7 місяців тому +1

    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

  • @geolvz
    @geolvz Рік тому +1

    This is the best video on Next Auth out there, thanks Antonio!!

  • @asaserge
    @asaserge 7 місяців тому

    This is the first best video I've come across that touches everything about authentication abd authorization with next js, thank you so much 🎉

  • @thefabiosiqueira
    @thefabiosiqueira Рік тому +2

    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?

  • @mohdali-yq8gq
    @mohdali-yq8gq Рік тому +2

    What a great and useful tutorial on next auth and it is really millennium video on UA-cam platform. You have undoubtedly covered very, very useful concepts which can be a great help to uncountable peoples. At last may the new year bring peace and happiness all over the word and our legitimate dreams come true. At last but not the least Thanks Mr. Antonio for post such a wonderful contents and that too free.

    • @codewithantonio
      @codewithantonio  Рік тому

      Thank you for the kind words. I am very happy my video is helpful and wish you all the best in 2024!

  • @friedrichsiever5964
    @friedrichsiever5964 11 місяців тому +1

    Thank you so much for this wonderful tutorial. A masterpiece. Especially when I consider that I couldn't get anything remotely useful from the auth.js documentation. Without your amazing tutorial I would definitely have given up.

    • @codewithantonio
      @codewithantonio  11 місяців тому

      Glad it helped! Thank you for watching!

  • @ahmadbilalfarooqi
    @ahmadbilalfarooqi Рік тому +1

    this is another good one tutorial Antonio, your contribution in tech era is mind-blowing...your teaching style is so impressive
    you explained every step in baby style...i have no more word...great great great....keep it up

  • @dopplermov
    @dopplermov Рік тому +1

    I finally found the full and advanced course about NextJs... and it's free! Thanks for your job

  • @nathanminarik2809
    @nathanminarik2809 6 місяців тому +1

    This is the best tutorial I've taken. Extremely well done. Please keep doing these!

    • @codewithantonio
      @codewithantonio  6 місяців тому +1

      Thank you so much ❤️

    • @nathanminarik2809
      @nathanminarik2809 6 місяців тому

      @@codewithantonio Thank YOU so much! It was super helpful for a side project I'm working on. I went ahead an purchased a month subscription to your larger site because of it. Going to try and combine this tutorial with the finance app tutorial you have and replace clerk with this auth flow and also drizzle with prisma.

  • @kedarvyas7134
    @kedarvyas7134 9 місяців тому +2

    Soo cool man, loved this tutorial videos along with the project videos, keep up this good work antonio, God Bless you !

    • @kedarvyas7134
      @kedarvyas7134 9 місяців тому +1

      Hey there,
      I'm really enjoying your tutorials, but I've noticed something that's been bugging me. First of all, I'm MERN dev for about a year and a half, and I've got a decent grasp of the theory of NEXT, but I lack practical experience. That's why I turned to your videos to learn, but I've found myself just copying your code without fully understanding why you're doing things the way you do.
      It seems like you've already set up a file structure, and I'm just supposed to follow along without understanding the reasoning behind it. I think it would be really helpful if you could start your tutorials from scratch, showing us the initial code you write, rather than jumping into a project that's already partly done. I bet your first attempts at these projects involved a lot of brainstorming and problem-solving, and that's the kind of content people like me would find super valuable.
      Anyway, just a suggestion! I think you're a great developer and teacher, and I'm looking forward to more of your content. Sending love from India!

  • @earnReward-y8o
    @earnReward-y8o Рік тому +1

    Best video for beginners who want to dive in nextjs without watching or having any other video tutorials knowledge.
    Love you bro ❤

  • @oluwaseunladeinde410
    @oluwaseunladeinde410 11 місяців тому

    Hi Anthonio. This is simply amazing. I was wondering why you decided to go this route since Clerk was already doing a great job. But I followed along nonetheless. I learned a couple of new nextjs skills along the way. You always drop gems. Thank you for the amazing content you share all the time.

  • @dogcodes
    @dogcodes Рік тому

    I wanna say how much this helped me in learning authentication, I've not particularly used nextAuth and used iron-session instead but your tutorial on the use client, server actions, middleware as well as the coding practice and over all knowledge really helped me. Thank you

    • @Ismail-hd4yz
      @Ismail-hd4yz 8 місяців тому

      From noob now i can handle complete authentication after completing this 😅

  • @gustavoferreira5622
    @gustavoferreira5622 Рік тому +1

    You teach so well that I watch your videos to learn how to program in React Native. and I learned a lot about authentication, thank you so much you are amazing!!!

    • @codewithantonio
      @codewithantonio  Рік тому

      Great to hear! I will be doing some RN in the future

  • @MusicWorld-lq2yn
    @MusicWorld-lq2yn 4 дні тому

    3:11:16
    For anyone struggling with NextAuth, Prisma, and TypeScript when trying to use a Prisma enum (like Role), here’s the quick fix: import the enum in a next-auth.d.ts file, extend the NextAuth interfaces via declare module "next-auth" to add your custom properties (e.g. session.user.role), and be sure to include that file in your tsconfig.json "include" array. That way, TypeScript won't flip out with "Type '{}' is not assignable to type 'Role'" errors. Hope this helps!

  • @shahabulalam8803
    @shahabulalam8803 Рік тому +1

    For God sake I was expecting this from you........................many times I thought I would I request you but here it is. So nice of you antonio............Thanks lot