AppSec UI Library

A plug-and-play RBAC (Role-Based Access Control) dashboard UI library for React/Next.js applications.

Features

• RBAC Management: Complete user interface for managing roles, permissions, and access control
• Onboarding Flow: Step-by-step setup wizard for configuring RBAC systems
• API Caching: Built-in TanStack Query integration for efficient API response caching
• Modern UI: Built with Tailwind CSS and Lucide React icons
• TypeScript: Full TypeScript support with comprehensive type definitions

Installation

npm install appsec-ui

Quick Start

1. Set up providers

Wrap your application with the required providers:

import { RbacQueryProvider, AppsecProvider } from 'appsec-ui';

function App() {
  return (
    <RbacQueryProvider>
      <AppsecProvider
        appId="your-app-id"
        baseUrl="https://your-api-endpoint.com/api"
        appsecUrl="https://your-appsec-endpoint.com"
        mode="manage"
        getAuthToken={() => localStorage.getItem('authToken')}
      >
        {/* Your app content */}
      </AppsecProvider>
    </RbacQueryProvider>
  );
}

2. Use RBAC Management Component

import { RBACManagement } from 'appsec-ui';

function MyApp() {
  return (
    <div className="container mx-auto p-4">
      <RBACManagement />
    </div>
  );
}

TanStack Query Integration

This library uses TanStack Query (React Query) for efficient API caching and state management. The integration provides:

Automatic Caching

• API responses are automatically cached for 5 minutes
• Prevents unnecessary API calls on component re-renders
• Background refetching keeps data fresh

Query Keys

The library uses structured query keys for cache management:

• ['rbac', 'app', appId] - App information
• ['rbac', 'modules', appMongoId] - Application modules
• ['rbac', 'roles', appMongoId] - User roles
• ['rbac', 'acls', appMongoId] - Access control lists
• ['rbac', 'groups', appMongoId] - User groups

Mutation Handling

Mutations automatically invalidate related queries:

• Creating/updating ACLs invalidates ACL queries
• Bulk operations update the cache optimistically

Configuration

You can customize the query client behavior:

import { queryClient } from 'appsec-ui';

// Customize default options
queryClient.setDefaultOptions({
  queries: {
    staleTime: 10 * 60 * 1000, // 10 minutes
    retry: 1,
  },
});

API Requirements

Your backend API should provide the following endpoints:

• GET /apps?name={appId} - Get app information
• GET /modules?appId={appId} - Get application modules
• GET /roles?appId={appId} - Get user roles
• GET /acl?application={appId} - Get access control entries
• GET /groups?appId={appId} - Get user groups
• POST /acl - Create access control entry
• DELETE /acl?_id={id} - Delete access control entry
• PUT /acl/bulkUpdate - Bulk update access control entries

Components

RBACManagement

Main component for managing RBAC configuration.

<RBACManagement
  defaultTab="groups"
  className="custom-styles"
/>

OnboardingStepper

Step-by-step onboarding flow for setting up RBAC.

<OnboardingStepper
  onComplete={() => console.log('Onboarding complete')}
/>

Styling

This library uses Tailwind CSS with custom CSS variables for theming. Make sure to include Tailwind in your project:

npm install -D tailwindcss

The library uses these CSS custom properties:

• --appsec-bg - Background color
• --appsec-surface - Surface/card color
• --appsec-border - Border color
• --appsec-text - Primary text color
• --appsec-text-secondary - Secondary text color

TypeScript Support

The library is written in TypeScript and provides comprehensive type definitions. All components and hooks are fully typed.

Browser Support

• Chrome 90+
• Firefox 88+
• Safari 14+
• Edge 90+

License

MIT