SignIn

A sign-in form with passkey, single sign-on, email and password, and Forgot.

SourcePackage @weft-js/warp

Preview

tsx

import { state } from '@weft-js/core'import { AuthDone, SignIn } from '@weft-js/warp'import type { SignInValues } from '@weft-js/warp'export function Weft() {  const pending = state(false)  const who = state('')  const submit = async (values: SignInValues) => {    pending.value = true    await wait(900)    pending.value = false    who.value = values.email  }  return (    <>      {who.value        ? <AuthDone heading="h3" title="You're in" lede={`Signed in as ${who.value}.`} delay={2400} onContinue={() => (who.value = '')} />        : <SignIn heading="h3" name="weft" title="Sign in to weft" lede="Any email and password work here." providers={PROVIDERS} pending={pending.value} onSubmit={v => void submit(v)} onProvider={() => wait(900)} onPasskey={() => wait(900)} onForgot={() => {}} onMagicLink={() => {}} onSignUp={() => {}} />}    </>  )}const wait = (ms: number) => new Promise(done => { setTimeout(done, ms) })const PROVIDERS = [{ id: 'google', label: 'Google', glyph: 'M12 3a9 9 0 1 0 8.5 12H12' }, { id: 'github', label: 'GitHub', glyph: 'M9 8l-5 4 5 4M15 8l5 4-5 4' }]

Installation

npm install @weft-js/warp

Usage

tsx

import { SignIn } from '@weft-js/warp'

Wrong details

A wrong password and an unknown email read the same.

tsx

import { SignIn } from '@weft-js/warp'export function Failed() {  return (    <SignIn heading="h3" title="Sign in to weft" error="That email and password don't match." onForgot={() => {}} />  )}

When to use

Use it for

The screen where people come back

Reach for something else

SignUp, when they are new
ReauthDialog, when they are already in and doing something sensitive

Accessibility

This has no shortcuts of its own: controls inside it use Tab, Enter and Space as usual, and warp's parts keep their roles and labels.

API Reference

Prop	Type	Default	Description
`title`	`unknown`	—	The heading.
`lede`	`unknown`	—	One line under it.
`logo`	`unknown`	—	Your logo.
`name`	`unknown`	—	Your product's name, beside the logo.
`submitLabel`	`unknown`	—	The main button's words.
`providers`	`SsoProvider[]`	—	Single sign-on providers.
`remember`	`boolean`	—	Shows the "Keep me signed in" switch.
`form`	`FormLike`	—	What `<Form of={mutation}>` gives you. The screen then renders no form of its own.
`errors`	`Record<string, string>`	—	Messages by field name.
`error`	`unknown`	—	The failure: a string, or a typed error it can map to the right place.
`errorOptions`	`FlowErrorOptions`	—	Words by error code.
`pending`	`boolean`	`false`	Shows progress on the submit button.
`heading`	`Heading`	—	The title's level. An auth step is usually the whole page, so `h1`.

Event	Type	Default	Description
`onProvider`	`((id: string) => unknown)`	—	Called with the provider's id.
`onPasskey`	`(() => unknown)`	—	Shows the passkey button; run WebAuthn here.
`onForgot`	`(() => void)`	—	Shows Forgot password.
`onMagicLink`	`((email: string) => void)`	—	Called with the typed email; asks for one first.
`onSignUp`	`(() => void)`	—	Shows the link to sign up.
`onInvite`	`(() => void)`	—	Shows the link for people with an invite.
`onSubmit`	`((values: SignInValues, e: SubmitEvent) => void)`	—	Called with the values once the screen's own checks pass.
`onRetry`	`(() => void)`	—	The Retry on a network failure's toast.

Parts

Every element carries a stable name, so you can style it from your own CSS: [data-scope="sso"] [data-part="lede"]

lededividerrowfine