Authentication Blocks

Beautiful, accessible authentication forms and flows. Every block below is sourced from the canonical schema catalog (@object-ui/example-schema-catalog), which is smoke-tested on every CI run — if a schema breaks, the build fails.

Copy the JSON from the Code tab and drop it into your application.

Login Form

A clean login form with email and password fields, "remember me", and a social-provider button.

Sign Up Form

Two-column registration form with terms acceptance.

Forgot Password

Request a password reset link by email.

Two-Factor Authentication

Six-digit code verification with a resend link.

Customizing

All authentication blocks are plain JSON — tweak any node to change the look or behaviour. Common customisations:

Change Colors

{
  "type": "button",
  "className": "bg-blue-600 hover:bg-blue-700"
}

Wire Up Submission

A control that runs something is its own node type, action:button, and its props go in the properties bag; actionType: "api" sends the request to target:

{
  "type": "action:button",
  "properties": {
    "label": "Sign In",
    "actionType": "api",
    "target": "/api/auth/login",
    "method": "POST"
  }
}

Adjust Layout

{
  "type": "card",
  "className": "max-w-lg p-8"
}

Next Steps

• Browse Dashboard Blocks
• Explore Form Blocks
• Learn about Actions