ReauthDialog

Asks for the password again before something sensitive.

SourcePackage @weft-js/warp

Preview

tsx

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

Installation

npm install @weft-js/warp

Usage

tsx

import { ReauthDialog } 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
`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