@abpjs/account-pro

> Enhanced authentication UI components for ABP Framework in React


Overview

@abpjs/account-pro provides enhanced authentication and account management components for ABP-based React applications. It extends the basic account module with advanced features like password reset, profile management, and personal settings.

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

Features

- Login Form - Enhanced login form with validation and error handling
- Registration Form - User registration with configurable fields
- Forgot Password - Request password reset via email
- Reset Password - Reset password with token validation
- Change Password - Change password for authenticated users
- Profile Management - View and update user profile
- Personal Settings - Manage user-specific settings
- Tenant Switching - Multi-tenant support with tenant selection UI
- Chakra UI - Beautiful, accessible components out of the box
- TypeScript - Full type safety

Installation

``bash

Using npm

npm install @abpjs/account-pro

Using yarn

yarn add @abpjs/account-pro

Using pnpm

pnpm add @abpjs/account-pro
`

$3

This package requires the following peer dependencies:

`bash
npm install @abpjs/core @abpjs/theme-shared @chakra-ui/react @emotion/react react-hook-form zod @hookform/resolvers react-icons
`

Quick Start

$3

`tsx
import {
LoginForm,
RegisterForm,
ForgotPasswordForm,
ResetPasswordForm,
ChangePasswordForm,
ManageProfile,
PersonalSettings
} from '@abpjs/account-pro';
import { Routes, Route } from 'react-router-dom';

function App() {
return (

} />
} />
} />
} />
} />
} />
} />

);
}
`

$3

#### Login Form

`tsx
import { LoginForm } from '@abpjs/account-pro';

function LoginPage() {
const handleSuccess = () => {
navigate('/dashboard');
};

return (

Welcome Back

);
}
`

#### Forgot Password

`tsx
import { ForgotPasswordForm } from '@abpjs/account-pro';

function ForgotPasswordPage() {
return (

Forgot Password

onSuccess={() => console.log('Reset email sent!')}
/>

);
}
`

#### Change Password

`tsx
import { ChangePasswordForm } from '@abpjs/account-pro';

function ChangePasswordPage() {
return (

Change Password

onSuccess={() => console.log('Password changed!')}
/>

);
}
`

Components

$3

Enhanced login form with username/email and password fields.

`tsx
import { LoginForm } from '@abpjs/account-pro';

onSuccess={() => navigate('/dashboard')}
onError={(error) => console.error(error)}
showRegisterLink={true}
showForgotPassword={true}
/>
`

$3

User registration form with validation.

`tsx
import { RegisterForm } from '@abpjs/account-pro';

onSuccess={() => navigate('/login')}
onError={(error) => console.error(error)}
/>
`

$3

Request password reset via email.

`tsx
import { ForgotPasswordForm } from '@abpjs/account-pro';

onSuccess={() => console.log('Email sent')}
onError={(error) => console.error(error)}
/>
`

$3

Reset password using token from email.

`tsx
import { ResetPasswordForm } from '@abpjs/account-pro';

onSuccess={() => navigate('/login')}
onError={(error) => console.error(error)}
/>
`

$3

Change password for authenticated users.

`tsx
import { ChangePasswordForm } from '@abpjs/account-pro';

onSuccess={() => console.log('Password changed')}
onError={(error) => console.error(error)}
/>
`

$3

Profile management component.

`tsx
import { ManageProfile } from '@abpjs/account-pro';

onProfileUpdated={(profile) => console.log('Updated:', profile)}
/>
`

$3

User personal settings management.

`tsx
import { PersonalSettings } from '@abpjs/account-pro';


`

$3

Multi-tenant selection component.

`tsx
import { TenantBox } from '@abpjs/account-pro';

onTenantChange={(tenant) => console.log('Tenant changed:', tenant)}
/>
`

Hooks

$3

Hook for implementing OAuth2 resource owner password flow.

`tsx
import { usePasswordFlow } from '@abpjs/account-pro';

function CustomLoginForm() {
const { login, isLoading, error } = usePasswordFlow();

const handleSubmit = async (data) => {
await login({
username: data.username,
password: data.password,
});
};

return (

{/ Your custom form /}

);
}
`

$3

Hook for account pro API operations.

`tsx
import { useAccountProService } from '@abpjs/account-pro';

function MyComponent() {
const service = useAccountProService();

const handleForgotPassword = async (email: string) => {
await service.sendPasswordResetCode({ email });
};

const handleResetPassword = async (data) => {
await service.resetPassword({
userId: data.userId,
resetToken: data.token,
password: data.newPassword,
});
};
}
``

Related Packages

- @abpjs/core - Core infrastructure (required)
- @abpjs/theme-shared - Shared UI components (required)
- @abpjs/account - Basic account module
- @abpjs/identity-pro - Identity Pro features

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