React authentication components with built-in integration for auth-service
npm install @bernierllc/auth-uiReact authentication components with built-in integration for @bernierllc/auth-service.
- 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
``bash`
npm install @bernierllc/auth-ui
`bash`
npm install react react-dom
`tsx
import React from 'react';
import { AuthProvider, LoginForm } from '@bernierllc/auth-ui';
function App() {
return (
redirectTo="/dashboard"
/>
);
}
`
- LoginForm - User login with email/password and MFA supportRegisterForm
- - User registration with validationPasswordReset
- - Password reset request flow
- MFASetup - Configure two-factor authenticationTOTPSetup
- - Set up TOTP authenticator appMFAVerify
- - Verify MFA code during loginBackupCodes
- - Display and save backup codes
- ProfileForm - Edit user profile informationPasswordChange
- - Change password with validationSecuritySettings
- - Manage security settings and MFA
`tsx
import { ProtectedRoute } from '@bernierllc/auth-ui';
`
Access authentication state and methods:
`tsx`
const { user, isAuthenticated, login, logout, register } = useAuth();
Check user permissions and roles:
`tsx`
const { hasPermission, hasRole, hasAnyPermission } = usePermissions();
Manage multi-factor authentication:
`tsx``
const { setupTOTP, verifyTOTP, disableMFA } = useMFA();
Copyright (c) 2025 Bernier LLC - All Rights Reserved