LoginCentered

A full-page, passkey-first login screen: a centered card on a quiet ring backdrop that morphs through email, a six digit code and a welcome step, with a sign in / sign up switch in the top bar.

When to use

• The dedicated login page of an app, where the screen holds nothing but the login.
• When passkeys are the primary method and email codes and single sign-on are fallbacks.
• Not inside a modal or a side column: use SignIn, which is a compact card.
• Not for collecting a name and password at sign up: use SignupForm.

Usage

import { LoginCentered } from "@/components/iris/blocks/login-centered/login-centered";

h(LoginCentered, {
  demoEmail: "katerina@studio.example",
  demoCode: "482913",
  termsHref: "/terms",
  privacyHref: "/privacy",
  onSignIn: (email, method, mode) => console.log(email, method, mode), // mode: "sign-in" | "sign-up"
});

Props

Prop	Type	Default	Description
demoCode	string	"482913"	The code the simulated email contains.
fullScreen	boolean	false	Fill the viewport (100dvh, no frame) when the block is the whole page. Otherwise it is a framed 640 px tall screen that fills its container's width.
demoEmail	string	"katerina@studio.example"	The account a simulated passkey or single sign-on resolves to.
termsHref	string	"#terms"	Link for Terms in the bottom bar.
privacyHref	string	"#privacy"	Link for Privacy in the bottom bar.
onSignIn	(email: string, method: "Passkey" | "Email code" | "Google" | "Apple" | "GitHub", mode: "sign-in" | "sign-up") => void	none	Called once the simulated sign in or sign up succeeds.
className	string	none	Extra class on the screen.

Notes

• The whole flow is simulated (passkey prompt, email, code check, providers); fork the block to call your auth backend.
• Steps: passkey, email, code (with resend countdown), done. The top bar switch flips between sign in and sign up wording without leaving the page. Focus moves to each step's field or heading.
• Hard-coded copy, no prop to override: the sample product is Polaris with the workspace Launch desk. The top bar shows the word "Polaris" in plain type (no icon), the passkey heading reads "Sign in to Polaris" and the sign-up done heading reads "Welcome to Polaris". Fork the block to put your product name there. The provider row always shows the official Google, Apple and GitHub marks; there is no prop to change or hide them.
• Focus moves to the code field when the code step opens. Status changes are announced through a polite live region.
• Under reduced motion the ring backdrop stays still and steps cross-fade only.