SignIn

A compact sign in card that morphs from an email field to a six digit code to a signed-in confirmation, with passkey and single sign-on shortcuts.

When to use

• Passwordless sign in by emailed code, in a modal or a narrow column of a page.
• When you want typo help on the email domain ("Did you mean gmail.com?") and a resend countdown built in.
• Not for a full-page, passkey-first screen: use LoginCentered.
• Not for creating accounts: use SignupForm.

Usage

import { SignIn } from "@/components/iris/blocks/sign-in/sign-in";

h(SignIn, {
  demoCode: "123456",
  onSignIn: (account, method) => console.log(account.email, method), // method: "Email code" | "Passkey" | "Google" | "Apple" | "GitHub"
});

Props

Prop	Type	Default	Description
demoCode	string	"123456"	The code the simulated email contains; entering anything else shows an error.
onSignIn	(account: { name, email, photo? }, method: "Email code" | "Passkey" | "Google" | "Apple" | "GitHub") => void	none	Called once the simulated sign in succeeds.

Notes

• This block is a self-contained simulation: sending the email, verifying the code, passkeys and providers are all faked with timers. To connect a real backend, fork the block and replace the timers with your calls.
• Steps: email (validated on submit, with a domain typo suggestion), code (OtpInput, 30 second resend countdown), done (avatar and account). Focus moves to the field or heading of each step and status is announced politely.
• Hard-coded content: the sample product is CapyDB, so the heading reads "Sign in to CapyDB" with no prop to change it; fork the block to name your product. The provider row always shows Google, Apple and GitHub with their official marks. Addresses that start with a sample teammate's first name (stelios@, katerina@…) resolve to that full name; anyone else gets a name from the address. Avatars show initials.
• Motion: steps slide and blur across, the avatar morphs between steps. Reduced motion keeps only fades.