How I setup role based authorization Next Auth
Вставка
- Опубліковано 8 тра 2024
- My Products
🏗️ WDC StarterKit: wdcstarterkit.com
📖 ProjectPlannerAI: projectplannerai.com
🤖 IconGeneratorAI: icongeneratorai.com
📝 ThumbnailCritique: thumbnailcritique.com
Useful Links
💬 Discord: / discord
🔔 Newsletter: newsletter.webdevcody.com/
📁 GitHub: github.com/webdevcody
📺 Twitch: / webdevcody
🤖 Website: webdevcody.com
🐦 Twitter: / webdevcody
cody your videos are so informative and helpful. It’s crazy because I open youtube and find one of ur vids that solves an exact problem of mine
Wow can’t wait for the kit! Multi level auth is something I’ve been needing for a specific project. I’ve been using the tables but this seems far for more streamlined and efficient
Just in time, ty Cody
killing it every day!
I've added casl + casl/react on top of this and its a great combo!
Thanks for the video. Which add-on are using to display errors directly next to the code?
Have you implemented your own refresh token mechanism to use JWTs in Next-auth?
I have not, I assumed it was already built into the library? but now that I see it's not I'm very dissapointed
@@WebDevCody yeah same. You should make a video about it if you get around to it
I really enjoyed the video! I have a question though:
Would it be feasible to create an auxiliary function for data fetching? My concern stems from the fact that for every request, I need to include the authentication token in the header. Consequently, in every page, I find myself having to retrieve the token from the cookie using next/headers.
I recall achieving this functionality with Axios and Next.js by setting the token within an Axios variable. Is it possible to replicate this behavior using the Fetch API?
OBS: I'm using an external backend application
What’s wrong with reading the cookie? A cookie just lives in the request header and it is an in memory operation taking nanoseconds to run.
Have you ever had to implement quotas? Like, for a subscription system (not pay as you go).
Working on setting up something right now where I want the user to be able to perform X operations a month, based on their sub tier.
I imagined I could just create a sql query and count the operations the user has performed in the alloted time frame, but that doesn't seem ideal for a few reasons.
Maybe I make a "quotas" table with a period_start and period_end column, then deduct their quota? Im using stripe so I could also probably just use the web hook events to update their quota when they renew their sub or it cancels.
I did one video about it but I was using a third party gateway service to achieve it.
Congratulations! Is the project open source?
Nope this is for a paid starter kit I’m trying to work on
l'm looking to enhance the security of my Next.js app by implementing a feature where users need to re-enter their password before accessing routes displaying sensitive information or performing critical actions. How can I protect these routes to ensure that only authenticated users who have re-entered their password can access them?
Can you please create a stock register app using with multiple role it was really helpful if you could make it.
Thanks ❤.
Do you prefer Next Auth over Clerk?
Clerk is much better. Next auth feels like a hack job at this point, but it’s free 🤷♂️
Thanks o
Cody, are you using Convex as database in this? I find it really hard to use nextauth with convex database, little help please 😢
I’m not, just using Postgres, drizzle, next auth, and next
How do you deal with changes while the user is logged in? So if somebody is changing your role in one group while you are logged in, how do you refresh the information on the token?
Some logic that let your API know the next time the user makes a request, refresh the token with the updated permissions, etc.
UseSession returns an update method you can call which recreates the jwt
@@WebDevCody Thank you for your fast answer :) I'm new to frontend and work more in the backend. So if I understand it correctly you can use useSession to update your token on the server. But the following scenario: User A and B are logged in. User B is changing the role of user A in a group. How is the token of user A updated? UseSession cannot update other users token if I understand it correctly?
@@easylite376 you are correct. One way to mitigate this problem is to call the useSession update method inside the root of your application (assuming you are using a frontend framework). This way, every time the user enters or refresh your webapp it'll update the token. Once the the webapp is loaded, the client side routing will kick in and no other token updates will be made (unless you explicity call the update)
@@easylite376 Id love to know as well :)
Informative video.
I have a question though.
How can I integrate SAAS level i18n support in next js app router. so if user added more than one language they can see the translated route otherwise they will see no lang route by default.
I haven’t done i18n before, but I’ll look into that for my starter kit. I think next docs on how to achieve it
Thanks, but after introducing app router we need to add manual lang/locale route. before in page router, we just need to add config for i18n. So for default lang we need to add redirect logic so nextjs can also load no lang route. it seems like we are trying to hack that feature.also heard that redirecting locale route is bad for SEO.
in the video I clearly see how you extend the Session object, and it works for me, but could you please explain how you extend the default User object, and the Token object? On my User object there are default properties like id, name, image, email. How do I extend it, so I can grab other properties from my db? Thank you! Very useful video
I just overwrite the global ts types
export type User = {
id: string;
plan: Plan;
groupMembershipList: MembershipList;
} & DefaultSession["user"];
declare module "next-auth" {
// eslint-disable-next-line no-unused-vars
interface Session extends DefaultSession {
user: User;
}
}
how do you deal with the case when user create a new group or join a group? You should somehow update the jwt token with the new data.
You can call an “update” method from the useSession hook.
This useSession got me thinking, it's synchronous, so there is no communication with external system, but still can decode the session. I wonder if it's using a public key to decode a non http only cookie... What's your thoughts on that?
UseSession hits your server to have the server decode the token. If you open the network tab you’ll see it make requests to your api since the browser doesn’t know how to decode the encrypted token
How do you refresh a JWT in the case a user is removed or added to a group?
I think you can call const s = useSession(); s.update()
Hey Cody - are there any concerns here from a security standpoint? Could a user alter their JWT to a new plan/role ? How do you make sure that these things cant be spoofed/intercepted
google what a jwt is. jwt itself keeps that from happening cos of how it secures that knowledge with a secret key.
no, because the token is signed using a secret that only lives on the backend, so if someone tries to modify the JWT, your server will see it was changed and throw authentication errors
@@WebDevCody sure but next-auth exposes update method and api to the client via session provider. I could update my role and plan myself using the provided API. It is a weird default, but you have to explicitly disallow session updates that were triggered initially client-side or at least not let them update critical information.
@@my_yt666 wait what? Can you explain a bit more what api you are talking about?
@@WebDevCody When using useSession hook there is an update method that calls an API. In the JWT callback there is a trigger set to "update". Now notice that you can send anything to the API. You should check the trigger and only update fields that have no critical information. Everything critical should be set during sign in. In v5 there is a new server-side unstable_update.
Isn't it good to get group membership list and plan in session without adding it to JWT token?
I guess it’s fine as long as the cookie session is encrypted so that the client can’t modify it
Lessgooo
coincidentally this is like what im doing like right now. Great vid. Here is a video idea. How to use next auth with an external backend. Without nextjs built in backend if you get what im trying to say. because there is this backend guy i work with who built the jwt himself then in my next app i use next-auth so we are really confused on how to amalgamate the two strategies.
You don't use next auth in this case, the backend guy sends you the token, you store it in http only cookie and that's it. Then you send the jwt from the client in header in all your request to the backend to verify the user for access control. You should go study how auth work then you will understand what is going on there.
Would be wrong to send the access token from Db as a response instead of setting on cookies?
It's not recommended. The main reason access tokens are sent over cookies (with httpOnly flag enabled) is that client side javascript (malicious and not malicious) won't be able to access it directly. However the user's browser still keep the cookie saved locally and it'll automatically send it to your server on every request, allowing your server to authenticate your users.
@@ParanoicoBR but isn’t cookie vulnerable to CSRF attacks?
Yes, you can put refresh token in cookie and access token in memory and set on request headers if you want. If not you need csrf tokens probably
What happen if membership/role changes? Will update the token?
I think I do need to add logic to force a user to refresh their token if they were to downgrade or upgrade, or get added to a group
@@WebDevCody Refreshing JWT is super tricky, specially if you update the role of other user that is already logged.
The last time I did this was with websockets to notify the clients they should revalidate, if there is a better way without needing to check each request I want to know it.
@@neociber24 from the next-auth docs, it looks like you can just call session.update() from the UI and that will trigger the JWT callback to re-run with an trigger === "update" argument.
Good informations were exchanged here. And what if user uses multiple devices to log in to the same account. Multiple devices, multiple cookies and you cannot update them because it lives on user device. This is another argument to check everything on request.
Couldn't u keep a socket open and from serverside push a message if the users role changes or their membership revoked then from client-side get refreshed token
can you make a video explain how we manage auth using Redux and Nextjs
since my backend guy provides all the auth apis from his side
I don't use redux anymore
@@WebDevCody but i believe that if you have a separate BE like my case ,you can't use NextAuth right?
Using JWT, you are very naughty boy.
Living on the edge
what about permission based authorization
as in fine grained authorization? I'm doing that in this video as well with that list of groups that I put on the JWT
v5 or v4?
I need to check. I may be using 4 but I should migrate. Isn’t 5 still in beta?
@@WebDevCody for next side of auth is stable but for express, sveltkit is still experimental and for others its not even out
♥️🤌 he made the video on my most doubtful question.