Package Exports

@bernierllc/auth-ui
@bernierllc/auth-ui/dist/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@bernierllc/auth-ui) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

@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();