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
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.
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
@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
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
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?
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
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?
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?
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.
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
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...
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?
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?
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
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.
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
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?
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
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.
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.
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
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
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 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 } }
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.
#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'
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
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
big fan from Brazil, I learn a lot from your videos, keep it up my man, gj!
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.
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 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 😃
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?
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
how did you implement showing the error template component that comes after throwing an error?
Nice one Josh. Appreciate your content. You make it make sense.
Simple and clean ❤. You became a strong tutor!
Very helpful videos! Thank you for your time!
I would say this is a very clean approach.
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?
Hi Josh, a tutorial about NextAuthJS and Next-Intl would be perfect
Genau das was ich gesucht habe. 👍
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
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
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
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
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...
Josh great but how should we approach the creation of super admin?
Using middleware is simpler and more efficient
how can i do that ?
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.
you're the best man!
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
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?
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
this guy is amazing ❤🔥❤🔥❤🔥❤🔥❤🔥
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.
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
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?
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
but what if am using Clerk, and i want to have an admin role and a user role...?
Very helpful
i kind of feel this is a design pattern. do you know the name?
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)
Would have been nice to have more than 1 role assigned like user and manager.
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
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.
Can i implement when user has 2 roles?
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
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
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 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
}
}
Could you please make a video of vendor, user, admin dashboard with booking, cancellation , room reserved , etc
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
How did you do the Error page that catches the error messages?
my question is also the same
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
the jwt callback is called several times, I don't see optimal to consult the role in this callback.
Authentication and authorization are a lot simpler with clean architecture.
beautiful
Good video
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?
was expecting something a bit
more advanced than this
Ty!
thanks finally found what i needed.. can u share the code pleasee
Laravel Breeze 💪
Nice
please make video about magic link auth (no password require) vs normal email and password verification with send verification token to user
Setting defaults in a database is not a good idea, especially performance wise
amazing video can you share the code ?
#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
can you please link the code
source code would be awesome to have
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.
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?
🫰
discord???
Created one, will announce it soon
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