How to Manage User Roles in NextJS / NodeJS

[@casual_xyz]

big fan from Brazil, I learn a lot from your videos, keep it up my man, gj!

[@daheck81]

You might be interested in isomorphic authorization with something like CASL where you build abilities instead of relying on roles for example. Would be cool if you could give it a take

[@TheBuddilla]

Thank you for this, I was looking for something that was more synonymous with *nix type permission structures.

[@freakinmonkey85]

The main purpose of JWT is that the system can generate a token that lasts for a certain amount of time. The JWT callback is called whenever session needs to use a token, that means that in your code, because you start out with making a database call in the jwt callback, you will have a lot of redundant calls to the database. You should refactor this to only refetch data as needed, eg. whenever an update trigger is called, or when time since last fetch is over a certain threshold. The jwt will still return the user role, but the amount of db calls will be several order of magnitudes lower.

[@bnssoftware3292]

But what about real time role changes? If you get a token with a certain role and that role is revoked, the user may still have access based on the role in the token until it expires, right? That's not good.

[@harsh_vish]

I have also done, User Roles, I was working on the backend, so I used middleware for that, this was very new concept for me, so I did a little research on this and I found out about middleware, as I was new in this I was able to deliver this within a week, and the result was great

[@shreyasvaidya9552]

You made this concept very easy to understand. Thank you Josh 😃

[@ValentinCorrea-o3b]

Simple to explain, simple to do ! thanks you

[@murtadanazar]

Hello Josh, can you do a simple course consisting of a full stack using Next jS and Prisma, Next Auth, and explain most of the basic concepts such as accessing data by role

[@joshtriedcoding]

Good idea man.

[@techworld3043]

@@joshtriedcoding waiting

[@joshtriedcoding]

@Google Personal 1. Create all possible user roles in your database and assign a default one to every user; 2. Whenever a user logs in, fetch their role from the database and put it into their JWT 3. Whenever you want to check the user's role, decrypt their jwt and check the role property in there that has worked well for me

[@keremeersoy]

@@joshtriedcoding I definitely need a tutorial like this

[@James-the-elder]

​@@joshtriedcoding this is what I do

[@akadaygame8634]

thank you for sharing this one. your explanation is really great.. db -> next-auth jwt() -> next-auth session()..

[@joshtriedcoding]

Cheers dude

[@freddy_254]

Nice one Josh. Appreciate your content. You make it make sense.

[@abdullah_mufti]

I love they way you teach. Watched your 5 hour video on fullstack with nextjs. I request you to create a video on boilerplate repo for nextJS13 app. Where 1. Dashboards for different users are developed. 2. Authentication and route protected and pucblic are maintained. 3. Authetication on client-side and Serverside sessions 4. File handling /storage

[@yo1414]

Very helpful videos! Thank you for your time!

[@StephanHaloftis]

I would say this is a very clean approach.

[@waykingas]

Simple and clean ❤. You became a strong tutor!

[@mikoo1991]

how did you implement showing the error template component that comes after throwing an error?

[@nasko235679]

The issue I'm having is that whenever I change the user's role in real time from my DB they still hold on to their old role inside the JWT session. How do I do real time checking? Do I need to query my database and compare?

[@lennartl.4588]

Genau das was ich gesucht habe. 👍

[@giannifed]

Thank you for your video. I don't understand. If I have the user with getServerSession, Why can't I do a search directly in the database to find the user's role without putting it in jwt and session? I would be sure that the user is enabled without waiting for the token to expire.

[@luca4479]

You can but puts extra strain on server

[@jimshtepa5423]

is checking the value of role against 'admin' string happens on the client? if so is it not possible to open dev tools and change this statement such that it evaluates to true and the component renders data even if the role is not admin?

[@icycounter-strikeandleague8431]

Read more about next js server components

[@amur_]

How do you implement the sign up for an admin? This video shows how to access the role of the account. But how can i assign the role during the sign up process using next auth?

[@logistics_guy]

Hi Josh, a tutorial about NextAuthJS and Next-Intl would be perfect

[@younesLarfaoui-ru2cd]

thanks bro, u saved my day

[@chinwubachukwudi4483]

you're the best man!

[@mubashirwaheed474]

Josh great but how should we approach the creation of super admin?

[@Luka_brx]

Video request. It would be cool if u make video about places where u deploy your website, database, where do u buy domains and so. thanks on the great content, and make discord plsss

[@joshtriedcoding]

That is a really good idea too thanks for suggesting (and edit): Yes, discord soon

[@zettai8087]

Cool but can we create an interface to set the role? Like include a role field in a SignUp page for only admins for example.

[@timmoran1613]

Hey Josh, I might need to watch this video again more closely, but how is the getServerSession method getting that extra role information? That method getServerSession gets the session stored in the DB doesn't it. Using the strategy: 'jwt' makes everything stored in the cookie rather than DB session I thought?

[@ahmedaq9018]

this guy is amazing ❤‍🔥❤‍🔥❤‍🔥❤‍🔥❤‍🔥

[@solo.traveller.28]

Thank you for this but is there any other approach to achieve that like a protected route. so we can add multiple route

[@JulianKingman]

you should be able to use a layout file to accomplish that

[@egretfx]

but what if am using Clerk, and i want to have an admin role and a user role...?

[@liebebilder3529]

Could you please make a video of vendor, user, admin dashboard with booking, cancellation , room reserved , etc

[@alleneben8144]

Please how were you able to implement the fallback page when you threw new Error?

[@zivtamary]

next.js 13 - error.tsx page. automatically catches error (using error boundaries)

[@belkocik]

Have you uploaded a video where you have been showing how to implement session logic?

[@joshtriedcoding]

Not sure what you mean by that

[@belkocik]

​@@joshtriedcoding I mean did you make a video where you show how to handle JWT authentication or session in React/NodeJS apps?

[@samking618]

Just like you protected the /dashboard route, can we protect the nested routes like /dashboard/a , /dashboard/b etc without using getServerSession on every page?

[@trace6585]

Yes, wrap it in the layout

[@aymenbachiri-yh2hd]

Very helpful

[@cheronecom]

Would have been nice to have more than 1 role assigned like user and manager.

[@SharunKumar]

I used t3 app for my uni project but I used SQLite for my db, and at the time prisma complained that enums can't be done in SQLite :( Idk if they've polyfilled it now though

[@MRtorki55]

Using middleware is simpler and more efficient

[@raynosebastian6275]

how can i do that ?

[@0b3ryn29]

can't find the github repo. wanted to check why there was a Session Model in schema.prisma. I thought if the next-auth strategy being used was jwt, there was no longer a need to store the session in the DB.

[@YacineAhmaich]

is there any alernative way of checking the role from session in the component like using protected routes or something instead of checking the session in every page

[@velhoguidsd]

NextJS is "server first" so it is not a good practice to do this. But you can do the "old" react way using context and wrapping the components with another component to check the credentials first.

[@joshtriedcoding]

Context works fine, middleware is a great alternative where you can decrypt and validate the token for each route you wish to protect

[@altaysimsek8304]

Hi Josh, could you please make video about how to use both google,github providers etc. and credentials provider with prisma ? Or do you have any resource

[@altaysimsek8304]

because I'm confusing about how to create a prisma schema which is contains additional data like password, fullnames when we are using recommended schema from next-auth

[@joshtriedcoding]

​@@altaysimsek8304 Your database and your auth providers are two completely separate things that don't rely on each other. For example, using google for auth can be done just the same with a Redis database as with Prisma

[@qcode_co]

the jwt callback is called several times, I don't see optimal to consult the role in this callback.

[@germantellez2710]

Hi Josh, is it secure to send request to the database in the jwt callback? without token or secrets or something like that? it seems to be public

[@xdneos]

It happens on the server section, remember that nextJS is a node framework so it runs a server to manage all these things like middlewares, api calls etc

[@HaidarDaher-b5t]

Can you make a video with your vscode extensions and configuration? It will be really helpful, thanks!

[@isaachatilima]

Hi Josh, your videos are always good to watch and learn from. When you are free, are you able to make a web app back and front end with role-based authentication using prisma as here? I will buy the coffee.

[@wakibtz7134]

Hello Josh! I have a problem with Next Auth middleware. I can not find answer in internet. When i make simple next auth code and then try use middleware i get error: ./node_modules/next-auth/next/middleware.js Module parse failed: Identifier 'NextResponse' has already been declared (3:6) | "use strict"; | const NextResponse = require("next/dist/server/web/spec-extension/response").NextResponse; > const NextResponse = require("next/dist/server/web/spec-extension/response").NextResponse; I tried rewrite code from begin but i still get it. If u have a time or know how to solve this problem, can u help me pls?

[@notfadeaway6617]

i kind of feel this is a design pattern. do you know the name?

[@ziacodes]

Hey josh, could you make a tutorial on mssql connected with nextjs? I have already connected but I think you can improve the code quality and some complex understandings...

[@4twi352]

What if you don't use NextAuth for whatever reason or you have different back-end or adapter that isn't directly supported by NextAuth?

[@joshtriedcoding]

This is not next-auth specific. The important thing is that you depict possible user roles in your database, retrieve those on login, and store them in a JWT or server-side session to access throughout your app. That can be done in whichever framework and database you like, I just happen to use PostgreSQL. All an adapter does is receive user data and put it into your db, you could write that logic yourself

[@speedster784]

Would be nice if you do a full stack application where you mainly focus on authentication and can implement email verification using next auth without using the credentials provider and also resetting password via email verification.

[@joshtriedcoding]

Email verification is definitely an interesting one

[@kemoboy]

So, is this simple? I'm overcomplicating a lot of things when it comes to authentication. I was thinking, for my new app, to just make a request each time to the db and check what the user has access to or not, but seeing this, this is way simpler.

[@firewatermoonsun]

Can i implement when user has 2 roles?

[@ZlatkoIliev-s4j]

How did you do the Error page that catches the error messages?

[@junaidali1966]

my question is also the same

[@haryanvideveloper582]

Hey do you know any github repo that has example for handling dynamic roles (like based on role and crud permission dashboard will be customised) in MERN stack ? or if you could suggest something

[@babatundekalejaiye7046]

Authentication and authorization are a lot simpler with clean architecture.

[@Costa_Nj]

Hey Josh! I tried your solution! JWT callback triggered multiple times after refresh page and every call triggered db request, that is not too good! Do you have the same problem? Any ideas how to fix it?

[@joshtriedcoding]

Might be due to react strict mode, shouldn't be that way in production. You can disable strict mode locally in either your plain react index file or in the nextjs config for nextjs

[@Costa_Nj]

I didn't find the reason of multiple callbacks, but I realized, that we don't need to make a request, cause we have user as callback argument (only available on sign in). So, to add role inside token, we just need: jwt({ token, user}) { if(user) { token.role = user?.role } }

[@gabrielbianchi2246]

Remember kids: if authentication happens in the client, then you don’t have auth. Have a good night

[@diptabose7187]

Page.tsx ( which he used in the video ) in NextJS is by default a server side component. Have a good day.

[@AlfonsusAC]

Good video

[@enucar]

Laravel Breeze 💪

[@hn3m3s1s]

beautiful

[@kidzoona6032]

thanks finally found what i needed.. can u share the code pleasee

[@amr3162]

was expecting something a bit more advanced than this

[@nolep5555]

please make video about magic link auth (no password require) vs normal email and password verification with send verification token to user

[@kalpadhwaryu7929]

Nice

[@Chris...S]

Hey Josh, I'm guessing this technique wouldn't work if you wanted an Admin to add additional roles. How would you go about that?

[@isis8719]

Ty!

[@solomonogu1393]

Setting defaults in a database is not a good idea, especially performance wise

[@haydenthai935]

can you please link the code

[@tausifkhan6539]

#josh in my nextjs project i have two type of components on for mobile and second for desktop so what i want i want to use "userAgent" and render component based on user device type this is my nextjs project middleware file code [import { NextRequest, NextResponse, userAgent } from 'next/server' export function middleware(request: NextRequest) { const { device } = userAgent(request) const viewport = device.type === 'mobile' ? 'mobile' : 'desktop' request.nextUrl.searchParams.set('viewport', viewport) return NextResponse.rewrite(request.nextUrl) }] so please meke on video on this topic how to i render component based on user device type i mean if user come from mobile then i want only load mobile component from server and render so how to i do that in my nextjs 13 app directory project please make video on this topic

[@27sosite73]

source code would be awesome to have

[@ayushgogna9732]

amazing video can you share the code ?

[@hawadota2]

teach roles and permission pls

[@khawajashowzib1644]

Hello brother i think your most of the tutorials are not so beginner friendly, can you please make simpler videos instead of so much complex code videos

[@joshtriedcoding]

Trying to make them as beginner-friendly as possible. Anything specific you found too unclear / fast?

[@rp2804]

Why do you assume we know primsa whatever it is? Why include it in every video but not in title, half of your videos have prisma in it

[@Grishopping]

discord???

[@joshtriedcoding]

Created one, will announce it soon

[@dikson7951]

kevin de bruyne programmer?xd

[@getporti]

🫰