Tutorial 4: Role-Based Access Control

Scaffold the Roles

Open Copilot Chat and type:

/create-rbac

When prompted, define two roles:

Manager

• tasks: read (all), create (all), update (all), delete (all)
• projects: read (all), create (all), update (all), delete (all)

Member

• tasks: read (all), create (all), update (own), delete: none
• projects: read (all), create: none, update: none, delete: none

The skill uses MCP tools to configure these roles, policies, and permissions directly in your DaaS backend — no migration file is generated.

Verify the Configuration

/create-rbac configures roles, policies, and permissions directly in DaaS via MCP tools — no Supabase migration is needed. Verify the roles were created in DaaS Studio under Roles & Policies, or via the API:

curl -H "Authorization: Bearer <your-token>" \
  https://<your-project>.daas.buildpad.ai/api/roles

Add the Permissions Proxy Route

CollectionList and CollectionForm resolve permissions by calling GET /api/permissions/me on your Next.js app, which proxies to DaaS. If this route is missing, the service falls back to an empty response — and the UI treats unknown permissions as full access, making RBAC appear to have no effect.

Check whether the route exists:

ls app/api/permissions/me/route.ts

If it’s missing, create it:

import { type NextRequest, NextResponse } from "next/server";
import { getAuthHeaders, getDaaSUrl } from "@/lib/api/auth-headers";
 
export async function GET(request: NextRequest) {
  try {
    const daasUrl = getDaaSUrl();
    const headers = await getAuthHeaders();
    const searchParams = request.nextUrl.searchParams.toString();
    const url = `${daasUrl}/permissions/me${searchParams ? `?${searchParams}` : ""}`;
 
    const response = await fetch(url, { method: "GET", headers, cache: "no-store" });
    const data = await response.json();
    return NextResponse.json(data, { status: response.status });
  } catch (error) {
    const message = error instanceof Error ? error.message : "Proxy error";
    return NextResponse.json({ errors: [{ message }] }, { status: 500 });
  }
}

Assign Roles to Users

In DaaS Studio, go to Users, select a user, and assign them a role. For testing:

• Assign yourself the Manager role.
• Create a second test account and assign it the Member role.

Verify Permission Enforcement in the Form

Sign in as the Member test account and navigate to a task you did not create (/content/tasks/<id>).

CollectionForm will automatically:

• Show all fields as read-only (because the Member policy only allows update on own items)
• Hide the Delete button entirely

Sign in as Manager and notice full edit access is restored. No code changes needed — the form reads permissions from the DaaS API at runtime.

See Permission-Aware UI in Action

CollectionList automatically fetches GET /permissions/me on mount and gates its built-in create and delete buttons — no manual permission checks required. The tasks page from Tutorial 3 already works correctly:

"use client";
 
import { useRouter } from "next/navigation";
import { CollectionList } from "@/components/ui";
 
export default function TasksListPage() {
  const router = useRouter();
 
  return (
    <CollectionList
      collection="tasks"
      enableSearch
      enableFilter
      enableCreate
      enableDelete
      enableSort
      enableSelection
      limit={25}
      onCreate={() => router.push("/content/tasks/+")}
      onItemClick={(item) => router.push(`/content/tasks/${item.id}`)}
    />
  );
}

• Manager: the Create button is visible and active; bulk delete is available.
• Member: the Create button is visible and active (Members have create (all) on tasks); the bulk Delete button is disabled with a “Not allowed” tooltip.

No code changes are needed — CollectionList reads permissions at runtime.

If you need to gate a custom action beyond CRUD (e.g., an “Export” button), use the usePermissions hook:

import { usePermissions } from "@/lib/buildpad/hooks";
 
const { canPerform } = usePermissions({ collections: ["tasks"] });
 
{canPerform("tasks", "create") && <Button onClick={handleExport}>Export</Button>}

Test with Both Accounts