Role-based Access Control (RBAC) User Authorization in Next.js

today we're looking at role based access control or arbac for short now the idea behind arbac is that you can add kind of custom claims to your users's JWT uh and encode some information like for example a user level or a user role so that would be the role-based uh Access Control onto their authenticated JWT now uh in super base there is now an off hook that allows you to modify the JWT anytime the token is issued uh and so this is the preferred approach for implementing custom claims and role-based access control in superbase so what we can do here in this example is we're implementing kind of a slack clone so in slack we have normal users we have moderators and administrators so in our our case here and our example we can jump in this here real quick so we have um normal users hello I'm a user and the normal users can you know send messages and they can delete messages you know that they sent themselves uh but they can't you know delete other people's messages they can also create channel channels user Channel um and they can delete the channels that they've created but they can't delete any other channel so that is kind of the sort of simple um access control that we want to um Implement now let's say we're um uh an admin here so in this case the admin can delete everyone's messages everyone's channel so this channel was created by the moderator but um can you know you know be deleted by the Admin um and then also as well we can um delete all everyone's messages now the last one so the moderator the moderator can delete their own channels and everyone's messages even the the admin's messages here uh but can't um you know delete the the channel that they didn't create themselves okay so let's have a look at how we can implement this so what we're doing here in this case is we're creating um kind of app permissions so Channel delete message delete as well as app Rolos in this case admin and moderator and then we're creating a table for the user roles and a table for the permissions now what we can do is we can take a look so I have this running locally um we can take a look at our local admin studio and have a look in here so we have our user roles um which basically is a mapping of um the users to um specific roles and then also we have the role permissions here um Channel delete and such now how we're implementing the access control is via this offhook in combination with ro level security policies so if we jump in our code real quick we can see here we can write this uh function so we can write it either in um PG SQL so that is kind of the best performance but we can also write it in JavaScript using um pv8 if we want to so you can jump into the docs if you want to to look at that but so here we're just using SQL function um we're defining here declaring kind of a a user role so um by specifying this custom access token hook uh and later in the UI registering um this hook we can then have it run anytime a token is issued and so in our case here then we're checking if the user is um you know has a specific role so basically we're doing a select of the user role from the public roles table where the user ID is the event um user ID and then what we can do is if you know if they have a user role is if it's not null we then encode it as Json B um the user role here onto the claims and then in the end um we simply uh set the claims on our event and then we return the event and so this is how we can modify the JWT anytime it is being issued and then importantly we also need to give some access to superbase or admin um some usage grants some um execution grants for the function um and then also uh it follows the normal um RLS policies so since we have policies on the user roles in this case we want to Grant superbase off admin to be able to uh read these roles okay and so then when we have this hook in place what this means is anytime um a user signs up a user logs in um if they have a specific user role in that user R's table it will be encoded in the JWT now to enable the off hook in the dashboard navigate to the authentication settings in there select the Au hooks are currently in beta and then select the schema and here the custom access token can hook enable the hook and give that a save now in local development mode um these settings won't be available in the dashboard but rather you can configure this in the config dotl in your superbase folder so here um at the o. hook. custom access token uh setting set enable to true and then specify the URI to the pg functions post Cress on the public schema and then select the custom access token hook and then make sure to restart the super based CLI now what this means is that when we want to write our exus roles maybe we can jump into the docs to make that um a bit more visible here uh so in our RS policies we can then for example write a function to look up you know if they have a specific permission available so we can write this authorized function here where we just pass in the requested permission um and the user ID and then we can do a simple lookup where we just count okay for um this specific U permission that you know was requested uh does this role that the user have you know um in the author JWT we can access the JWT uh user r um you know is it available so basically is it account uh larger than zero uh and if that is the case then what we can do is we can create policies that basically check okay so in order to be able to delete um channels and delete messages we basically here for channels we need the channels. delete permission uh and for messages we need the uh messages. delete permission uh and so that is pretty much it that is how we can implement the role level security policies um with the custom claims together to enable you know role-based Access Control now one thing to note is that in our front end um the uh modification of the JWT is not reflected in the Au response um so you will need to read out uh the user role from the JWT itself so you can decode the JWT uh and then get the user role from the JWT to indicate kind of you know statuses in your front end may it be you know your react application or uh even you know in your middleware on your server uh you can just decode the JWT and check the user role or you know whatever you called the claim that you customized custom claim you set on the role I hope this was helpful um we'd love to hear your feedback on the o Hook's approach it is definitely the most performant approach for um modifying the jbt and you know kind of adding custom claims on the Fly uh so we hope you'll find that useful and let us know in the comments below what you want to learn next and I'll see you next time bye-bye

Channel: Supabase

Views: 2,629

Keywords: supabase tutorial, best firebase alternative, open source database

Id: kwoKmi6inAw

Length: 9min 34sec (574 seconds)

Published: Wed Mar 06 2024