Next.js Role-Based User Authorization & Access Control | Next Auth Protected Routes

Web Dev Roadmap for Beginners (Free!): bit.ly/DaveGrayWebDevRoadmap
Learn Next.js role-based user authorization & access control and apply Next Auth protected routes with NextAuth.js middleware. NextAuth.js makes applying role-based access control easy with the Next.js 13 app router and middleware.
💖 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
🔗 Starter Source Code: github.com/gitdagray/next-aut...
📺 Next-Auth Intro tutorial video: • Next-Auth Login Authen...
🔗 Completed Source Code: github.com/gitdagray/next-aut...
Next.js Role-Based User Authorization & Access Control | Next Auth Protected Routes
(00:00) Intro
(00:05) Welcome
(00:31) Getting Started
(01:02) Starter Code
(01:54) Options - OAuth profile function
(05:46) Options - Credentials authorize function
(06:41) Persisting the role
(08:52) TypeScript Module Augmentation
(13:47) Middleware - withAuth wrapper
(18:27) Environment variables
(19:41) Trying out the configuration
(23:25) Analyzing the results
(24:16) Component changes
(27:12) Middleware - authorized callback changes
(27:49) Middleware - Role-Based Access Routing
(31:46) Denied page
(32:29) Trying out the new Middleware configuration
📚 Tutorial References:
🔗 NextAuth.js Official Site: next-auth.js.org/
🔗 Next.js Official Site: nextjs.org/
🔗 NextAuth.js - Advanced Middleware Configuration: next-auth.js.org/configuratio...
🔗 NextAuth.js - Persisting the Role: authjs.dev/guides/basics/role...
🔗 NextAuth.js - TypeScript Module Augmentation: next-auth.js.org/getting-star...
🔗 NextAuth.js - JWT & Session Callbacks: next-auth.js.org/configuratio...
🔗 Next.js Rewrites: nextjs.org/docs/app/api-refer...
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 #user #authorization

[@maherworld1]

Best instructor out there, no BS, straight to the point

[@therealdevopsintern]

i have been waiting for Role based user Authorization and i have not seen anything good, Thank God Dave came in because he definitely do justice to the topic

[@DanielMolnar_Tuzla]

Another great video Dave, just in time. I really appreciate your work and help you provide to all of us

[@bandekhoda7801]

Awesome, I saw so many tuts about this and none of them seemed to do the job. Subscribed 👌

[@nodttt]

This is the best role-based auth for next-auth I ever seen. Thank you a lot!

[@yt-sh]

Thank you for making both email and OAuth, really rare to find, if at all

[@alfredgithinji3166]

Wow , Just what i needed to implement authorization successfully!

[@codernerd7076]

Finally role base auth! Thanks Dave... sorry for my last comment frustration with constant self learning failure got the best of me! All I'm looking for NOW IS 2 Factor auth with Google Authenticator but starting to believe it's impossible with Next.js. I'm trying for a year now to find something and all that came up is a outdated npm package full issues 😢

[@EricOnYouTube]

This is great stuff. Thanks Dave! :)

[@MOJICA7257]

Thanks Dave! you're awesome!!🎉🎉🎉🎉

[@nenosegura]

what a great tutorial! thanks for sharing!

[@chandramani6682]

Very nice effort Dave😊

[@eazydatasolutions5800]

Give Dave 1 Million subscribers. You are the best instructor.. Thanks for your insight.

[@DaveGrayTeachesCode]

Thank you!

[@orenmizr]

easiest subscribe ever. well done on going deeper than the rest with real world issues!

[@Learexx]

that's awesome, Thanks Dave💖

[@kenthefley2226]

Good work, Dave!

[@alexanderhenting]

Great! Tutorial with db integration would be nice as well!

[@youssefwafik2678]

Great tutorial as always, very clear and informative. Would you also please make a tutorial covering refresh token scenarios like the react auth series. What would be different regarding the server side and how to handle refreshing the token both on server requests and, if needed, on client-side requests like using swr

[@marcelo-3k]

Thank you very much for the content, it added a lot to me. The doubt that persisted the most for me was: How can I create a custom login screen, for instance, at /login, and carry out authentication on the server side?

[@amirhosseinqafari9747]

So amazing, thx sir.

[@davithchhung7577]

great video as always!

[@jesustzinon]

OOhh man, this is awesome, Thank you Dave, we own you so much, ty again! great video!

[@DaveGrayTeachesCode]

Glad you enjoyed it!

[@xelion7110]

thanks a lot for these next tutorials, may you add a prisma tutorial with mongo db and next js

[@ayushgogna9732]

amazing wanted this video for a long time i am just guessing maybe the next video of this series will be refresh token(hehe just a guess) amazing content...... love your videos your channel helped me work smoothly on bigger projects

[@DaveGrayTeachesCode]

These tokens can last days or weeks. See the docs for the maxage setting. It also already uses a secure cookie and encrypts the JWT to a JWE. I don't see my refresh token strategy needed here.

[@ayushgogna9732]

@@DaveGrayTeachesCode what if there is an external backend which is handling JWT token and also every api request requires that token inside headers (like your nodejs mern stack course)

[@hungnguyencanh5089]

Thanks Dave, can you make a tutorial with custom backend and next-auth?

[@goncalopereira1456]

Thank you for this great video. I have a question if I may. Would this work for a static export and hosted on any web server? Or would I need a nodejs environment?

[@TravinskiyVladislav]

Awesome, again thank you

[@neelnarwadkar5921]

Great video! Is there a better way to write the middleware instead of writing multiple if statements like maybe defining what routes a role can access or something like that?

[@danielnieto5356]

Great video Dave, as always. I have a question, if my backend return the access_token in Response headers and even in the Response body, how can I pass it to the jwt callback?

[@0xtz_]

I need this thanks man 😂 u helping us allot 🙏

[@DaveGrayTeachesCode]

Happy to help!

[@badadamilola9534]

This is awesome, just the video I need at this point in time. I was wondering Dave if you have a tutorial on React Native? Thanks.

[@DaveGrayTeachesCode]

Not yet!

[@user-xm2dr1qg9d]

great sir thanks a lot with lots of regards and respect to you Thanks again

[@ashutoshbind8068]

would love to see a video with prisma adapters and how to manage stuff there, have been getting a lot of errors there lately

[@lvnghia]

You saved my life !

[@mimos6198]

I have read a lot of docs, but I did not find such a simple explanation thank you so much, I want to know if I want to link it with a database such as Sopabase .

[@mrfirstname578]

tq dave. I hope you make tutorial next auth with gmail and next auth with last express js project

[@user-nw6gl3tl8p]

Hello Dave, I admire your work as a content creator on KZbin. I have a question about your Next.js project. Can we include the /auth/signin page in the middleware matcher and redirect the user to the home page if they are already logged in, or show them the /auth/signin page if they are not? am using custom auth/signin page with JWT authentication.

[@panoscool_]

Hi Dave! Are you planning to add a DB for this tutorials?

[@codeozz]

I hope you make a tutorial on making a nice site using Nextjs and NextAuth.

[@ralphwealth163]

Amazing video, can you do a video that shows role based authentication using nodejs as a server rather than using next-auth

[@deepyslow]

Thanks Dave 🎉 Please make a video on user based authorization some day 😊 i.e. When a user logs in he interacts with his content only etc. I cannot wrap my mind how that works and would be fun to learn

[@zettai8087]

Can't you acheive that with the authentication tho. You just give the different roles different dashboards

[@deepyslow]

I just wonder how big companies do user authorization. Not role based but profile based. I would love to learn that 😀

[@zettai8087]

@@deepyslow Oh like per person? Now that sounds interesting

[@deepyslow]

@@zettai8087 Exactly!

[@Hellbending]

If fetching your token from a database like mentioned in previous video you could always add an enum of the various roles right? User has to hold roles: [backend, frontend, management] In order to get the panels for backend, frontend and management respectively to appear?

[@blessingz]

This is next level

[@en_kratia]

Thank you

[@2006Pk]

Very good!

[@derelicts9503]

I swear to the Machine God this man reads my mind lol. Thank you Dave!

[@vittoriomorellini1939]

Tonight I have to watch it

[@nro337]

Great video!

[@DaveGrayTeachesCode]

Thanks!

[@yw3546]

Hi Dave, I'm building up my own auth process without using NextAuth now. I wanted to sign in with a modal instead of being routed to another page. How should I implement that? Is this related to intercepted route? Hope you have a tutorial for this feature!

[@thatboy3971]

great tutorial Dave, I also expected a tutorial with Custom backend accessToken how to login and login out then

[@DaveGrayTeachesCode]

With Next.js server components, you should be accessing the user table in your database directly. You don't want to relay through another backend auth system. This should be your only user auth system. That said, if you need access to a 3rd party API that provides an access token, you will receive the access token in your server component or route handler. From there, you could store it in your own database and refresh as necessary.

[@user-rs2ym6sb9t]

Is this suitable to manage subscription plans?

[@rutx122]

Is it possible to have 2 Middleware with different config? Next-intl and also the role based user authorization

[@nasko235679]

I've just done something similar to what you showed, my question is : When I change a user's role in my db it doesn't get reflected in real time because they still hold on to their token with the old role. So let's say I change their role to "banned" they still get access to the pages that they shouldn't. Do I need to query my database in every page component to compare an user's role inside their token with their role inside my db?

[@kubilaybzk]

Hello Dave , Let the backend send a JWT when logging in with an API. I want to assign this sent jwt token to the session in NextAuth. The backend also sends a period of time, which indicates when the token will expire. How can I configure NextAuth?

[@raynosebastian6275]

hi, is it possible to have more than two roles ?

[@vramosjd]

Hello Dave, are you going to create a full project series using Next.js or do you have other technologies to teach first?

[@DaveGrayTeachesCode]

I've got a LOT in the works including projects with Next.js 😃

[@kalebschmottlach4877]

Can you make a video on how to persist this info across a database like firestore?

[@aayushbisen89]

Followup tutorial request, how to customize the auth pages. 😃

[@GabrielMartinez-ez9ue]

Do you know how get around the issue when you update the database role, users have to logout and sign back on for it to take full effect.

[@ZiaCodes]

Hey, Can you do realtime authentication? Let's say I'm logged in from a computer. I open my phone and log in again. it should not login because we are already logged in to the account? Is there any way to acheieve that? Could you make a small video on that?

[@fisicaquimica01]

if u can teach redux in nextjs it would be very awesome

[@disinfect777]

Dave, i'm using an adapter (drizzle) and can't for the life of me figure out how to get it to work using the database strategy. Seems like you can't even use a middleware. The documentation says to crate a role column and use the profile() callback on the provider and return a role name and it will add it to the database. But I can't get it to work. So, if you could do a video on how to do all of this but with the database strategy instead of jwt it would be great.

[@samking618]

great tutorial! if anyone can explain, if I am accessing my protected route as a guest (means without logging in to either a user or an admin role), it is redirecting me to my /login page, same thing which happened with Dave at 21:09. Why is it so?

[@bahaaaldeen9611]

it's amaizing

[@aeriose]

Hey Dave, thank you for the video. Do you have any resources on how to get auth for API requests in "app/api/anything/route.ts"? I want to have custom API routes that use next-auth to verify the user is POST/PATCH from the client but I don't know how

[@luispineda6383]

Also interested on that but this is a great start to tinker and maybe figure it out!

[@Aonik10]

Im dealing with it. Documentation says that you can use getToken or getServerSession to check if the user is logged in or not. If you set the role param inside the session, you would be able to check both conditions (if the user is logged in or if his role is the expected one). However, you would have to do that check in every api route, which is not good imo. I tried adding "/api/(.*)" to the matcher array inside the config object and then attempted to handle the incoming request inside the middleware function with "if (req.nextUrl.pathname.startsWith("/api"))". It worked, but im still trying to figure out why my requests are now returning html content instead of the json format as response. Im stucked with that

[@ashishmaharia]

@@Aonik10 this is the same issue i m having its such a pain to putting conditions to check role on every api route since middleware dont work. if u found any solution please help me out too by pinging here.

[@Aonik10]

@@ashishmaharia I didn't found the proper way to do this, so i made the same as you. Let me know if you found any solution too.

[@togya4]

dave, lets say I'm protucting my page usint middleware withauth and nextreqwithauth, lets say inside matcher im protucting the extra url, what if i want to apply this in another niddleware file with another matcher uri with a tottly diffrent logic inside callbacks: { authorized:, what can i do?

[@user-rw1vs8dq6k]

Don't you have a more complete one with a database and a CRUD in Nextjs and manage these permissions? thank you

[@codingshare9973]

can you make authentication with next js 13 with access token and refresh token with external api > like node js express api authentication?

[@shakil-the-coding-monster]

Another request: Fullstack CRUD By next api routes

[@BryanYao-bm5eu]

you can do one but this time when we are connected as a user we cannot see the client and extra tab instead of it directly displaying a message to tell us access denied.

[@mohammedghazwanalmilhim7879]

Does anyone know how to secure the login page so that it's hidden once a user has signed in? It should only be displayed if the user is not logged in using middleware.

[@lvnghia]

Cảm ơn bạn!

[@DaveGrayTeachesCode]

Thank you for the support! 🙏

[@Ashish_singh_dev]

How can I add username with OAuth providers so that prisma can write that username while creating new user?

[@kiddhkane]

Hi, I really like the video. However, I started using Prisma Adapter and I have an issue - it doesn't return a token. By default it's using strategy: database. That makes the whole withAuth not work. Is it better to try and adapt withAuth somehow, or switch back to strategy: "JWT"? Maybe you could make a video about it?

[@999waylon]

I have a similar question, I've switched the strategy to JWT because it seems to add more features (like middleware), but one downside would be not having the ability to force logout for users, by removing the sessions from the database. I'm going to stick with JWT until I find a reason to use the database strategy.

[@successoronyemaechi]

Thanks! Dave Is there no way to logout user on the server side? I've read the documentation and made a lot of research still no where to find that solution, please any solution or work around? I will really appreciate.

[@999waylon]

As far as I understand it, you would need to switch the strategy to database which then persists the sessions inside of your DB. You can then force a logout by removing the session from the DB. If using JWT, I believe it's a limitation that once a token is issued it is valid for as long as you say it should be on creation. I suppose you could change your JWT secret and log everyone out (force them to reauthenticate), but not sure if that's what you're after.

[@xanim_iva98]

what about credentials provider, so that when i get my info from an api, and it should be role based

[@sujalgupta6100]

Hi dave i wanted how do you learn these frameworks and new techs yourself

[@DaveGrayTeachesCode]

I love to learn. I like reading docs and applying what I see. It gets easier with time and experience.

[@sujalgupta6100]

@@DaveGrayTeachesCode really cool

[@Ceddix]

As far as I understood, if the user role changes, you still have access to the page until the cookie expires. But what if you had an admin dashboard, and you revoke the admin role from one of your admins? Wouldn't that mean, that they still had access to the page? How can I fix that?

[@rutx122]

If you figured it out pls.tell me

[@imkir4n]

lets say after the signin callback we need to call an api to get another token and we need to store them in cookie along with the next auth cookies how we can do that

[@DaveGrayTeachesCode]

You can add extra data to the session. This could make another good tutorial. Good discussion of the flow for JWTs and sessions here: stackoverflow.com/questions/71185287/pass-more-data-to-session-in-next-auth

[@galaxxyz777]

@@DaveGrayTeachesCode is it save to expose JWT token on the client side? In example you mentioned they use session callback, but everything returned by this callback is available at ‘/api/auth/session’ endpoint. (My next app fetch data from another backend app, and some routes of the backend are protected, so I need to send request with authorization header and jwt) But I’m not sure if it is save to store this jwt in session😢

[@generalwill10]

Hey guys, Getting a type error where the User type is not assignable to ‘undefined’. Error is happening on the client page while using the UserCard component. What did I do wrong? 🧐🧐🧐

[@DEEPAKKUMAR-lu1dz]

! important How to implement role based redirect. eg. for user has "/user" and for admin has "/admin". When I signin successfully then it will automatically redirect.

[@shreyashrangrej3680]

I was wondering why it always takes to /extra page everytime i sign in or sign out. I was sick and tired of thinking what i did wrong. Please if someone knows how to avoid that call back let me know.

[@andresdrimer]

same question here...

[@PaarsahSoroury]

I appreciate your helpful endeavor, Sir. You are a wonderful teacher. I would like to ask that, what if we want to get rid of id which is going to be generated automatically and only use some of fields like name and password. I mean the explanation on using type as following examples, please: type XUser = Omit or type XUser = Pick to be able to use : const anyUser : XUser = { name: "NAME", password: "PASSWORD"} Thanks, Sincerely.

[@DaveGrayTeachesCode]

You can bring in an id from an OAuth account or your own user table or you can generate one with UUID or similar. If I remember correctly, the User type in NextAuth _needs_ the id property. You have given a couple of examples of how to exclude it from a source, but then I think one should be generated... but I may be remembering wrong, and if it is not needed, that will be ok.

[@PaarsahSoroury]

@@DaveGrayTeachesCode Sorry, I didn't mean removing the type definition of this line: type User = { id: number, name: string, password: string }, in our code, so still we need it. but, I meant adding another definition of user as xUser to handle the opportunity of being away from id, when we want to assign a value to its variable. I've already learnt using UUID from you Sir, and I thank you for it. The Best Wishes, Sir.

[@tezgaming8291]

❤

[@hemanthvasi9157]

How to modify session object in javascript

[@erich2s_0103]

the most big problem with nextjs i think is that you can wirte just only one middleware, which bundle the whole separate irrelative logic into one file

[@vernevens1598]

How many users to you think will have git hub or google accounts. Including myself I know ZERO.

[@DaveGrayTeachesCode]

Next-Auth works with many accounts. You can set it up however you want.

[@shawnxiong2011]

authorization logic should really be in callbacked -> "authorized", "!!token“ only indicates user is authenticated.

[@thatawesomekk]

How to stop people from accessing login page after they are authenticated

[@ashishmaharia]

now try to fetch api req from a server component and put nextauth rbac on top of that apiRoute it wont work.

[@shakil-the-coding-monster]

Please fullstack role base authentication with nextauth mongodb or postgre

[@DaveGrayTeachesCode]

Next JS uses server components so you can consider it full stack. The only thing I didn't do here is request user records from the database but I do show where you should do it. I can do other tutorials where I connect to a database but that is the only step-by-step you are missing here and I show where you need to.

[@sayf3446]

First again! 🥳

[@md.rakiburrahmantalukder7461]

first comment

[@darren_naylor]

Amazing tutorial! i'm trying to follow along but using AzureAD as my provider. When I use the default provider, it gives me the image but no role: providers: [ AzureProvider({ clientId: process.env.AZURE_CLIENT as string, clientSecret: process.env.AZURE_SECRET as string, tenantId: process.env.AZURE_AD_TENANT_ID, }), ], however when I add the following: providers: [ AzureProvider({ profile(profile: AzureADProfile) { console.log("AzureAD Profile:", profile); // Add this line to log the profile data return { ...profile, role: profile.roles ?? "No Role", id: profile.sub, name: profile.name, image: profile.picture, } }, clientId: process.env.AZURE_CLIENT as string, clientSecret: process.env.AZURE_SECRET as string, tenantId: process.env.AZURE_AD_TENANT_ID, }), ], callbacks: { async jwt({ token, user}) { if (user) token.role = user.role return token }, async session({ session, token}) { if (session?.user) session.user.role = token.role return session }, the role is given but the image is undefined. Could you give any pointers?? There's not much on the NextAuth docs that I can see.

[@ghiscode5306]

❤