OtpStep

The two-step sign-in screen: code, Verify, resend with a countdown, and another method.

SourcePackage @weft-js/warp

Preview

tsx

import { state } from '@weft-js/core'import { OtpStep } from '@weft-js/warp'export function Authenticator() {  const pending = state(false)  const error = state<unknown>(undefined)  const status = state<'idle' | 'success'>('idle')  const submit = async ({ code }: { code: string }) => {    pending.value = true    await wait(700)    pending.value = false    error.value = code === '123456' ? undefined : { code: 'WRONG_CODE', data: { attemptsLeft: 2 } }    if (code === '123456') status.value = 'success'  }  return <OtpStep heading="h3" title="Enter your code" lede="Open your authenticator app. The sample code is 123456." status={status.value} pending={pending.value} error={error.value} onSubmit={v => void submit(v)} onResend={() => {}} onOtherMethod={() => {}} onBack={() => (status.value = 'idle')} />}const wait = (ms: number) => new Promise(done => { setTimeout(done, ms) })

Installation

npm install @weft-js/warp

Usage

tsx

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

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`	—	Where the code went.
`length`	`number`	—	How many digits.
`status`	`"idle" \| "checking" \| "success"`	—	Overrides the field's status.
`hint`	`unknown`	—	Help under the field.
`resendIn`	`number`	—	Seconds before Resend opens.
`otherMethodLabel`	`unknown`	—	Its words.
`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
`onResend`	`(() => void)`	—	Shows Resend.
`onOtherMethod`	`(() => void)`	—	Shows "Use another method".
`onBack`	`(() => void)`	—	Shows Back.
`onSubmit`	`((values: OtpValues, 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="otp-step"] [data-part="lede"]

lederow

RelatedOtp field Sign in