Authentication Component

A headless component library for managing user authentication, including login, logout, and password reset functionality. Built with TypeScript, accessibility-first design, and platform-agnostic architecture.

Installation

npm install @haus-storefront/authentication
# or
yarn add @haus-storefront/authentication

Usage Examples

Login

import { Login } from '@haus-storefront-react/authentication'

// Basic usage with children
<Login.Root>
  <Login.Form>
    <Login.EmailInput />
    <Login.PasswordInput />
    <Login.SubmitButton>Login</Login.SubmitButton>
  </Login.Form>
</Login.Root>

// Advanced usage with render prop
<Login.Root onLogin={(username) => console.log(`User ${username} logged in`)}>
  {({ isLoading, loginError, loginSuccess }) => (
    <div>
      <Login.Form>
        <Login.EmailInput />
        <Login.PasswordInput />
        <Login.SubmitButton>
          {isLoading ? 'Logging in...' : 'Login'}
        </Login.SubmitButton>
      </Login.Form>
      {loginError && <div className="error">Error: {loginError.message}</div>}
      {loginSuccess && <div className="success">Login successful!</div>}
    </div>
  )}
</Login.Root>

// With custom styling using asChild
<Login.Root>
  <Login.Form asChild>
    <form className="login-form">
      <Login.EmailInput asChild>
        <input className="email-input" />
      </Login.EmailInput>
      <Login.PasswordInput asChild>
        <input className="password-input" />
      </Login.PasswordInput>
      <Login.SubmitButton asChild>
        <button className="submit-button">Login</button>
      </Login.SubmitButton>
    </form>
  </Login.Form>
</Login.Root>

Request Password Reset

import { RequestReset } from '@haus-storefront-react/authentication'

// Basic usage
<RequestReset.Root>
  <RequestReset.Form>
    <RequestReset.EmailInput />
    <RequestReset.SubmitButton>Send Reset Email</RequestReset.SubmitButton>
  </RequestReset.Form>
</RequestReset.Root>

// Advanced usage with callbacks
<RequestReset.Root
  onPasswordReset={(email) => console.log(`Reset email sent to ${email}`)}
  onPasswordResetError={(error) => console.error('Reset failed:', error)}
>
  {({ isLoading, requestResetError, requestResetSuccess }) => (
    <div>
      <RequestReset.Form>
        <RequestReset.EmailInput />
        <RequestReset.SubmitButton>
          {isLoading ? 'Sending...' : 'Send Reset Email'}
        </RequestReset.SubmitButton>
      </RequestReset.Form>
      {requestResetError && <div className="error">Error: {requestResetError.message}</div>}
      {requestResetSuccess && <div className="success">Reset email sent!</div>}
    </div>
  )}
</RequestReset.Root>

Reset Password

import { ResetPassword } from '@haus-storefront-react/authentication'

// Basic usage
<ResetPassword.Root token="your-reset-token">
  <ResetPassword.Form token="your-reset-token">
    <ResetPassword.PasswordInput />
    <ResetPassword.PasswordConfirmationInput />
    <ResetPassword.SubmitButton>Reset Password</ResetPassword.SubmitButton>
  </ResetPassword.Form>
</ResetPassword.Root>

// Advanced usage with validation feedback
<ResetPassword.Root token="your-reset-token">
  {({ isLoading, resetPasswordError, resetPasswordSuccess }) => (
    <div>
      <ResetPassword.Form token="your-reset-token">
        <ResetPassword.PasswordInput />
        <ResetPassword.PasswordConfirmationInput />
        <ResetPassword.SubmitButton>
          {isLoading ? 'Resetting...' : 'Reset Password'}
        </ResetPassword.SubmitButton>
      </ResetPassword.Form>
      {resetPasswordError && <div className="error">Error: {resetPasswordError.message}</div>}
      {resetPasswordSuccess && <div className="success">Password reset successfully!</div>}
    </div>
  )}
</ResetPassword.Root>

Logout

import { Logout } from '@haus-storefront-react/authentication'

// Basic usage
<Logout.Root>
  <Logout.Button>Logout</Logout.Button>
</Logout.Root>

// With redirect after logout
<Logout.Root onLogoutRedirect="/auth/login">
  <Logout.Button>Logout</Logout.Button>
</Logout.Root>

// Advanced usage with callbacks
<Logout.Root
  onLogout={() => console.log('User logged out')}
  onLogoutError={(error) => console.error('Logout failed:', error)}
>
  {({ isLoading, logoutError, logoutSuccess }) => (
    <div>
      <Logout.Button>
        {isLoading ? 'Logging out...' : 'Logout'}
      </Logout.Button>
      {logoutError && <div className="error">Error: {logoutError.message}</div>}
      {logoutSuccess && <div className="success">Logged out successfully!</div>}
    </div>
  )}
</Logout.Root>

Features

• 🔐 Complete Authentication Flow: Login, logout, password reset request, and password reset
• ♿ Accessibility First: ARIA labels, proper form semantics, and keyboard navigation
• 📱 Platform Agnostic: Works with React Native and web platforms
• 🎨 Headless Design: No styling included, fully customizable
• 🔧 TypeScript Support: Full type safety and IntelliSense
• ⚡ Performance Optimized: Efficient re-renders and minimal bundle size
• 🛡️ Form Validation: Built-in password confirmation validation
• 🔄 Loading States: Proper loading indicators and disabled states
• 📝 Error Handling: Comprehensive error states and user feedback
• 🎯 Event Callbacks: Customizable success and error callbacks

API Reference

Login Component

<Login.Root>

Context provider for login functionality.

Props:

• onLogin?: (username: string) => Promise<void> | void - Callback when login succeeds
• onLoginError?: (error: Error) => void - Callback when login fails
• children?: ReactNode | ((props: LoginContextValue) => ReactNode) - Children or render prop

Context Value:

• isLoading: boolean - Whether login is in progress
• loginError: Error | null - Login error if any
• loginSuccess: boolean - Whether login was successful
• login: (email: string, password: string) => Promise<void> - Login function
• getFormProps: () => FormProps - Form props
• getEmailInputProps: () => InputProps - Email input props
• getPasswordInputProps: () => InputProps - Password input props
• getSubmitButtonProps: () => ButtonProps - Submit button props

<Login.Form>

Form component that handles submission.

Props:

• asChild?: boolean - Whether to render as a slot
• children: ReactNode - Form contents

<Login.EmailInput>

Email input field with proper accessibility attributes.

Props:

• asChild?: boolean - Whether to render as a slot
• All standard input props

<Login.PasswordInput>

Password input field with proper accessibility attributes.

Props:

• asChild?: boolean - Whether to render as a slot
• All standard input props

<Login.SubmitButton>

Submit button with loading state handling.

Props:

• asChild?: boolean - Whether to render as a slot
• children: ReactNode - Button content
• All standard button props

Request Reset Component

<RequestReset.Root>

Context provider for password reset request functionality.

Props:

• onPasswordReset?: (email: string) => Promise<void> | void - Callback when reset email is sent
• onPasswordResetError?: (error: Error) => void - Callback when reset request fails
• children?: ReactNode | ((props: RequestResetReturn) => ReactNode) - Children or render prop

Context Value:

• isLoading: boolean - Whether request is in progress
• requestResetError: Error | null - Request error if any
• requestResetSuccess: boolean - Whether request was successful
• requestPasswordReset: (email: string) => Promise<void> - Request function
• getFormProps: () => FormProps - Form props
• getEmailInputProps: () => InputProps - Email input props
• getSubmitButtonProps: () => ButtonProps - Submit button props

Reset Password Component

<ResetPassword.Root>

Context provider for password reset functionality.

Props:

• token: string - Reset token from email
• onReset?: () => void - Callback when password is reset
• onResetError?: (error: Error) => void - Callback when reset fails
• children?: ReactNode | ((props: ResetPasswordReturn) => ReactNode) - Children or render prop

Context Value:

• isLoading: boolean - Whether reset is in progress
• resetPasswordError: Error | null - Reset error if any
• resetPasswordSuccess: boolean - Whether reset was successful
• resetPassword: (token: string, password: string) => Promise<void> - Reset function
• getFormProps: (token: string) => FormProps - Form props
• getPasswordInputProps: () => InputProps - Password input props
• getPasswordConfirmationInputProps: () => InputProps - Password confirmation input props
• getSubmitButtonProps: () => ButtonProps - Submit button props

Logout Component

<Logout.Root>

Context provider for logout functionality.

Props:

• onLogout?: () => Promise<void> - Callback when logout is triggered
• onLogoutError?: (error: Error) => void - Callback when logout fails
• onLogoutRedirect?: string - URL to redirect to after logout
• children?: ReactNode | ((props: LogoutReturn) => ReactNode) - Children or render prop

Context Value:

• isLoading: boolean - Whether logout is in progress
• logoutError: Error | null - Logout error if any
• logoutSuccess: boolean - Whether logout was successful
• logout: () => Promise<void> - Logout function
• getButtonProps: () => ButtonProps - Button props

<Logout.Button>

Button component that triggers logout.

Props:

• asChild?: boolean - Whether to render as a slot
• children: ReactNode - Button content
• All standard button props

Accessibility

All components include proper accessibility attributes:

• ARIA Labels: All interactive elements have descriptive labels
• Form Semantics: Proper form structure with labels and associations
• Loading States: aria-busy attributes for loading indicators
• Error Announcements: Error messages are properly associated with form fields
• Keyboard Navigation: Full keyboard support for all interactive elements
• Screen Reader Support: Proper heading structure and semantic markup

Platform Support

This library is designed to work across different platforms:

• Web: Full support with all features
• React Native: Platform-agnostic primitives for cross-platform compatibility
• Mobile: Touch-friendly interactions and mobile-optimized UX

Testing

# Run tests
nx test store/components/authentication

# Run tests in watch mode
nx test store/components/authentication --watch

# Run tests with coverage
nx test store/components/authentication --coverage