ReauthDialog

Asks for the password again before something sensitive.

SourcePackage @kerf-js/veneer

Preview

tsx

import { state } from '@kerf-js/core'import { Button, ReauthDialog } from '@kerf-js/veneer'export function Delete() {  const open = state(false)  const error = state('')  const confirm = (password: string) => {    error.value =      password === 'sample-password' ? '' : passwordError    open.value = !!error.value  }  const requestDelete = () => {    error.value = ''    open.value = true  }  return (    <>      <Button        tone="critical"        emphasis="soft"        onClick={requestDelete}      >        Delete reports      </Button>      <ReauthDialog        open={open}        reason="Deleting a project needs your password."        error={error.value || undefined}        onConfirm={confirm}        onPasskey={() => {          open.value = false        }}      />    </>  )}const passwordError =  'That password does not match. Try ' +  'sample-password.'

Installation

npm install @kerf-js/veneer

Usage

tsx

import { ReauthDialog } 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
`open`	`State<boolean>`	—	Whether it shows. You own this state.
`reason`	`unknown`	—	Why it asks.
`heading`	`Heading`	—	The title's level.
`error`	`unknown`	—	The failure.
`errors`	`Record<string, string>`	—	Messages by field name.
`errorOptions`	`FlowErrorOptions`	—	Words by error code.
`pending`	`boolean`	`false`	Shows progress.

Event	Type	Default	Description
`onConfirm`	`((password: string) => void)`	—	Called with the password. Close `open` once it is accepted.
`onPasskey`	`(() => unknown)`	—	Shows "Use a passkey".
`onRetry`	`(() => void)`	—	The Retry on a network failure's toast.

RelatedApi keys Type to confirm