AuthForm

A comprehensive authentication form component that handles both login and registration flows.

New in v3.3.1

Glassmorphic shell with layered gradients, frosted borders, and elevated social login trays for instant polish.
Curated password strength indicator with requirement chips, gradient progress, and inline recommendations.
Inline password visibility toggle unified across AuthCore via the shared TextInput component.

Policy aware by default

Automatically surfaces magic links, tenant-enforced 2FA, and email OTP guidance from /api/auth/policy.
Registration responses render contextual next steps (email verification, authenticator setup, approvals) instead of a generic success state.
Login flow seamlessly escalates to second-factor entry whenever the server demands it, keeping tenant rules in sync across modals and standalone pages.

Sample policy payload

Live Demo

Prop	Type	Default	Description
mode	`'login' \| 'register'`	`'login'`	Choose between login and registration flows.
allowSwitch	`boolean`	`true`	Enables the built-in toggle between login and registration.
hideInternalSwitch	`boolean`	`false`	Hide the mode toggle when you control `mode` externally.
showSocial	`boolean`	`runtime.enableSocial`	Force social providers on or off regardless of runtime configuration.
socialProviders	`Array<string \| AuthFormSocialProvider>`	`['google','github','facebook']`	Filter or relabel social buttons. Disabled providers are omitted automatically.
redirectUrl	`string`	`runtime.defaultRedirect \|\| '/dashboard'`	Destination after successful login or registration.
showTenantField	`boolean`	`false`	Adds an organization domain input for multi-tenant flows.
showProgress	`boolean`	`true`	Displays multi-step progress indicators during registration/TOTP flows.
enableAnimations	`boolean`	`true`	Toggle entry animations for environments that prefer reduced motion.
initialValues	`Partial<{ name: string; email: string; password: string; tenantDomain: string }>`	-	Seed default values when embedding the form in modals or deep links.
className	`string`	-	Apply custom styling to the outer wrapper.
onSuccess	`() => void`	-	Invoked after a successful authentication flow.

Add two-factor authentication to user accounts

Handle password reset and account recovery

Server-side checks: Always verify credentials and tokens on the server; the client component should never be trusted for auth decisions.
Email verification: If using verification, clearly surface next steps after registration—do not auto-login until verified.
Password rules: Enforce strength server-side and provide helpful client-side hints (length, character types).
Accessibility: Ensure inputs have proper labels, aria-live regions for errors, and keyboard focus management when modals open.