RBAC Admin

A complete role-based access control administration panel. Covers roles, permissions, teams, principal assignments, and live access checks — all in one drop-in component backed by the Primus RBAC backend module.

Backend required

PrimusRbacAdmin requires the RBAC module running in your Primus backend. See the RBAC integration guide for setup.

Preview · RBAC Admin

Code

React

import { PrimusRbacAdmin } from 'primus-react-ui';

// Basic setup
export function AccessControlPage() {
  return (
    <PrimusRbacAdmin
      apiUrl="https://api.yourdomain.com"
      authToken={() => localStorage.getItem('access_token')}
      title="Access Control"
      subtitle="Roles, permissions, teams, and access checks"
      defaultScope={{
        applicationId: 'app-core',
        tenantId: 'tenant-001',
      }}
    />
  );
}

// With credential-based auth (BFF pattern — no token in localStorage)
export function AccessControlPageBFF() {
  return (
    <PrimusRbacAdmin
      apiUrl="https://api.yourdomain.com"
      withCredentials              // includes cookies + CSRF header automatically
      defaultPrincipalType="user"
      defaultGroupType="team"
      showScopeFields={false}      // hide scope fields if single-tenant
      title="Access Control"
    />
  );
}

Angular

// access-control.component.ts
import { Component } from '@angular/core';
import { AuthService } from './auth.service';

@Component({
  selector: 'app-access-control',
  template: `
    <primus-rbac-admin
      [apiUrl]="'https://api.yourdomain.com'"
      [authToken]="getToken"
      title="Access Control"
      subtitle="Manage roles and permissions"
      [defaultScope]="scope"
      [showScopeFields]="true">
    </primus-rbac-admin>
  `
})
export class AccessControlComponent {
  scope = { applicationId: 'app-core', tenantId: this.auth.currentTenantId };

  constructor(private auth: AuthService) {}

  getToken = () => this.auth.getAccessToken();
}

Props

Prop	Type	Default	Description
apiUrl	string	required	Your API base URL (origin only, e.g. https://api.yourdomain.com)
authToken	() => string | null	—	Token resolver called per request
withCredentials	boolean	false	Include cookies + CSRF header (for BFF/proxy auth — use instead of authToken)
headers	Record<string, string>	—	Extra headers added to every request
defaultScope	{ applicationId?: string; tenantId?: string }	—	Pre-fills the scope selector fields
defaultPrincipalType	string	'user'	Default principal type in assignment forms
defaultGroupType	string	'team'	Default group type in team management
showScopeFields	boolean	true	Show/hide the scope selector (hide for single-tenant apps)
title	string	'RBAC Admin'	Panel heading
subtitle	string	—	Supporting text below the heading
showHero	boolean	true	Show the left hero/branding panel
heroBadge	string	—	Badge label in the hero panel
heroTitle	string	—	Headline text in the hero panel
heroSubtitle	string	—	Supporting text in the hero panel
heroItems	string[]	—	Bullet list in the hero panel

Panels

The component includes five built-in panels accessible via the left navigation:

Panel	Description
Roles	Create, edit, and delete roles. Assign permissions to each role.
Permissions	Define and manage granular permission strings.
Teams	Group principals (users, services) into teams for bulk assignment.
Assignments	Assign roles to principals (users, teams) scoped by application and tenant.
Access Check	Live query — ask "does user X have permission Y in scope Z?"

Required backend endpoints

The component talks to the Primus RBAC API. Ensure these are available:

GET    /api/rbac/roles
POST   /api/rbac/roles
GET    /api/rbac/permissions
POST   /api/rbac/check
GET    /api/rbac/assignments
POST   /api/rbac/assignments
DELETE /api/rbac/assignments/:id

Full endpoint reference: RBAC Integration Guide

Version history

See the Changelog for version history and breaking changes.