Auth flow
Orchestrator over the auth blocks: renders the right block for the flow's current step (login, signup, verify-code, forgot-password, update-password, onboarding, success) with the store wiring built in — the switchboard every host app was hand-rolling around `useAuthFlow`.
Preview and props
Expand Props below the centered preview to change the component’s properties.
Examples
Follow the connected authentication steps. Enter 111111 to pass the simulated verification.
step login · session unknown
Enter 111111 to pass verification.
Example controls
Usage
import { AuthFlowBlock } from "@exegia/corpora-ui"
<AuthFlowBlock
onLogin={async ({ email, password }) => {
const outcome = await api.signIn(email, password)
return outcome.mfa
? { verify: { identifier: email } }
: { user: outcome.user }
}}
onVerifyCode={async (code) => ({ user: await api.verify(code) })}
onRequestReset={({ email }) => api.sendResetLink(email)}
/>
// The flow lives in the store — drive or observe it from anywhere:
// useAuthFlowActions().goToStep("signup")
// useAuthSession().userAPI notes
| Prop | Type | Default | Description |
|---|---|---|---|
| flowId | string | "default" | Which flow instance to orchestrate. A re-auth modal passes its own id and coexists with the main flow; useAuthFlowActions(flowId) drives the same instance from anywhere. |
| onLogin / onSignup / onVerifyCode / onRequestReset / onUpdatePassword / onProviderSelect / onOnboardingComplete / onResendCode | (data) => TAuthFlowDirective | Promise<TAuthFlowDirective> | — | The API boundary, one handler per step submit. Resolve with a directive to move the flow: { user } completes it AND signs the session in (one atomic write), { verify: { identifier } } records the destination and moves to the code step, { step } navigates, and void stays put (the block shows its own success). Reject to render the block's own error state — the orchestrator never mirrors transients into the store. |
| logo / accent / providers | ReactNode / TAuthAccent / TSocialProvider[] | — | Branding handed to every step's card; providers feeds the login and signup steps. |
| steps / renderStep / success | IAuthFlowStepOverrides / (step, flow) => ReactNode | undefined / ReactNode | — | Escape hatches, in escalating order: steps merges prop overrides over the wiring of one block ({ login: { onSignup: undefined } } unhooks a default navigation link), renderStep replaces a whole step's UI (return undefined to keep the default), and success swaps the built-in completion card (successTitle / successDescription retitle it instead). Navigation between steps (login ↔ signup, forgot password, back from verification) is pre-wired to goToStep. |
Last updated on
Onboarding
Multi-step profile onboarding driven by a declared steps config: progress-tracked forms with back/forward navigation, per-step validation, draft restore and a single completion signal.
Profile card
Account card that opens an action menu: the trigger is a rich identity chip (avatar over name and handle), the popup a grouped menu ending in a destructive sign-out.