Next-Auth Login Authentication Tutorial with Next.js App Directory

Web Dev Roadmap for Beginners (Free!): bit.ly/DaveGrayWebDevRoadmap
In this Next-Auth login authentication tutorial with Next.js app directory, you will learn how to protect all of your pages with credentials or an OAuth login from providers like GitHub. Learn how to protect any page in your app.
*Get CodiumAI for FREE:* marketplace.visualstudio.com/... or visit: www.codium.ai/
💖 Support me on Patreon ➜ / davegray
⭐ Become a full-stack web dev with Zero To Mastery Courses:
- Complete Next.js Developer: bit.ly/CompNextJSDev
- Advanced React: bit.ly/AdvReactDev
- Junior to Senior Dev Roadmap: bit.ly/WebDevRoadmap-JrtoSr
🚩 Subscribe ➜ bit.ly/3nGHmNn
📬 Course Updates ➜ courses.davegray.codes/
❓ Questions - Please post them to my Discord ➜ / discord
☕ Buy Me A Coffee ➜ www.buymeacoffee.com/davegray
👇 Follow Me On Social Media:
Github: github.com/gitdagray
Twitter: / yesdavidgray
LinkedIn: / davidagray
🔗 Source Code: github.com/gitdagray/next-aut...
Next-Auth Login Authentication Tutorial with Next.js App Directory
(00:00) Intro
(00:05) Welcome
(00:28) CodiumAI
(01:39) Create Next.js Project & Dependencies
(02:21) NextAuth.js Introduction
(04:20) Auth Route Handler
(05:49) NextAuth options
(10:13) NEXTAUTH_SECRET
(11:52) Setting up GitHub OAuth
(16:09) Configuring Providers in options
(23:08) Send a GET request to /api/auth/providers
(25:06) App Behavior for 3 different server pages
(26:27) Apply NextAuth with Middleware
(29:10) 3 Different Protection Approaches
(31:14) NextAuth with Client Components
(37:35) Next.js Images from an OAuth Provider
(39:26) Wrap-up
📚 Tutorial References:
🔗 NextAuth.js Official Site: next-auth.js.org/
🔗 Next.js Official Site: nextjs.org/
🔗 ES7 React Snippets Extension: marketplace.visualstudio.com/...
Was this Next-Auth tutorial using the Next.js 13 App Directory helpful? If so, please share. Let me know your thoughts in the comments.
#nextjs #next #auth

[@alexanderhenting]

Hey Dave, after migrating from the pages router this tut helped me a lot on getting clear. There are a lot of tutorials out there and huge codebases with complex integrations and a lot of copy paste code, sometimes a bit hard to stay focused on the essentials. Greeting from Austria

[@hamzahahmad1670]

It's a bit late to comment, but congratulations Dave on getting sponsors for your videos (this is the first one I've come across) There are plenty of amazing tutorial creators on KZbin, but the amount of effort you put in your videos to explain each and every line of code, right down to mentioning the key binds you use, is just remarkable. Thank you for all your effort and I hope you gain even more success

[@GuiKT88]

Hallelujah, thanks to let the people know what dependencies and versions you are using it, it helps so much man!

[@Selimdede-jr2bv]

Hey dave when i started this job i used to watch your videos now i got my first job as a developer thanks man!

[@Leesdjo]

Thank you Dave. You have the heart to teach and help people who are trying their best to learn how to code .

[@DaveGrayTeachesCode]

You're very welcome!

[@vishwanathsinha]

Thank you Dave. This was very helpful. You made things crystal clear to understand and implement the next-auth with next 13.2 + version. Also when to use server and client component. Overall you made it very simple.

[@Evil_E_ye]

I was making my website today and you uploaded this today saved many hours of work❤❤

[@zilvinas5130]

Damn, this tutorial is god tier comparing to other ones I found that tackle this topic. Detail all in the right places!

[@user-gd4nv8wp2f]

One of the best next-auth tutorials that actually covers the app router. Disappointing that the next-auth docs don't cover this and are instead using the older page router.

[@joemathan6101]

Thanks Dave. Crystal clear step by step instructions on next auth. Now we have a deep understanding of how to configure and setup next auth in our projects. One suggestion a quick diagram of how the auth flow should be even more awesome!! Thank you for delivering quality content for us. Learning a lot from your videos.😊

[@DaveGrayTeachesCode]

Thank you and good suggestion - while this default setup is very straightforward, I think some customized solutions may need further explanation in the future. The default setup uses a session cookie with an encrypted JWT (JWE). This is important because Next.js is hosted in a serverless deployment so the auth info is really in the JWE and is verified by a NextAuth server function (running in a serverless environment). Serverless is a confusing word. It means it is one big lambda function outsourced to AWS behind the scenes. The auth persists due to the cookie staying in the client. The serverless environment may go to sleep when inactive.

[@nademkhan931]

Thank you for that explanation, indeed 'serverless' was confusing to me before reading this

[@nademkhan931]

A very nice nuanced explanaton of Next-Auth. Yes please, I would like to see follow on tutorials on role-based access as you mention at the end

[@PaarsahSoroury]

Thank you dear Dave, for always inspiring me to put my best foot forward, even when I don't feel like I belong. I hope the best for you in your life. Warm Regards.

[@Rikimkigsck]

Thank you so much for explaining everything beautifully Dave.

[@XCodeWhisperer]

A very informative video. Thank you very much. Your code is perfect and very easy to read. And I would be glad to see more about role-based user authorization.

[@jior6]

You make the best tutorials man, seriously thank you so much.

[@knload]

I'd love to see the role based user authorization video. Thanks for the video, nicely done. 👍

[@DanielMolnar_Tuzla]

This is long awaited video. Thank you Dave, you helped me so much

[@DaveGrayTeachesCode]

Glad to help!

[@karendoran3692]

Very beautifully explained as usual. I would love to see more next auth tutorials!

[@DaveGrayTeachesCode]

More to come!

[@mimos6198]

Great explanation and unique content. I am waiting for more videos about Next.js, and problems faced by many beginners and solve these problems. Thank you for making this effort to explain the code

[@Mayank_Bisht_MB]

everyone who face middleware issue. first clear your cookie in console.

[@andrescampos8333]

Phenomenal, best tutorial I've run across, thank you.

[@spiderwebbs02]

Your tutorials are the best Dave. I got a job because of you. I thoroughly improved my projects because of your tutorials.

[@DaveGrayTeachesCode]

Excellent news! Congratulations on the job! 🚀

[@huutamnguyen2529]

An easy tutorial to understand. Thank you so much!👍

[@gurdittsingh6638]

This tutorial is so good! I was feeling so confused by next-auth and next.js, you made it seem so simple 😃

[@DaveGrayTeachesCode]

Glad it helped!

[@k303k]

Thanks a lot for this tutorial Dave!

[@judevector]

This is a very packed information and I really understand every bit of it ,I was in another tutorial before the guy was explaining it but it was very hard to get . Immediately I came here it just clicked ❤

[@himanshutiwari9616]

Very beautifully explained dave. love from India❤

[@markdenvermanuel8493]

Thank you much, Dave! I have been following and watching your Next series from the moment it was still in experimental phase and up to now that is already stable. Please create a video with signup that has a database and also the role based auth. Thank you and more power!

[@DaveGrayTeachesCode]

Role-based auth on the way. More to come!

[@Reyescult]

Thank you, this has been very helpful. It would be great to have more coverage around OAUTH configuration (scope, userinfo, etc.) and sign-out from the identity provider. Anyway, thanks for the great content!

[@RezHimself]

Another amazing toturial, to be honest I've been waiting for this video 👌👌👌

[@DaveGrayTeachesCode]

Glad you liked it!

[@kaputokalandanya5915]

I was literally just looking for this, thank you!

[@DaveGrayTeachesCode]

Glad I could help!

[@afsanazamannipa7711]

Elaborated Explanation. Great. Thanks

[@adimardev1550]

i love your voice Dave. keep up the Good Work! We Cant Thank You More Than We Say 🙏

[@abhijeetray9097]

Thanks Dave, it was really insightful

[@user-dt6ze6qm3f]

Hi Dave, this was an incredibly helpful video, I've now successfully set up Next Auth in my Next JS project with an AWS Cognito provider. Thanks for explaning everything so clearly and not glossing over the small details. I'll definitely check out your other videos on Next JS.

[@anonihme5142]

if I may ask how did you find the cognito issuer? all the tutorials i've found for it used a cognito domain and amazon has revamped their whole UI making it really obnoxious

[@anonihme5142]

nevermind, finally got there^^

[@user-dt6ze6qm3f]

​@@anonihme5142 sorry I didn't see your comment earlier, glad to see you got there! I followed this video to understand more about setting up the Cognito app client. I'd love to get Cognito working with the credentials provider as opposed to using their hosted UI, but that's on a future to-do list! kzbin.info/www/bejne/i2XLdpminM6rb8U

[@anonihme5142]

@@user-dt6ze6qm3f cheers. Sadly the vid ends before he tries to log back in and sees that the next -auth logout function doesn't clear cookies on the cognito server, so the user is logged back in without being asked for his credentials, which is a major security risk. It amazes me that there's no simple way to do that. But then again, i'm a total noob, so simple for me is a very low bar. I shall persist and remain calm! thanks for the reply, best of luck

[@kenthefley2226]

This is a very informative and useful video. It would be awesome if you could expand on this by connecting a database to store users along with a credentials signup. Users should also be able to reset their password. An explanation of that is hard to come by and something most of us will need.

[@DaveGrayTeachesCode]

Great suggestion!

[@mohammadrizwan230]

Please I have the same request, looking forward to the video 😊

[@heguer87]

Same, with admin roles.

[@safariambience4052]

This is a great suggestion. I have learned a lot from this great piece. Thank you Dave

[@OnlyJavascript]

Prisma ❤

[@Den-yg4wz]

Thanks Dave! It was very useful example, but very simple. 😉 Please, continue about NextAuth, cause you don't touch following themes: 1. Initial form for auth (how client can pass auth first time with credentials) 2. Working with DB, 3. How can clients change their credentials (email, pass, etc) at any time. 4. How can developer make own auth pages with another design? So we are waiting for next! Good luck, Dave! 💪😀)

[@desertpillar5286]

Great stuff! This was the first tutorial that actually showed the basics of how to get it working and showed where the actual routes for the automatic pages lived. One thing I'm still a bit confused about is as why there's no default signup as well in Next-Auth as that seems to be an extremely common pattern. For any type of SaaS application, how would you relate the models to the correct user/org unless you have the user in your db? So showing a more advanced (but still basic) flow like signup => verify email => verified signed in, and signin => change password would be appreciated. Also perhaps how to make your own signin page call the right endpoints in nextauth. Thanks again for saving me a lot of time!

[@desertpillar5286]

I found the answer. It’s called Clerk. Use it and never look back!

[@fiendsgaming7589]

Thank you Dave Gray! You're life saver!

[@AlirezaGarshasbi-kr1on]

this tutorial is absolutely perfect.

[@snivels]

The reason your videos are a cut above the rest is because you explain the 'why'. When you get an error you explain why you are getting the error and then you show how to fix it. When you paste a line of code, like the import of default from nextauth in the middleware file, you explain exactly what it's doing and also show how it works. Keep up the excellent work, you are appreciated!

[@DaveGrayTeachesCode]

Thank you!

[@niallmoore8240]

awesome work, thank you Dave!

[@pablotexeira7579]

great job as always, thank you. you've been of great help once again!!!!

[@sahaneakanayaka3394]

OMG! Thank you so much Dave ❤❤🙏🙏. Love your tutorials...

[@DaveGrayTeachesCode]

Welcome!

[@jhonbahia01]

The best content about this subject

[@siddiqahmed3274]

That's a very comprehensive tutorial about next-auth. Thank you sir. and yes an advanced auth series (like react one) is very much appreciated. It is just a request to use sql based database this time for auth as we have covered mongodb in react.

[@DaveGrayTeachesCode]

Thank you!

[@GeorgeDonnelly]

This is an awesome tutorial, thank you!

[@owenhochwald506]

Thanks you explained very clearly and now i understand!

[@PENGGAO-fi5is]

Thank you Dave, nothing to say, brilliant.

[@vittoriomorellini1939]

Great video and great explanation of Nextauth . Amazing tool to manage authentication. Thanks Dave

[@DaveGrayTeachesCode]

Glad you liked it!

[@onizuka_js1484]

Thank you for this amazing video! Super well explained, I just subscribed to your channel 🤩

[@DaveGrayTeachesCode]

Welcome!

[@EricOnYouTube]

Yes, role based auth would be fantastic. Thanks! :)

[@GabrielMartinez-ez9ue]

Nice one...! One important point that maybe you can address in later videos is how to use user roles. To be able to pass roles to the session, you need to include them in the token, which is then read by the session.

[@DaveGrayTeachesCode]

This is correct, and it is coming very soon!

[@SkippyTheCanadianKangaroo]

Thanks Dave for this video! It has actually helped me GET the right data for the Credentials login. But im having a little difficulty getting users to sign in with Username,Password. But with this video i was actually able to get a step forward! THANK YOU!

[@jordanryanethanowona2974]

DAVE YOU ARE CLEARLY THE GOAT FOR ME. THANX A LOT

[@DaveGrayTeachesCode]

Thank you!

[@svitliarka]

Great tutorial, thank you!

[@rockNbrain]

Great job Dave ... well explained , tks a lot 🎉

[@DaveGrayTeachesCode]

Glad you liked it!

[@heguer87]

Once again. Thank you so much for your mater classes!! Your genius man. You know your stuff and know how to teach it! I will buy you a couple coffees lol

[@DaveGrayTeachesCode]

You're welcome!! ☕

[@chandramani6682]

Nice job Dave 😊

[@ashishsharma__]

Thank you so much dave 😊

[@samuelbigelow3480]

This is super helpful, thank you! I do want to call out that you said you would never want to use a server component within a client component, but the application is doing that when you're talking about providers. The AuthProvider component is a client component and it the client/page.tsx component is a server component rendered inside of that

[@DaveGrayTeachesCode]

You're welcome! I appreciate the call out because this shows I likely didn't explain myself clearly on this specific issue. "use client" creates a boundary between server and client components and all other components imported in the client component including children will be rendered as client components according to the Next.js docs: nextjs.org/docs/app/building-your-application/rendering/client-components ..so to follow this up, I searched the NextAuth docs for an exception with the SessionProvider used inside the AuthProvider we create in this tutorial. I did not find where those docs dive into how NextAuth works around this.. but if you add a console.log(user) to the UserCard component, build the project with npm build, and then run it with npm start, you will see that after logging in and visiting the home and server routes, the console.log shows on the server terminal - confirming they are still server components. If you visit the client route, the console.log will show in the browser console. Further, the build report after running npm build will also indicate those pages are SSR and not client components. I hope this helps clarify what I meant. This would actually make a good blog post / explainer topic - but the client component uses the useSession hook which uses the context. The server components instead use getServerSession which doesn't require the context. More clarification on using Context Providers with Server Components here: nextjs.org/docs/app/building-your-application/rendering/composition-patterns#using-context-providers

[@maherworld1]

Dude you are the best. much love

[@francisboudreau7524]

Hi Dave, love your Tutorials, they are great... I was wondering if you planned on making one with nextjs 13 and azure/msal or using apollo (I'm currently building a site that will be using azure/msal login and token, with apollo and graphql, but there is not a lot of help explained for human like you do since Next JS 13.4) cheers :)

[@sadeghmahboobifar7521]

YOU ARE GRATE DAVE, any time that I have any problems on coding , you will make a video about my problem, Thank you my friend

[@DaveGrayTeachesCode]

You are most welcome!

[@user-gn7qi5xv4j]

I just completed short while ago... Nice tutorial with well explanation... Thanks a lot... 🥰

[@gdwmw]

Your are the best! New Subs!

[@giannifed]

Thank you Dave, amazing tutorial.

[@DaveGrayTeachesCode]

Glad you liked it!

[@brandonbailey4491]

Great vid. the challenge im facing is defining a pattern that allows me to integrate with a custom API. Any recommendations?

[@DataAkshya]

Thank you Dave!

[@sarowarhosen003]

Very informative lesson thank you sir

[@vanhungnguyen7543]

Thank you so much to explaining

[@olagundoyeemmanuel]

Thank you so much Dave

[@shayanhdry6224]

Hello Dave Yet another awesome Tutorial thank you , here instead of using session callback for getting picture you used getserversession ?

[@tabdig]

Very great video, helps a lot

[@AliAmeer]

Lots of thanks to you ❤

[@codewithedraak]

You are gem thanks

[@IndianCoders]

Nice One Dave!!

[@DaveGrayTeachesCode]

Thanks!

[@damiantriebl1747]

awesome!, good tutorial, the advanced playlist is coming soon???

[@khalilbenmeziane8836]

Thank you Dave

[@collinsk8754]

Excellent ! 👏👏

[@adamjames8732]

There is an upcoming release of next-auth v5 which uses a universal auth() function and contains many breaking changes. I would love to see a renewed tutorial for the nearest v5 release. Keep on the good work..

[@Rawdyn]

Yep, this. Definitely this.

[@ayesigwar]

Hey Dave. Thanks for the great tutorial. I see the majority of the nextauth code is in the /api folder and also on their site, they say it is built for serverless. Is there a way to adapt this to use an express server? Thanks

[@neveriodev350]

Thanks Sir Dave!

[@DaveGrayTeachesCode]

Welcome!

[@MrAtomUniverse]

Hi, i have API calls that are only for the user but the API provider is either NESTJS or Laravel API , which kind of token or auth should i use so the external API can deal with it?

[@anay5233]

Awesome tutorial I would be delighted if you could consider creating a tutorial on the process of authentication and authorization, encompassing both frontend and backend aspects. It would greatly enhance my understanding to learn about the complete flow, such as how the frontend transmits the authentication token to the backend during sign up or login. I'm eager to gain insights into the entire process. Frontend - Nextjs Backend - python

[@sfer.developer]

Hey Dave, Looking forward for a full-stack project with Next.js, typescript and MongoDB like Dandy shop project, please make one?

[@adejoh6650]

Thanks Dave❤!!

[@DaveGrayTeachesCode]

Welcome!

[@libenhailu5193]

Thanks Dave, Personally I need more authentication tutorials specially on next-auth it seems a little shady the code and the documentation also abstracts some details the only way to learn is is by experimenting it in my opinion, It would be amazing if you share us your findings.

[@UwU-dx5hu]

Yes.the docs are overwhelming

[@philippechavanne1190]

Thanks Dave this is really great!!!! I would be really eager to see the frontend from your mern video ported to Nextjs. It would help understanding how to deal with data fetching, role base authorisation and token refreshingI. Is that something yu would consider? Many thanks for those outstanding videos

[@DaveGrayTeachesCode]

Great idea!

[@ceralguy85]

Great content Dave, you earn a new subscriber, would be great integrate a db provider like Supabase with NextJs and NextAuth, keep it up delivering great content.

[@DaveGrayTeachesCode]

Great suggestion!

[@Eva8621]

Hi Dave, thanks for the really nice tutorial. I heard what you said about only using services on your channel that you think are really good. In relation to that, I was wondering what your opinion is on AWS Cognito? I am trying to do authentication using next-auth and Cognito but find this tricky. Any chance you would be willing to make a tutorial on this combination? Thanks again.

[@thedude6810]

Great video! Definitely could use a role base authorization video please :D

[@DaveGrayTeachesCode]

Thanks - just published it last week. 🚀

[@hamed4451]

so it is ok to use Next-Auth for only credential type(user/pass) and on authorize function check with server and return ,,, right? is there a way to change text "Sign in with credential" button?

[@vstrelianyi]

great video thx

[@0zankurt]

Please upload a version where you integrate a login system where the backend is either Laravel Passport or Sanctum.

[@devippo]

Hi Dave, Thanks for your tutorial. Looking for ways to implement a "Remember Me" feature by dynamically updating the maxAge. Have you been able to do this? I've seen some people destroy the token on browser close.

[@superurgmail]

Hey! Great tutorial ... though it doesn't seem to work with i18n: I can't get the matcher in config in middleware to simultaneously (1) define a regex to redirect a URL to [lang] as well as (2) defining matching routes for Auth.

[@maxpayne9074]

Hi Dave! Do you have tutorial, how use next-auth with Prisma (strategy: "database") ?

[@DaveGrayTeachesCode]

You could use this tutorial with any database. I show where you can request data from a database.

[@mahendranath2504]

Thank you so much for the amazing content 👍👍🙌🙌👌👌😍😍

[@DaveGrayTeachesCode]

You're welcome!

[@mahendranath2504]

@@DaveGrayTeachesCode I follow your channel and recommend you to my friends and family members to follow for a quality content

[@nodesunlimited]

thank you so much for all you do to enlighten me personally, please if you can expand this to include user roles, and how to redirect different users to their dashboard like if admin take them to admin only page on login and if only member take them only to member page ...

[@DaveGrayTeachesCode]

I have another video about NextAuth and roles. The callback function is what you need to complete the routing you want.