# Centered login

> A passkey-first login card on a quiet ring backdrop that morphs through email and code.

- Page: https://ui.xzero.co.uk/components/blocks/login-centered

## Variant: Centered

A passkey-first login card on a quiet ring backdrop that morphs through email and code.

- Access: Free, open source
- Registry id: `login-centered`
- Source file: `registry/blocks/login-centered/login-centered.tsx`
- Built from: Button, Input, OTP input
- Keywords: react login page, passkey login, sign in page, otp email login, webauthn sign in ui, sign up page, auth card

Use this as a full screen sign in page (pass fullScreen). Connect the passkey button to WebAuthn, the email step to your magic code sender, the code step to verification, and the SSO buttons to your OAuth routes; onSignIn receives the email, method and mode.

### When to use

- A full screen sign in or sign up page where passkeys are the main method.
- Auth flows that fall back to a six digit email code.
- Products that want one card for both sign in and sign up.

### When not to use

- Use login-split for password sign in beside a brand photo.
- Use login-immersive for magic link auth over a full-bleed photo.
- Use sign-in for a simpler embedded sign in form.

## Installation

Register both Xzero UI namespaces in your project's components.json:

```json
{
  "registries": {
    "@xzero-ui": "https://mcp.xzero.co.uk/r/{name}.json",
    "@xzero-ui-pro": "https://mcp.xzero.co.uk/r/pro/{name}.json"
  }
}
```

```bash
npx shadcn@4.23.0 add @xzero-ui/login-centered
```

Install xzero-foundation once, and import @/components/xzero/foundation.css in your app root. No Xzero token is used by this snapshot. For sample portraits, photos, fonts, or logos, download https://mcp.xzero.co.uk/install-assets.mjs and run node xzero-install-assets.mjs <receiving-project>.

### Usage

```tsx
import { LoginCentered } from "@/components/xzero/blocks/login-centered/login-centered";
import { useRouter } from "next/navigation";

export default function SignInPage() {
  const router = useRouter();
  return (
    <LoginCentered
      fullScreen
      termsHref="/terms"
      privacyHref="/privacy"
      onSignIn={() => router.push("/app")}
    />
  );
}
```

### Examples

#### Route sign ups to onboarding

```tsx
<LoginCentered
  fullScreen
  onSignIn={(email, method, mode) =>
    router.push(mode === "sign-up" ? "/welcome" : "/app")
  }
/>
```

### API reference

#### LoginCentered

A passkey-first sign in and sign up card on a ring backdrop that morphs through email and a six digit code. Passkey, email delivery and SSO are simulated.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `fullScreen` | `boolean` | `false` | Fill the viewport (100dvh, no frame) when the block is the whole page. |
| `onSignIn` | `(email: string, method: LoginMethod, mode: "sign-in" \| "sign-up") => void` | – | Called once the simulated sign in or sign up succeeds. LoginMethod is "Passkey" \| "Email code" \| "Google" \| "Apple" \| "GitHub". |
| `demoCode` | `string` | `"482913"` | The code the simulated email contains. |
| `demoEmail` | `string` | `"maya@northwind.studio"` | The account a simulated passkey or single sign-on resolves to. |
| `termsHref` | `string` | `"#terms"` | Terms link in the footer. |
| `privacyHref` | `string` | `"#privacy"` | Privacy link in the footer. |
| `className` | `string` | – | Appended to the root element. |

### Accessibility

- The email field uses autoComplete="email" and the code step uses the OTP input group.
- Busy buttons use aria-busy and aria-disabled so focus stays put during simulated requests.
- A polite role="status" region announces step changes and errors.

### Motion

- Steps slide and blur between passkey, email, code and done while the card height follows; the resend label rolls.
- Reduced motion swaps slides for fades and shows the passkey check without drawing its stroke.

### Responsive behavior

- Below a 520px container the stage and card padding shrink, and below 400px the SSO buttons tighten to small text.
- Pass fullScreen to fill 100dvh; without it the block sits in a framed card.
- The ring backdrop drifts with the pointer only while it moves over the screen, and stays still on touch and under reduced motion.

### Performance

- The backdrop is a light SVG ring set moved by CSS variables from motion values, with no re-render per pointer move.
- Only the active step is mounted; the card height animates as steps change.

### Notes for AI

- Use as a full screen sign in page (pass fullScreen) when passkeys are the primary method.
- Connect the passkey button to WebAuthn, the email step to your code sender, the code step to verification and SSO buttons to OAuth routes; demoCode and demoEmail exist only for the simulation.
- onSignIn receives the email, method and mode; redirect from there.
- Composes Xzero Button, Input and OTP input.

### Related

- [Login and sign up: Email code](https://ui.xzero.co.uk/components/blocks/sign-in/markdown): A sign in card that morphs from email to a six digit code to your account.
- [Login and sign up: Split](https://ui.xzero.co.uk/components/blocks/sign-in/markdown): A full screen split login: an email-first form that morphs into a password step beside a photo.
- [Login and sign up: Immersive](https://ui.xzero.co.uk/components/blocks/sign-in/markdown): A glass magic link card over dusk photography that folds its envelope shut once sent.
- [Login and sign up: Sign up](https://ui.xzero.co.uk/components/blocks/sign-in/markdown): An account creation flow with field validation, password strength, and a clear completion state.
- [OTP input](https://ui.xzero.co.uk/components/blocks/otp-input/markdown): A six digit verification flow with paste support and keyboard navigation.