AuthForm

organisms

Auth form — supports sign-in, sign-up, forgot-password, reset-password, verify-email. Email + password + optional name/phone. OAuth buttons (Google, Apple, Facebook).

ARIA Role: form

Demo

Demo for AuthForm (organisms)

Auth form — supports sign-in, sign-up, forgot-password, reset-password, verify-email. Email + password + optional name/phone. OAuth buttons (Google, Apple, Facebook).

Props

PropTypeRequiredDefaultDescription
modeAuthModeYes—

TypeScript Interface

interface AuthFormProps {
  mode: 'sign-in' | 'sign-up' | 'forgot-password' | 'reset-password' | 'verify-email';
  onSubmit: (data: AuthData) => Promise<void>;
  oauthProviders?: { id: 'google' | 'apple' | 'facebook'; label: string; onClick: () => void }[];
  error?: string;
  isSubmitting?: boolean;
  redirectTo?: string;
}

Assertions (NASA Rule 5)

  • [type]mode and onSubmit required(NASA Rule 5)
  • [aria]<form aria-labelledby=titleId>; password manager hints; error has role='alert'(WCAG 3.3.1, 3.3.7)

Usage

Import

import { Authform } from '@epasslive/design-system'

Basic

<Authform />

With Variants

<Authform variant="primary" size="md" />