Blocks
Login
Progressive login form: a valid email reveals the password field, a non-empty password reveals the submit button. Social providers, remember-me and animated success/error states.
Preview and props
Expand Props below the centered preview to change the component’s properties.
Examples
Toggle social providers, branding and secondary actions. Submit the form to try success and error states.
Login to your account
Enter your email and password to login
Example controls
Usage
import { LoginBlock, useAuthFlow, useAuthFlowActions } from "@exegia/corpora-ui"
<LoginBlock onSubmit={async ({ email, password }) => login(email, password)} />
// Wired into the shared auth flow (needs <ExegiaProvider> at the root):
// the block keeps the password local; the flow tracks which step shows and
// what identifier is in flight, so CodeAuthBlock can pick it up masked.
const flow = useAuthFlow()
const { beginVerification, complete } = useAuthFlowActions()
{
flow.step === "login" && (
<LoginBlock
onSubmit={async ({ email, password }) => {
const result = await login(email, password)
if (result.needsCode) beginVerification({ identifier: email })
else complete(result.user) // signs the session in — see useAuthSession()
}}
/>
)
}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. |
| providers | TSocialProvider[] | ["google", "apple", "github"] | Social providers; empty array hides the section. |
| showRememberMe / showForgotPassword | boolean | true | Toggle the secondary affordances. |
| onSubmit | (data) => Promise<void> | — | Reject (or throw) to show the shaking error state with the error message. |
Last updated on