Login Form

Email and password, with somewhere for SSO buttons and an error. The error is announced, not just coloured — a failed sign-in that only turns red is invisible to a screen reader.

src/components/ui/login-form.tsx

About

From the component's own source, where it was written.

Email and password sign-in, with providers.

The error is deliberately generic and lives above the form, not on a field. "No account with that email" tells an attacker which addresses are registered; a single "those details do not match" on the form as a whole leaks nothing and is what every audited implementation does.

Field names and autocomplete tokens are the real ones — username and current-password — because password managers key off them, and a login form they cannot fill is one people work around by choosing weaker passwords.

Install

npx astralyx-ui add login-form

Usage

import { LoginForm } from '@/components/ui/login-form'

<LoginForm onSubmit={signIn} onForgot={reset} error={error} />

Composer

Change the props and the source below follows.

Props

errorloadingSSO buttons

tsx

<LoginForm onSubmit={signIn} onForgot={reset} error={error} />

Examples

With SSO providers and a failure

tsx

<LoginForm
  error="Those credentials did not match an account."
  providers={<><Button variant="secondary">GitHub</Button><Button variant="secondary">Google</Button></>}
  onForgot={() => navigate('/reset')}
/>

Submitting

tsx

<LoginForm loading submitLabel="Signing in…" />

API

Generated from the source, so it cannot fall behind the code. One table per exported component, then hooks, functions and types.

`LoginForm`