Next.js 13.5 Authentication: Mastering Role-Based Security with AuthJS/NextAuth

In this coding tutorial, we explore the upcoming transition as NextAuth evolves into AuthJS. We'll provide the most up-to-date coverage, including the latest features in Next.js 13.5. Dive into the world of role-based authentication and learn how to implement authentication on both server-rendered and client-rendered pages. Discover how to leverage out-of-the-box OAuth providers like Google and GitHub, and explore the process of creating your custom authentication provider using MongoDB. Stay ahead in the world of authentication with this comprehensive guide!
⌨️ Need Source code? Members get updated full source code for all projects!
www.claritycoders.com/Projects
👊 You got something to say to me?? Join our discord!✌️
/ discord
Chapters
0:00:00 Introduction
0:00:37 Enviroment Setup / Extension Review
0:01:20 Project Creation
0:02:05 Install NextAuth (Auth.js) / Create Project Structure
0:14:33 Create NextAuth (Auth.js) API - Options / Routes
0:24:35 Setup built-in OAuth Provider - (Google / GitHub)
0:28:43 Login / Logout Funtionality
0:35:41 Protecting Pages - Server Side Page
0:39:16 Protecting Pages - Client Side Page
0:45:08 Protecting Pages - Middleware
0:52:54 Creating Custom Provider (Creating a Database of Users)
0:54:12 MongoDB Atlas Signup / Setup
0:57:00 Create User Models (Mongoose Schema)
0:59:33 User Form to Create Users
1:09:26 Create Users API
1:17:41 Setup Custom Provider

[@ethan.creates]

Clarity indeed, thanks for the two tutorials Clarity Coders! Hope you continue covering Next! Subbed!

[@khandoor7228]

Absolutely the best Next-Auth tutorial!!! Covered everything in a clear and concise way. Used the tools I wanted to use. Perfect! Just found your channel sub'd and look forward to more content.

[@ClarityCoders]

Thank you means a lot! Thank you for the sub as well I appreciate it.

[@Eclipssed]

The way you said that who says I can't style just made my day🤣🤣. By the way great explanation ❤️.

[@ClarityCoders]

haha. Thanks for watching and the comment it means a lot. Rounded corners for life.

[@larrymcfarlane6202]

Nice! Great starter code to use when reviewing the documentation.

[@delkitonyi]

Hands down the best NextAuth tutorial. I think what's missing is the JWT authentication.

[@cihansokmen9591]

Thank you. Great tutorial. I hope you continue your Next.js tutorials. I am looking forward to your Next.js i18n tutorial.

[@vickonsscope6477]

Exactly what I needed at the moment.. Thanks

[@ClarityCoders]

Love to hear it! Thanks for watching.

[@nikitasedoj1115]

Thank You very much man, It is the best Next-Auth tutorial I've seen so far! I've also appreciated your other Next tutorial - about the Ticketing App. I really like your approach - short lessions focusing on the single topic, without overcomplicating things. Thanks and looking forvard for more tutorials by you!

[@ClarityCoders]

Really means a lot thank you for watching.

[@marisblumbergs2318]

Watched and fallowed both of your nextJS and it was a pleasure... perfectly explained! Keep it coming. Would be interesting to see your approach how to handle updates one-to-many records, for example, customer invoice with rows or anything like that. Have looked for something like that for a while but no success...

[@ClarityCoders]

Great thought I'm putting that in my notes! Thanks for the insightful comment and watching. Means a lot.

[@OnlyJavascript]

By far the best tut on auth. ty so much

[@ClarityCoders]

Wow thank you I appreciate it.

[@joeking8822]

Thank you so much for both the ticketing app and authentication videos! Really loved both of them! One quick question. If I want to display the login feature before loading up the ticket dashboard and home page for the ticketing app, how may I use and implement this video?

[@paulthomas1052]

Fantastic demo and very useful code. Thanks !

[@ClarityCoders]

I'm glad it was helpful thanks for watching.

[@armaandhanji7151]

Awesome video! At 1:05:10 on line 33 when you do router.refresh() before router.push(), what does the refresh line do?

[@ferranhoms]

Great video, thanks!

[@ClarityCoders]

Appreciate it. Thanks for watching and commenting.

[@greenthumb7405]

about to start this after your freecodecamp vid. little confused on how to properly use mongo still but im learning. thank you for making these vids. Could you possibly teach how to make an extremely simple To-Do List with Auth, Mongo, and Next.js?

[@jayendraawasthi2646]

Thanks for the explanation. Can you please also tell us how to modify the signup popup with our own design

[@arikxl]

TNX for the video!! you are a great teacher. I did this project inside the tickets project. working great. can you make a video about how to deploy it?

[@alexanderkomanov4151]

Thanks! Great one!

[@ClarityCoders]

Appreciate it! Thanks for checking it out.

[@OnlyJavascript]

can u show us how to implement forgot password, email verification, 2FA. It would be so much helpful for us.

[@user-oy8ke7cx9c]

Thank you for this great course! 👏🏻 Would like to see how to use PrismaAdapter to automatically save the user's credentials into the database.

[@nasko235679]

Can you make a short video on proper credentials authentication that has password requirements,checks if an user email exists and even sends confirmation emails? Your vid is by far the easiest to follow and understand when it comes to nextjs auth.

[@ClarityCoders]

Great idea. I'll put that on my list.

[@prashlovessamosa]

Thanks for sharing.

[@ClarityCoders]

Thanks for watching!

[@najneindustrijaliziraniji]

this is very useful, thanks. but is it good idea to make Nav component as ssr? How do you dynamically underlining with that solution?

[@ClarityCoders]

Yeah, great point. For the context of this tutorial, it is SSR because it doesn't have any elements that require client side. However, in an actual application, you will quickly have features like dynamically coloring your current page link that require it to be client-side. Thanks for watching I appreciate the feedback.

[@obensunday]

Please how can I dynamically set the user role based on user selection upon registration.

[@John-fd4tp]

i was working on this project, as i wanted to use it for a login system for my school project and i ran into an error while trying to use npm run dev. EINVAL: incalid argument, readlink. does anyone have any ideas on how i would go about fixing that?

[@Ziad-Al]

You have hard coded the user role in the providers configuration in options.js file, for the last week or so i was trying to find a secure way to collect the user role at sign up, then we collect the user role and save it to the database with the user name, user email address. i couldn't find any reliable solution, can you advice on how to do that? would be great if you make a video on how to solve this issue, from my research so many are struggling with it. Thank you!

[@pauliusvasiliauskas2676]

openssl rand -base64 32 is not working on windows, any tips?

[@hakanaki]

Is it even possible to do email and password authentication with next auth?

[@jeppe_bech]

Please make a video about this but with next14

[@obensunday]

And also how to create custom login page for Google provider and credentials

[@thetoicxdude2203]

Can build a NLP ai with pytorch?

[@arshah246]

21:25 cann't find userRole for google

[@ClarityCoders]

Check GitHub for that finished google provider code. Might have missed something small.

[@wiacal_]

Awesome tutorial, thank you. I wanted to see the update for this video in your Udemy course, but the free coupon for logged in users does not work. Could you check, please? :)

[@ClarityCoders]

Oh no! Let me check did it give you an error or anything along those lines?

[@ClarityCoders]

This should be fixed now could you try it for me when you get a chance. Thanks for letting me know.

[@wiacal_]

@@ClarityCoders it works now, thank you!

[@ClarityCoders]

@@wiacal_Great! Would you consider leaving me a review on that course if you have time. I would greatly appreciate it.

[@user-sf9su6xb6q]

Nope, last part not working... or credetials, or nextauth_url is missing - dunno

[@user-sf9su6xb6q]

But amurhorization withcredentials gives mistake

[@user-sf9su6xb6q]

Checked today absolutely everything. Credentials are not working. We can make new user, all data goes to mongodb. Bcrypt works at least to crypt password. But. Even though its impossible to sign in for person with credentials. And on chrome, and on Firefox. I suppose something is missing in github files. Or get method, or some url in .env, or some mistakes with [...nextauth]

[@user-sf9su6xb6q]

The mistake was: match= await bcrypt.compare ~1:24. If delete await - everything working

[@user-sf9su6xb6q]

role of credentials user is not working. will try to check what the problem.

[@user-sf9su6xb6q]

Made same as other providers. After cleaning cookies - working. if(match) { console.log("Good"); delete foundUser.password; let userRole = "unatorised"; return {...foundUser, email: credentials.email, role: userRole,} }

[@sexy_audios]

Guys can someone explain me Why we removed import from "react" from some pages? , why we typed (components) not Components.. because it would create it as a route??

[@ClarityCoders]

Import react isn't needed and is implicitly done. So, it can be removed from pages. I should have been more consistent in this video. The creators mention that if you need to use the variable react for some reason, you will still need to import it into the page. The parathesis around the directory signifies Route Groups and the directory will not be included in routing. This would be more appropriate when organizing multiple routes inside a folder. Looking back on it, I probably used a private folder denoted with an underscore. The tough part about making long videos on KZbin is that it is hard to fix errors after the fact! Thanks so much for watching and commenting.

[@sexy_audios]

Thank you so much@@ClarityCoders

[@takedownccp]

Great job! hope to add signing with custom oauth2 provider tutorial