OtpStep

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

SourcePackage @kerf-js/veneer

Preview

tsx

import { state } from '@kerf-js/core'import { OtpStep } from '@kerf-js/veneer'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={authenticatorLede}      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)  })const authenticatorLede =  'Open your authenticator app. The ' +  'sample code is 123456.'

Installation

npm install @kerf-js/veneer

Usage

tsx

import { OtpStep } from '@kerf-js/veneer'

Accessibility

This has no shortcuts of its own: controls inside it use Tab, Enter and Space as usual, and veneer'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