@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

npm install @bernierllc/auth-ui

Peer Dependencies

npm install react react-dom

Quick Start

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

function App() {
  return (
    <AuthProvider config={{ apiBaseUrl: 'https://api.example.com' }}>
      <LoginForm
        onSuccess={(user) => console.log('Login successful:', user)}
        redirectTo="/dashboard"
      />
    </AuthProvider>
  );
}

Components

Authentication Components

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

MFA Components

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

Profile Components

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

Protected Routes

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

<ProtectedRoute requireRole="admin">
  <AdminPanel />
</ProtectedRoute>

Hooks

useAuth

Access authentication state and methods:

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

usePermissions

Check user permissions and roles:

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

useMFA

Manage multi-factor authentication:

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

License

Copyright (c) 2025 Bernier LLC - All Rights Reserved