# appsec-ui

> Plug-and-play RBAC dashboard UI library for React/Next.js

Latest version **1.0.11** (published 2026-09-07) · 0 weekly downloads

## Install

```sh
npm install appsec-ui
pnpm add appsec-ui
yarn add appsec-ui
bun add appsec-ui
```

## Health

**Score 70/100 (B)** — status: active.

Positive: has types; esm support; no vulnerabilities; recently updated; high maintenance score; high quality score.

Warnings: low downloads.

## Facts

| | |
|---|---|
| Version | 1.0.11 |
| Published | 2026-09-07 |
| First published | 2026-04-28 |
| Weekly downloads | 0 |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 5 |
| Unpacked size | 2.1 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | aryann208, ajinkya1029 |

## Links

- npm: https://www.npmjs.com/package/appsec-ui
- npm.io page: https://npm.io/package/appsec-ui

## Dependencies (5)

- [clsx](https://npm.io/package/clsx.md) ^2.1.1
- [path](https://npm.io/package/path.md) ^0.12.7
- [lucide-react](https://npm.io/package/lucide-react.md) ^0.378.0
- [tailwind-merge](https://npm.io/package/tailwind-merge.md) ^2.3.0
- [@tanstack/react-query](https://npm.io/package/@tanstack/react-query.md) ^5.100.9

## Recent versions

- 1.0.11 (latest) — 2026-09-07
- 1.0.10 — 2026-08-31
- 1.0.9 — 2026-08-13
- 1.0.8 — 2026-08-04
- 1.0.7 — 2026-07-08
- 1.0.6 — 2026-07-08
- 1.0.5 — 2026-07-06
- 1.0.4 — 2026-07-02
- 1.0.3 — 2026-07-02
- 1.0.2 — 2026-07-02
- 1.0.1 — 2026-07-02
- 1.0.0 — 2026-07-02
- 0.1.24 — 2026-07-01
- 0.1.23 — 2026-07-01
- 0.1.22 — 2026-07-01
- … 21 more at https://npm.io/package/appsec-ui/versions

## README

# 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

```bash
npm install appsec-ui
```

## Quick Start

### 1. Set up providers

Wrap your application with the required providers:

```tsx
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

```tsx
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:

```tsx
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.

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

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

```tsx
<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:

```bash
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
## Per-mode PIN components

The PIN flow consists of three independently importable components. Enrollment
verifies the emailed six-digit OTP, then creates a six-digit PIN with one
server-provided recovery answer. Normal access uses the PIN keypad. Recovery
verifies the emailed recovery OTP and registered answer before allowing the PIN
to be reset.

```tsx
import { EnterModePin, ResetModePin, SetupModePin } from "appsec-ui";

<SetupModePin
  modeId={modeId}
  email={currentUser.email}
  appsecUrl="https://appsec.example.com"
  credentials="include"
  onSuccess={() => showModeLogin()}
/>

<EnterModePin
  modeId={modeId}
  appsecUrl="https://appsec.example.com"
  credentials="include"
  onSuccess={() => enterMode()}
  // Called only after /api/mode-pin/forgot confirms the recovery OTP was sent.
  onForgotPin={({ sent }) => {
    if (sent) setScreen("reset");
  }}
/>

<ResetModePin
  modeId={modeId}
  appsecUrl="https://appsec.example.com"
  credentials="include"
  securityQuestion={forgotResultQuestion}
  onSuccess={() => setScreen("enter")}
/>
```

Requests include cookies by default. For bearer authentication, pass
`authToken` as a string or a function that returns the latest token. A custom
`request` transport can also be supplied. Each component accepts exactly one
of `modeId`, `modeName`, `appId`, or `appName`. Styling uses the same Tailwind
theme tokens as the rest of the library.

---
_Source: https://npm.io/package/appsec-ui · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._