logo
SaaSkit
Security

RBAC

Manage access control easily using role-based permissions.

Demo

Usage

SaaSkit integrates with Better Auth to provide a flexible role-based access control (RBAC) system. It allows you to control what users can access based on their assigned role.

By default, the system includes two roles:

  • user – limited permissions
  • superadmin – full permissions

and two resources with up to six permissions.

  • user: create list set-role ban impersonate delete set-password
  • session: list revoke delete

To create a superadmin user, sign in normally first. Then go to your database and change the user's role to superadmin.

Permission

To create a new permission, edit the lib/permission.ts file. For example, let’s create a permission that allows access to the admin dashboard.

permission.ts
export const statement = {
  user: ["create", "list", "set-role", "ban", "impersonate", "delete", "set-password"],
  session: ["list", "revoke", "delete"],
  adminDashboard: ["access"], // define the permission
} as const;
 
export const user = ac.newRole({
  user: [],
  session: [],
  adminDashboard: [], // user does not have access
});
 
export const superadmin = ac.newRole({
  user: ["create", "list", "set-role", "ban", "impersonate", "delete", "set-password"],
  session: ["list", "revoke", "delete"],
  adminDashboard: ["access"], // superadmin has access
});

Here:

  • statement defines available permissions.
  • Each role specifies which actions it is allowed to perform.

Role

To create a new role, edit the same lib/permission.ts file.

permission.ts
// create a new role (with limited permissions)
export const admin = ac.newRole({ 
  user: ["create", "list", "set-role", "ban"],
  session: ["list", "revoke"],
  adminDashboard: ["access"] 
}); 
 
export type Role = "user" | "admin" | "superadmin";

After creating the role, make sure to include it in the Role type.

Access

You can conditionally show UI or protect pages based on permissions.

// Show an admin dashboard option only if the logged-in user has permission:
'use client'
 
import { Role } from "@/lib/permissions";
import { useAuth } from "@/hooks/use-auth";
import { authClient } from "@/lib/auth-client";
 
export function ClientComponent(){
  const { user } = useAuth();
 
  const hasAdminAccess = authClient.admin.checkRolePermission({ 
    permission: { adminDashboard: ["access"] },
    role: user.role as Role,
  }); 
 
  if(!hasAdminAccess){
    return <div></div>
  }
 
  return (
    <div>Only visible if the user has admin access</div>
  );
}

On this page