SignIn

Renders a fully-working login form that walks users through whichever auth methods you've enabled. Driven by the auth-flow API, so adding a new method on the server (e.g. enabling passkeys) automatically shows it in the UI without a code change.

Import

The component is exported today as LoginForm. SignIn is a semantic alias added in v1.1. Both names will be exported for one minor release; prefer SignIn in new code.

Usage

import { LoginForm }

Props

Prop	Type	Default	Description
`returnTo`	string	`/`	URL to return to after sign-in completes
`organizationId`	string	`undefined`	Restrict sign-in to a specific org
`aal`	`"aal1"` \| `"aal2"` \| `"aal3"`	`"aal1"`	Required assurance level
`loginChallenge`	string	`undefined`	OAuth2 login_challenge (for embedded OAuth flows)
`onSuccess`	`(session: Session) => void`	`undefined`	Fires on successful sign-in
`onError`	`(err: Error) => void`	`undefined`	Fires on terminal error
`hideSocialButtons`	boolean	`false`	Hide the social login buttons
`hideSignUpLink`	boolean	`false`	Hide the "Create account" CTA
`className`	string	`undefined`	Extra wrapper class

Example -- Next.js App Router

// app/sign-in/page.tsx

Example -- React Router 7

// routes/sign-in.tsx

Accessibility

Every input carries a visible label and an associated aria-describedby for errors.
Passkey button uses <button type="button" aria-label="Sign in with a passkey">.
Error messages announce via role="alert" on the <Callout kind="error"> region.
Keyboard navigable end-to-end; no focus trap.
Tested against NVDA + VoiceOver for WCAG 2.2 AA.

Theming

Inherits colors / spacing / type from the wrapping <DesignSystemProvider>. Override via the className prop or by setting --cds-* tokens in your CSS:

.my-sign-in {
  --cds-interactive: #0066ff;
  --cds-focus: #0066ff;
}

See Theming.

On this page