Auth.js V5 From Scratch

Hey Developers! In this video I show you how you can implement Authentication with Auth.js version 5 in Next.js Projects.
🗃️ GitHub Repo (Please Give It a Star ⭐ in GitHub): github.com/vahid-nejad/NextAu...
📖 Chapters:
0:00 Introduction
0:35 Install and Setup Next-Auth V5
02:11 Google Provider
04:13 Setup Google API Console
08:31 Next-Auth API Routes
10:53 App bar - Sign in and Sign Out Buttons
18:03 Credential Provider
24:35 Protect Client Component Pages
29:51 Protect Server Component Pages
32:24 Protect Pages with Next-Auth Middleware
36:15 Next Video Announcement

Пікірлер: 109

  • @plotitsyn
    @plotitsyn4 ай бұрын

    Another great video on Auth.js authentication. Looking forward to the full course: Next.js | PostgreSQL | Auth.js (Credential | Google | Apple | with role-based authentication), maybe even with the implementation of a user management page with the ability to change roles for each user (guest-user-admin) and a personal user account with the ability to change personal data. And, of course, thank you and good luck!

  • @AbhishekPandey-ty5jf
    @AbhishekPandey-ty5jf4 ай бұрын

    The timing can't be more perfect.

  • @paul8683
    @paul86833 ай бұрын

    Great tutorial again! Recommended your video to a few people. No other channel makes it so easy to follow and helps get the basics in place so I can focus on my project instead of the changes to next-auth.

  • @SakuraDev

    @SakuraDev

    3 ай бұрын

    Thanks 🙏🙏🙏

  • @StanOgn
    @StanOgn3 ай бұрын

    Everything you need to know about Auth.js v5! Thank you!

  • @SakuraDev

    @SakuraDev

    3 ай бұрын

    Glad you like it 😊

  • @antonrybakou
    @antonrybakou2 ай бұрын

    Hi, thank you very much! Great work! Waiting for the next video "Next-auth v5 with Refresh token rotation" ))))

  • @collinsk8754
    @collinsk87542 ай бұрын

    Great tutorial! Clear and easy to follow! 👏👏

  • @SakuraDev

    @SakuraDev

    2 ай бұрын

    Thanks a lot 🙏🙏🙏🙏

  • @poizonncs8264
    @poizonncs82644 ай бұрын

    Was eagerly waited for AuthJS5 video

  • @YondeCode
    @YondeCode16 күн бұрын

    Love you mate ! Thank you for this

  • @SakuraDev

    @SakuraDev

    16 күн бұрын

    Thanks you so much 🙏

  • @ShuaibShahzan
    @ShuaibShahzanАй бұрын

    Explained in a easily understandable language, especially for newbie like me, thank you so much. May god bless you!

  • @SakuraDev

    @SakuraDev

    Ай бұрын

    So happy to hear that! Thank you so much

  • @aaronanama9414
    @aaronanama94143 ай бұрын

    Thank you for your videos. I really like the way you the concepts into chapters and explain them in a beginner friendly way. Please can you do a video on typescript and next typescript

  • @yaqubadesola1839
    @yaqubadesola18392 ай бұрын

    You are indeed a lifesaver, More grease to your elbow bro

  • @SakuraDev

    @SakuraDev

    2 ай бұрын

    Thank you so much. Really glad it was helpful for you 🙂

  • @hktang13
    @hktang132 ай бұрын

    Thank you. Great video!

  • @SakuraDev

    @SakuraDev

    2 ай бұрын

    Thanks 🙏🙏🙏

  • @KubaSobecki
    @KubaSobecki4 ай бұрын

    Great vid. Thanks!

  • @SakuraDev

    @SakuraDev

    4 ай бұрын

    Thanks 🙏. I'm really glad that you liked it 😊

  • @AlexStraight-zk1ig
    @AlexStraight-zk1ig3 ай бұрын

    Awesome content man. What theme are you using here?

  • @user-kd7ld4ff4t
    @user-kd7ld4ff4t4 ай бұрын

    best explanation!!

  • @SakuraDev

    @SakuraDev

    4 ай бұрын

    Thanks 🙏🙏

  • @neliobila
    @neliobila2 ай бұрын

    This video is wonederfull, thnx a lot

  • @SakuraDev

    @SakuraDev

    2 ай бұрын

    So nice of you

  • @webdeveloper2795
    @webdeveloper27952 ай бұрын

    Really great video, bro require jWT access token and refresh token with Next Auth 5, please use express js as backend as in previous video

  • @HigherStudyAspirant
    @HigherStudyAspirant4 ай бұрын

    thanks. please make a video on next js caching.

  • @lloyd1791
    @lloyd17914 ай бұрын

    can you make the credentials provider role based?

  • @ahmedkhabar
    @ahmedkhabar2 ай бұрын

    Hi, thanks a lot for this great content, I don't know if you notice that when you sign In with incorrect credentials there is an error on the server console, any solution for this ?

  • @lemondigitaldesign
    @lemondigitaldesign3 ай бұрын

    Thanks for the great tutorial, helped me to understand v5 better :) Quick question in case you may have an idea: authorized({ request, auth }) -- the auth always comes back as null in auth.ts and in the middleware if I import it and log out the session, even though I have a session in my server and client component. I clearly log in and out and session comes back with null or session details in my components and pages. But in auth.ts the ""authorized" callback it always returns as null and in the middleware the session also returns null ... any ideas while I google this? :) P.S.: I cloned your repo and realised that in your case the callback actually does nothing, it's as if it wasn't there ... very odd. P.P.S For anyoen else cloning the repo: the middleware file is in the wrong place. It needs to be in your project root (or in "src") at the same level as your app/pages folder but nt inside the app folder. Then the middelware works and then it also invokes the callback correctly.

  • @exerge9202
    @exerge92024 ай бұрын

    Hi, can you do a video on passwordless with nodemailer (sendgrid or any api is fine) im using prisma and postgres hosted on neon and im having issues, i get the email, but cant sign in, im struggling to solve the issue and auth.js docs are still not completed

  • @MrCuteguylol
    @MrCuteguylol3 ай бұрын

    AMAZING video! Thank you so much! A question though. Im using nest ts on the backend and im getting tokens. Can you guide me how to use tokens for authentication in next auth?

  • @SakuraDev

    @SakuraDev

    3 ай бұрын

    Thanks, You should keep the tokens inside the Auth session and whenever you want to call a backend API you should put the tokens inside the header of your request to backend API

  • @darawan_omar
    @darawan_omar3 ай бұрын

    How we can do that when use login in and when he want to visit another page that not access it and logout the use l mean signout and clear the ssesion

  • @en_kratia
    @en_kratia4 ай бұрын

    Thank you

  • @SakuraDev

    @SakuraDev

    4 ай бұрын

    Thanks 😊

  • @sumonhossain889
    @sumonhossain8892 ай бұрын

    Everything you need to know about Auth.js v5! Thank you! But middleware protected not working , could you say?

  • @jocow2
    @jocow22 ай бұрын

    Great tutorial. Saved me a lot. I do see an issue however with retrieving the client session by using useSession in 1 specific usecase: refreshing the browser with F5 on the clientPage when you are logged id: useSession returns undefined. @Sakura Dev is this something where you can help with ?

  • @SakuraDev

    @SakuraDev

    2 ай бұрын

    Hey, useSession returns undefined immediately after refreshing the page but it will return the session quickly after a few seconds.

  • @jocow2

    @jocow2

    2 ай бұрын

    @@SakuraDev Thank you. How can I handle this functionally, because the 'undefined' comes into a if/then clause where we show some behaviour which we normally use for unauthenticated person (like showing a login screen). How should we solve that ?

  • @mrfirstname578
    @mrfirstname5783 ай бұрын

    can you make example @auth/express access token refresh token and next js

  • @Amyzheng-sc3ej
    @Amyzheng-sc3ej2 ай бұрын

    Thank you for the video!! But May I know why I add the AUTH_SECRET with random string,it still shows Server error There is a problem with the server configuration. Check the server logs for more information.

  • @MilindMishra
    @MilindMishra4 ай бұрын

    If possible do add your github code repository for the same, thanks

  • @SakuraDev

    @SakuraDev

    4 ай бұрын

    Hey! Added

  • @aryan.prince

    @aryan.prince

    4 ай бұрын

    ayo no way milind spotted in the wild 👀

  • @fedesolanes2189
    @fedesolanes21894 ай бұрын

    if i have my webapp with the previous version (v4), do you recommend upgrading it to v5? or u think is not worth it?

  • @MouseCodes

    @MouseCodes

    4 ай бұрын

    It's still in beta so wait

  • @darkecnelis
    @darkecnelis2 ай бұрын

    Hi, this is a good guide, but i have a little probleme i want to change the scope like "providers: [discord(auth... { params: {scope: ["my scope"] }}), credentialsConfig]" but hes doesn't work

  • @milinddhamu
    @milinddhamu3 ай бұрын

    How middleware directly redirected to sign in page if unauthorized users is accessing protected page

  • @MilindMishra
    @MilindMishra4 ай бұрын

    For some reason the middleware protection fails for my app, not sure why I did follow up with the docs but hard luck. Btw, great work on the video thanks!

  • @SakuraDev

    @SakuraDev

    4 ай бұрын

    Glad I could help

  • @MilindMishra

    @MilindMishra

    4 ай бұрын

    ​@@SakuraDev The middleware protected page isnt really protected, tried using your repository same results.

  • @MilindMishra

    @MilindMishra

    4 ай бұрын

    @@SakuraDev looks like we need to keep the middleware.ts file in the same level as the app directory if inside src when applicable, that fixed it.

  • @fiimble

    @fiimble

    4 ай бұрын

    Same here. The middlewareProtected page is always accessible.

  • @finenode8363

    @finenode8363

    3 ай бұрын

    @@MilindMishra thank you! your answer solved my issue.

  • @johnaroj
    @johnaroj3 ай бұрын

    great video!! Can I write that same logic (callbacks:{authorized({request,auth)}) inside the middleware.ts? so checking the request.nextUrl.pathname to be middlewareProtectedPage and then redirect them to the login page

  • @SakuraDev

    @SakuraDev

    3 ай бұрын

    I haven't tried that, But I think It will do the job.

  • @PattyBeautCode
    @PattyBeautCode4 ай бұрын

    Could you please teach again but Nestjs with Nextjs 14 and Authjs v5 💯💯

  • @KrisKristiansen
    @KrisKristiansen3 ай бұрын

    Please show us how to create a custom credentials provider signIn form

  • @SakuraDev

    @SakuraDev

    3 ай бұрын

    I Will

  • @kemmouneismail3087
    @kemmouneismail3087Ай бұрын

    for the credentials method, I'm working with external backend, should I send a post request inside the authorize function with the credentials in the request body, then await for the response then return the user object?

  • @SakuraDev

    @SakuraDev

    Ай бұрын

    Yes, This is exactly what you need to do. Thanks for the visit BTW 🙏

  • @kemmouneismail3087

    @kemmouneismail3087

    Ай бұрын

    @@SakuraDev thank you so much for answering me that fast, I still have 1 question, since I'll send the post request from that authorize function, how can I handle the loading state to make a loader or to disable the inputs, should I just set up a global state, or there is a better way?

  • @SakuraDev

    @SakuraDev

    Ай бұрын

    @@kemmouneismail3087 well, you can set the loading state of sign in form with just a simple state. note that you don't call the authorize func directly from you sign in form. instead, you call the sign in function of the next-auth. this func then calls the autorize func. so you can just handle the loading state in the sign in form. just set the loading state to true before calling the signIn func and set it back to false just after that.

  • @kemmouneismail3087

    @kemmouneismail3087

    Ай бұрын

    @@SakuraDev thank you so much sir, was very helpful

  • @SakuraDev

    @SakuraDev

    Ай бұрын

    @@kemmouneismail3087 My Pleasure

  • @mDHARYL
    @mDHARYLАй бұрын

    short video but great video thanks

  • @SakuraDev

    @SakuraDev

    Ай бұрын

    Glad you liked it!

  • @eduardoserrano4150
    @eduardoserrano41503 ай бұрын

    Great video thanks for uploading!! How can we overwrite the type for the session? i have tried creating a next-auth.d.ts file with its new type, I get the new correct types in vscode, but it will not accept any of the fields i am passing it and session is always {}

  • @SakuraDev

    @SakuraDev

    3 ай бұрын

    Hi thanks. You should use auth callbacks as well as the editing types in nextauth.d.ts file

  • @sujiths6588
    @sujiths65883 ай бұрын

    Hi, I have cloned your repo, but when I ran it the middleware is not working like in the video. Even if the user is signed out the user is able to see the middleware page.

  • @jcen1918

    @jcen1918

    3 ай бұрын

    Exact same issue!

  • @adityaiiitr

    @adityaiiitr

    2 ай бұрын

    Anyone found the solution?

  • @haiduy5141
    @haiduy51412 ай бұрын

    How can I implement AuthJS with next-intl

  • @MusavirPasha-nh3ku
    @MusavirPasha-nh3ku3 ай бұрын

    if i run the source code..im able to navigate to middleware protected page...can you please tell me why?

  • @SakuraDev

    @SakuraDev

    3 ай бұрын

    I will fix that bug and push it on GitHub again. Thanks for bringing that to my attention 🙏

  • @erikgalajdask

    @erikgalajdask

    3 ай бұрын

    would be cool if u could share the fix, thx for the great vid@@SakuraDev

  • @sumonhossain889

    @sumonhossain889

    2 ай бұрын

    @@SakuraDev still problem, I cloned your code though.

  • @KrisKristiansen
    @KrisKristiansen3 ай бұрын

    Please show us how to create a custom signIn form using version 5.

  • @SakuraDev

    @SakuraDev

    3 ай бұрын

    I will do that soon

  • @nambarjintumenbayar3599
    @nambarjintumenbayar3599Ай бұрын

    I’m extracting custom jwt token from useSession session but it is undefined until f5/refresh/ any idea why?

  • @SakuraDev

    @SakuraDev

    Ай бұрын

    If you want to alter the shape of your token, you get undefined. I have a video about how to fix that on version 4, the idea is pretty the same: kzread.info/dash/bejne/mI2DxNSrY83MYNo.html

  • @nambarjintumenbayar3599

    @nambarjintumenbayar3599

    Ай бұрын

    @@SakuraDev exactly doing this but usesession undefined until refresh, server session always one session behind. Changing user will return previous user token

  • @nambarjintumenbayar3599

    @nambarjintumenbayar3599

    Ай бұрын

    Next auth so freaking buggy and under documented

  • @nambarjintumenbayar3599

    @nambarjintumenbayar3599

    Ай бұрын

    Cannot even find in whole internet about custom auth implementation without damn 3rd party librariy

  • @nambarjintumenbayar3599

    @nambarjintumenbayar3599

    Ай бұрын

    @@SakuraDev finally solved. Had to add location.reload() on both signOut, signIn function seems like next auth v5 bug.

  • @Zeddted
    @Zeddted3 ай бұрын

    Good but why not in Javascript for easy understanding

  • @jamescardona11
    @jamescardona11Ай бұрын

    Waht is your VSCode Extension?

  • @SakuraDev

    @SakuraDev

    Ай бұрын

    Hi, 😊 👋 Which extension?

  • @jamescardona11

    @jamescardona11

    Ай бұрын

    @@SakuraDev Thank you for your reply and content; the theme extension.

  • @SakuraDev

    @SakuraDev

    Ай бұрын

    @@jamescardona11 Thanks 🙏 it is bearded theme

  • @khandoor7228
    @khandoor72284 ай бұрын

    Can we add mongodb for storing users?

  • @SakuraDev

    @SakuraDev

    4 ай бұрын

    Yes You can. you just need to configure MongoDB adapter

  • @tomasapochian8117

    @tomasapochian8117

    4 ай бұрын

    Hi there, have you been able to setup the mongoDB adapter? I am getting edge runtime errors when I call the database.

  • @A03L
    @A03L4 ай бұрын

    No authorization ? 😢 That's very much needed in 80% of modern apps

  • @juliushernandez9855
    @juliushernandez98553 ай бұрын

    Can i use it now in real project?

  • @SakuraDev

    @SakuraDev

    3 ай бұрын

    It is still beta. But I think it will be stable soon

  • @francejardinevisarra8504
    @francejardinevisarra85044 ай бұрын

    broooo please the credential.s and callbacks and there types

  • @francejardinevisarra8504

    @francejardinevisarra8504

    3 ай бұрын

    plesae notify us when u done making the full course of auth 5, with the email verification, 2FA, reset and change pass

  • @vernevens1598
    @vernevens15982 ай бұрын

    What do I need to delete to get rid of Google and just use username and password? I don't want Google collecting my user's information and selling it. I don't trust Google.

  • @aryaadinulfadlan8998
    @aryaadinulfadlan8998Ай бұрын

    you are not protected the page / route. you only rendered specific content based on session value. the routing can be still acessed. disappointed me.

  • @SakuraDev

    @SakuraDev

    Ай бұрын

    Fixed that in the new upcoming video.

  • @aryaadinulfadlan8998

    @aryaadinulfadlan8998

    Ай бұрын

    @@SakuraDev sure, go ahead

  • @user-tp8wp5zv2n

    @user-tp8wp5zv2n

    Ай бұрын

    @@SakuraDev When will you have the solution?😄