@bernierllc/auth-ui

React authentication components with built-in integration for @bernierllc/auth-service.

Features

- Authentication Forms: Login, registration, password reset components
- MFA Components: TOTP setup, verification, backup codes
- User Profile: Profile editing, password change, account settings
- Protected Routes: Role and permission-based route protection
- Responsive Design: Mobile-first responsive components
- Accessibility: WCAG 2.1 compliant components
- TypeScript: Full TypeScript support with type definitions

Installation

``bash
npm install @bernierllc/auth-ui
`

Peer Dependencies

`bash
npm install react react-dom
`

Quick Start

`tsx
import React from 'react';
import { AuthProvider, LoginForm } from '@bernierllc/auth-ui';

function App() {
return (

onSuccess={(user) => console.log('Login successful:', user)}
redirectTo="/dashboard"
/>

);
}
`

Components

$3

- LoginForm - User login with email/password and MFA support
- RegisterForm - User registration with validation
- PasswordReset - Password reset request flow

$3

- MFASetup - Configure two-factor authentication
- TOTPSetup - Set up TOTP authenticator app
- MFAVerify - Verify MFA code during login
- BackupCodes - Display and save backup codes

$3

- ProfileForm - Edit user profile information
- PasswordChange - Change password with validation
- SecuritySettings - Manage security settings and MFA

$3

`tsx
import { ProtectedRoute } from '@bernierllc/auth-ui';




`

Hooks

$3

Access authentication state and methods:

`tsx
const { user, isAuthenticated, login, logout, register } = useAuth();
`

$3

Check user permissions and roles:

`tsx
const { hasPermission, hasRole, hasAnyPermission } = usePermissions();
`

$3

Manage multi-factor authentication:

`tsx
const { setupTOTP, verifyTOTP, disableMFA } = useMFA();
``

License

Copyright (c) 2025 Bernier LLC - All Rights Reserved