Blocks
Code Authentication
SMS/email one-time-code verification with auto-submit, resend countdown and error shake.
Preview and props
Expand Props below the centered preview to change the component’s properties.
Examples
Switch channels, code length and resend behavior, then enter a code to try verification.
Enter verification code
We sent a 6-digit code to your email y•••@example.com.
Enter 111111 to pass verification.
Example controls
Usage
import {
CodeAuthBlock,
useAuthFlow,
useAuthFlowActions,
} from "@exegia/corpora-ui"
<CodeAuthBlock channel="sms" destination="•••-1234" onVerify={verifyCode} />
// From the shared auth flow: after beginVerification({ identifier, channel })
// the flow exposes the identifier already masked (y•••@example.com, •••4567).
const flow = useAuthFlow()
const { complete } = useAuthFlowActions()
{
flow.step === "verify-code" && (
<CodeAuthBlock
channel={flow.channel}
destination={flow.maskedIdentifier ?? undefined}
onVerify={async (code) => complete(await api.verify(code))}
/>
)
}API notes
| Prop | Type | Default | Description |
|---|---|---|---|
| logo | React.ReactNode | — | Brand mark rendered above the title. Omitted leaves no logo row at all. |
| accent | "corpora" | "exegia" | — | Brand accent for the primary action — corpora is a solid #E8B124, exegia a purple gradient. Omit to keep the default primary. |
| channel | "email" | "sms" | "email" | Where the code was sent; drives copy and icon. |
| length | number | 6 | Code length. |
| autoSubmit | boolean | true | Verify as soon as all digits are entered. |
| resendSeconds | number | 30 | Countdown before resend becomes available. |
| onVerify | (code) => Promise<void> | — | Reject to shake, clear the code and show the error. |
Last updated on