@abpjs/identity-pro

@abpjs/identity-pro

Enhanced user, role, and claim management UI components for ABP Framework in React

Overview

@abpjs/identity-pro provides enhanced identity management components for ABP-based React applications. It extends the basic identity module with advanced features like claim type management, user/role claims, and organization units.

This package is a React translation of the original @volo/abp.ng.identity Angular package, bringing pro-level identity management to React applications.

Features

• User Management - Create, read, update, and delete users with enhanced options
• Role Management - Create, read, update, and delete roles
• Claim Types - Manage custom claim types for users and roles
• User Claims - Assign and manage claims on individual users
• Role Claims - Assign and manage claims on roles
• Role Assignment - Assign roles to users with checkbox interface
• Permission Integration - Seamlessly integrates with permission management
• Pagination - Built-in pagination for all list views
• Search & Filter - Filter users, roles, and claims
• Localization - Full i18n support using ABP localization
• Chakra UI - Beautiful, accessible components
• TypeScript - Full type safety with comprehensive definitions

Installation

# Using npm
npm install @abpjs/identity-pro

# Using yarn
yarn add @abpjs/identity-pro

# Using pnpm
pnpm add @abpjs/identity-pro

Required Dependencies

This package requires the following peer dependencies:

npm install @abpjs/core @abpjs/theme-shared @abpjs/permission-management @chakra-ui/react @emotion/react react-icons react-router-dom

Quick Start

Using Pre-built Components

import { RolesComponent, UsersComponent, ClaimsComponent } from '@abpjs/identity-pro';
import { Tabs, TabList, TabPanels, Tab, TabPanel } from '@chakra-ui/react';

function IdentityProManagement() {
  return (
    <Tabs>
      <TabList>
        <Tab>Users</Tab>
        <Tab>Roles</Tab>
        <Tab>Claim Types</Tab>
      </TabList>

      <TabPanels>
        <TabPanel>
          <UsersComponent
            onUserCreated={(user) => console.log('User created:', user)}
            onUserDeleted={(id) => console.log('User deleted:', id)}
          />
        </TabPanel>
        <TabPanel>
          <RolesComponent
            onRoleCreated={(role) => console.log('Role created:', role)}
            onRoleDeleted={(id) => console.log('Role deleted:', id)}
          />
        </TabPanel>
        <TabPanel>
          <ClaimsComponent
            onClaimTypeCreated={(claim) => console.log('Claim type created:', claim)}
            onClaimTypeDeleted={(id) => console.log('Claim type deleted:', id)}
          />
        </TabPanel>
      </TabPanels>
    </Tabs>
  );
}

Using Hooks for Custom UI

import { useUsers, useRoles, useClaims } from '@abpjs/identity-pro';
import { useEffect } from 'react';

function CustomIdentityPage() {
  const { users, fetchUsers } = useUsers();
  const { roles, fetchRoles } = useRoles();
  const { claimTypes, fetchClaimTypes } = useClaims();

  useEffect(() => {
    fetchUsers();
    fetchRoles();
    fetchClaimTypes();
  }, [fetchUsers, fetchRoles, fetchClaimTypes]);

  return (
    <div>
      <h2>Users: {users.length}</h2>
      <h2>Roles: {roles.length}</h2>
      <h2>Claim Types: {claimTypes.length}</h2>
    </div>
  );
}

Components

UsersComponent

Complete user management component with enhanced pro features.

import { UsersComponent } from '@abpjs/identity-pro';

<UsersComponent
  onUserCreated={(user) => console.log('Created:', user)}
  onUserUpdated={(user) => console.log('Updated:', user)}
  onUserDeleted={(id) => console.log('Deleted:', id)}
/>

Features:

• User table with actions menu
• Search/filter by username
• Pagination controls
• Create/Edit modal with tabs for user info, role assignment, and claims
• Permission management integration
• Delete confirmation dialog

RolesComponent

Complete role management component with claim support.

import { RolesComponent } from '@abpjs/identity-pro';

<RolesComponent
  onRoleCreated={(role) => console.log('Created:', role)}
  onRoleUpdated={(role) => console.log('Updated:', role)}
  onRoleDeleted={(id) => console.log('Deleted:', id)}
/>

Features:

• Role table with actions menu
• Search/filter by role name
• Create/Edit modal with isDefault and isPublic options
• Role claims management
• Permission management integration
• Static role protection
• Delete confirmation dialog

ClaimsComponent

Claim type management component.

import { ClaimsComponent } from '@abpjs/identity-pro';

<ClaimsComponent
  onClaimTypeCreated={(claim) => console.log('Created:', claim)}
  onClaimTypeUpdated={(claim) => console.log('Updated:', claim)}
  onClaimTypeDeleted={(id) => console.log('Deleted:', id)}
/>

Features:

• Claim types table
• Search/filter by claim name
• Create/Edit modal with value type selection
• Required field configuration
• Regex validation pattern support
• Delete confirmation dialog

Hooks

useUsers

Hook for managing users with full CRUD and pagination support.

import { useUsers } from '@abpjs/identity-pro';

const {
  users,              // Array of users
  totalCount,         // Total user count
  selectedUser,       // Currently selected user
  selectedUserRoles,  // Roles of selected user
  isLoading,          // Loading state
  error,              // Error message
  fetchUsers,         // Fetch users with optional params
  getUserById,        // Get single user
  getUserRoles,       // Get user's roles
  createUser,         // Create new user
  updateUser,         // Update existing user
  deleteUser,         // Delete user
  reset,              // Reset all state
} = useUsers();

useRoles

Hook for managing roles with full CRUD support.

import { useRoles } from '@abpjs/identity-pro';

const {
  roles,            // Array of roles
  totalCount,       // Total role count
  selectedRole,     // Currently selected role
  isLoading,        // Loading state
  error,            // Error message
  fetchRoles,       // Fetch all roles
  getRoleById,      // Get single role
  createRole,       // Create new role
  updateRole,       // Update existing role
  deleteRole,       // Delete role
  reset,            // Reset all state
} = useRoles();

useClaims

Hook for managing claim types.

import { useClaims } from '@abpjs/identity-pro';

const {
  claimTypes,           // Array of claim types
  totalCount,           // Total claim type count
  selectedClaimType,    // Currently selected claim type
  isLoading,            // Loading state
  error,                // Error message
  fetchClaimTypes,      // Fetch claim types with optional params
  getClaimTypeById,     // Get single claim type
  createClaimType,      // Create new claim type
  updateClaimType,      // Update existing claim type
  deleteClaimType,      // Delete claim type
  reset,                // Reset all state
} = useClaims();

useIdentity

Combined hook for managing users and roles.

import { useIdentity } from '@abpjs/identity-pro';

const {
  roles,
  users,
  fetchRoles,
  fetchUsers,
} = useIdentity();

Services

IdentityProService

Service class for identity pro API operations.

import { IdentityProService } from '@abpjs/identity-pro';
import { useRestService } from '@abpjs/core';

function MyComponent() {
  const restService = useRestService();
  const service = new IdentityProService(restService);

  // User operations
  await service.getUsers({ maxResultCount: 10, skipCount: 0 });
  await service.getUserById(userId);
  await service.createUser(userData);
  await service.updateUser(userId, userData);
  await service.deleteUser(userId);

  // Role operations
  await service.getRoles();
  await service.createRole(roleData);

  // Claim type operations
  await service.getClaimTypes();
  await service.createClaimType(claimData);
}

Data Models

User Types

interface UserItem {
  id: string;
  tenantId: string;
  userName: string;
  name: string;
  surname: string;
  email: string;
  emailConfirmed: boolean;
  phoneNumber: string;
  phoneNumberConfirmed: boolean;
  twoFactorEnabled: boolean;
  lockoutEnabled: boolean;
  isLockedOut: boolean;
  concurrencyStamp: string;
}

Role Types

interface RoleItem {
  id: string;
  name: string;
  isDefault: boolean;
  isPublic: boolean;
  isStatic: boolean;
  concurrencyStamp: string;
}

Claim Types

interface ClaimType {
  id: string;
  name: string;
  required: boolean;
  isStatic: boolean;
  regex: string;
  regexDescription: string;
  description: string;
  valueType: ClaimValueType;
  valueTypeAsString: string;
}

enum ClaimValueType {
  String = 0,
  Int = 1,
  Boolean = 2,
  DateTime = 3,
}

ABP Permissions

This package respects ABP's identity pro permissions:

Permission	Description
AbpIdentity.Users	View users
AbpIdentity.Users.Create	Create users
AbpIdentity.Users.Update	Update users
AbpIdentity.Users.Delete	Delete users
AbpIdentity.Users.ManagePermissions	Manage user permissions
AbpIdentity.Roles	View roles
AbpIdentity.Roles.Create	Create roles
AbpIdentity.Roles.Update	Update roles
AbpIdentity.Roles.Delete	Delete roles
AbpIdentity.Roles.ManagePermissions	Manage role permissions
AbpIdentity.ClaimTypes	View claim types
AbpIdentity.ClaimTypes.Create	Create claim types
AbpIdentity.ClaimTypes.Update	Update claim types
AbpIdentity.ClaimTypes.Delete	Delete claim types

Related Packages

• @abpjs/core - Core infrastructure (required)
• @abpjs/theme-shared - Shared UI components (required)
• @abpjs/permission-management - Permission management (required)
• @abpjs/identity - Basic identity module
• @abpjs/account-pro - Account Pro features
• @abpjs/saas - SaaS module

Contributing

This package is part of the ABP React monorepo. Contributions are welcome!

License

LGPL-3.0 - See LICENSE for details.

View Full Documentation | Report Issues | View Source