How to Manage User Roles in NextJS / NodeJS
HTML-код
- Опубликовано: 7 сен 2024
- In this video, we'll look at how to manage user roles in NextJS or NodeJS. By understanding how user roles work, you'll be able to specify which role is able to access exactly which pages in your application.
We'll cover topics like creating user roles, assigning user roles, and managing user access. By following this video, you'll be able to manage user roles according to your specific role requirements and access-levels.
My GitHub: github.com/jos...
Wishing you lots of fun building your own cool stuff with this knowledge!
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
Thank you for this, I was looking for something that was more synonymous with *nix type permission structures.
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.
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.
big fan from Brazil, I learn a lot from your videos, keep it up my man, gj!
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
Good idea man.
@@joshtriedcoding waiting
@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
@@joshtriedcoding I definitely need a tutorial like this
@@joshtriedcoding this is what I do
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
thank you for sharing this one. your explanation is really great..
db -> next-auth jwt() -> next-auth session()..
Cheers dude
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
You made this concept very easy to understand. Thank you Josh 😃
Very helpful videos! Thank you for your time!
I would say this is a very clean approach.
Simple and clean ❤. You became a strong tutor!
how did you implement showing the error template component that comes after throwing an error?
Hi Josh, a tutorial about NextAuthJS and Next-Intl would be perfect
Nice one Josh. Appreciate your content. You make it make sense.
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
That is a really good idea too thanks for suggesting (and edit): Yes, discord soon
Very helpful
Genau das was ich gesucht habe. 👍
Would have been nice to have more than 1 role assigned like user and manager.
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?
Read more about next js server components
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.
Email verification is definitely an interesting one
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?
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...
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.
You can but puts extra strain on server
Could you please make a video of vendor, user, admin dashboard with booking, cancellation , room reserved , etc
Can you make a video with your vscode extensions and configuration? It will be really helpful, thanks!
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.
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?
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?
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
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
@@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
this guy is amazing ❤🔥❤🔥❤🔥❤🔥❤🔥
Thank you for this but is there any other approach to achieve that like a protected route. so we can add multiple route
you should be able to use a layout file to accomplish that
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
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
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.
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.
you're the best man!
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
i kind of feel this is a design pattern. do you know the name?
Josh great but how should we approach the creation of super admin?
but what if am using Clerk, and i want to have an admin role and a user role...?
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
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?
Yes, wrap it in the layout
the jwt callback is called several times, I don't see optimal to consult the role in this callback.
Using middleware is simpler and more efficient
how can i do that ?
3:50: If you only have 2 enums, wouldn't be easier to just put a boolean in model User indicating whether it is an admin or not?
In this case that would be equally as good. The enum allows for way more flexibility if you'd like to add additional roles later on though
Have you uploaded a video where you have been showing how to implement session logic?
Not sure what you mean by that
@@joshtriedcoding I mean did you make a video where you show how to handle JWT authentication or session in React/NodeJS apps?
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?
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
Please how were you able to implement the fallback page when you threw new Error?
next.js 13 - error.tsx page. automatically catches error (using error boundaries)
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?
Can i implement when user has 2 roles?
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
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.
Context works fine, middleware is a great alternative where you can decrypt and validate the token for each route you wish to protect
was expecting something a bit
more advanced than this
Laravel Breeze 💪
Remember kids: if authentication happens in the client, then you don’t have auth. Have a good night
Page.tsx ( which he used in the video ) in NextJS is by default a server side component. Have a good day.
Good video
thanks finally found what i needed.. can u share the code pleasee
How did you do the Error page that catches the error messages?
my question is also the same
please make video about magic link auth (no password require) vs normal email and password verification with send verification token to user
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?
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
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
}
}
Nice
beautiful
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.
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?
#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
Ty!
source code would be awesome to have
Setting defaults in a database is not a good idea, especially performance wise
amazing video can you share the code ?
can you please link the code
teach roles and permission pls
kevin de bruyne programmer?xd
🫰
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
Trying to make them as beginner-friendly as possible. Anything specific you found too unclear / fast?
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
discord???
Created one, will announce it soon