Skip to content
Aback UI

Block ยท Authentication

Sign in

A complete sign-in card with email, password, remember me, and account links.

Beta6 componentsRegistry JSON (opens in a new tab)
the Sign in preview in a new tab

Desktop at 1280 pixels. The frame scrolls when the block is taller than 900 pixels. Example data is labelled inside the preview.

Installation

One item installs the block and every component it imports.

npx aback-ui@latest add sign-in

The block lands at components/blocks/sign-in.tsx. First time in this project? Run npx aback-ui@latest init first, as the installation guide shows. Blocks are copied with the CLI; they are not part of the npm package.

Built from

The registry installs these components with the block.

What to customize

  • Replace onSubmit with your auth client call. The block owns no authentication, network request, or session state.
  • Swap the two anchors for your router's link component so the auth flow keeps client-side navigation.
  • Render server errors by passing them into the form: mark the field aria-invalid and add a Field error. Do not rely on the password length or an empty email as validation.
  • If your product supports passkeys or SSO, add them above the divider and keep the email form as the fallback.

Accessibility

  • The block renders a section labelled by its h2; your page supplies the h1 and breadcrumbs.
  • Every control has a visible label. The remember option pairs Checkbox with a real Label, so clicking the text toggles it.
  • Enter submits the form natively, and the button is a real submit button. Password managers can fill both fields.
  • Error messages are not included by default: add them with role alert next to the field and connect them through aria-describedby.