ObjectUIAuthentication Blocks
Login forms, signup pages, and authentication flows
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.
Simple Login Form
Email + password sign-in with "remember me" and a social provider button.
{
"type": "card",
"className": "w-full max-w-md mx-auto",
"header": [
{
"type": "stack",
"spacing": 2,
"className": "text-center",
"children": [
{
"type": "text",
"content": "Welcome Back",
"className": "text-2xl font-bold tracking-tight"
},
{
"type": "text",
"content": "Enter your credentials to sign in",
"className": "text-sm text-muted-foreground"
}
]
}
],
"children": [
{
"type": "stack",
"spacing": 4,
"children": [
{
"type": "stack",
"spacing": 2,
"children": [
{
"type": "label",
"htmlFor": "email",
"label": "Email"
},
{
"type": "input",
"id": "email",
"name": "email",
"inputType": "email",
"placeholder": "name@example.com",
"required": true
}
]
},
{
"type": "stack",
"spacing": 2,
"children": [
{
"type": "label",
"htmlFor": "password",
"label": "Password"
},
{
"type": "input",
"id": "password",
"name": "password",
"inputType": "password",
"placeholder": "Enter your password",
"required": true
}
]
},
{
"type": "flex",
"className": "items-center justify-between",
"children": [
{
"type": "flex",
"className": "items-center space-x-2",
"children": [
{
"type": "checkbox",
"id": "remember",
"name": "remember"
},
{
"type": "label",
"htmlFor": "remember",
"label": "Remember me",
"className": "text-sm font-normal"
}
]
},
{
"type": "text",
"content": "Forgot password?",
"className": "text-sm text-primary hover:underline cursor-pointer"
}
]
},
{
"type": "button",
"label": "Sign In",
"variant": "default",
"className": "w-full"
},
{
"type": "separator",
"className": "my-2"
},
{
"type": "button",
"label": "Continue with Google",
"variant": "outline",
"className": "w-full"
}
]
},
{
"type": "div",
"className": "text-center text-sm pt-2",
"children": [
{
"type": "text",
"content": "Don't have an account? ",
"className": "text-muted-foreground"
},
{
"type": "text",
"content": "Sign up",
"className": "text-primary hover:underline cursor-pointer font-medium"
}
]
}
]
}Sign Up Form
Two-column registration form with terms acceptance.
Sign Up Form
Two-column registration form with terms acceptance.
{
"type": "card",
"className": "w-full max-w-md mx-auto",
"header": [
{
"type": "stack",
"spacing": 2,
"className": "text-center",
"children": [
{
"type": "text",
"content": "Create an Account",
"className": "text-2xl font-bold tracking-tight"
},
{
"type": "text",
"content": "Enter your information to get started",
"className": "text-sm text-muted-foreground"
}
]
}
],
"children": [
{
"type": "stack",
"spacing": 4,
"children": [
{
"type": "grid",
"cols": 2,
"gap": 4,
"children": [
{
"type": "stack",
"spacing": 2,
"children": [
{
"type": "label",
"htmlFor": "firstName",
"label": "First Name"
},
{
"type": "input",
"id": "firstName",
"name": "firstName",
"placeholder": "John",
"required": true
}
]
},
{
"type": "stack",
"spacing": 2,
"children": [
{
"type": "label",
"htmlFor": "lastName",
"label": "Last Name"
},
{
"type": "input",
"id": "lastName",
"name": "lastName",
"placeholder": "Doe",
"required": true
}
]
}
]
},
{
"type": "stack",
"spacing": 2,
"children": [
{
"type": "label",
"htmlFor": "email",
"label": "Email"
},
{
"type": "input",
"id": "email",
"name": "email",
"inputType": "email",
"placeholder": "name@example.com",
"required": true
}
]
},
{
"type": "stack",
"spacing": 2,
"children": [
{
"type": "label",
"htmlFor": "password",
"label": "Password"
},
{
"type": "input",
"id": "password",
"name": "password",
"inputType": "password",
"placeholder": "Create a strong password",
"required": true
}
]
},
{
"type": "flex",
"className": "items-start space-x-2",
"children": [
{
"type": "checkbox",
"id": "terms",
"name": "terms",
"required": true
},
{
"type": "label",
"htmlFor": "terms",
"className": "text-sm font-normal leading-none",
"label": "I agree to the Terms of Service and Privacy Policy"
}
]
},
{
"type": "button",
"label": "Create Account",
"variant": "default",
"className": "w-full"
}
]
},
{
"type": "div",
"className": "text-center text-sm pt-2",
"children": [
{
"type": "text",
"content": "Already have an account? ",
"className": "text-muted-foreground"
},
{
"type": "text",
"content": "Sign in",
"className": "text-primary hover:underline cursor-pointer font-medium"
}
]
}
]
}Forgot Password
Request a password reset link by email.
Forgot Password
Request a password reset email.
{
"type": "card",
"className": "w-full max-w-md mx-auto",
"header": [
{
"type": "stack",
"spacing": 2,
"className": "text-center",
"children": [
{
"type": "text",
"content": "Reset Password",
"className": "text-2xl font-bold tracking-tight"
},
{
"type": "text",
"content": "Enter your email address and we'll send you a reset link",
"className": "text-sm text-muted-foreground"
}
]
}
],
"children": [
{
"type": "stack",
"spacing": 4,
"children": [
{
"type": "stack",
"spacing": 2,
"children": [
{
"type": "label",
"htmlFor": "email",
"label": "Email"
},
{
"type": "input",
"id": "email",
"name": "email",
"inputType": "email",
"placeholder": "name@example.com",
"required": true
}
]
},
{
"type": "button",
"label": "Send Reset Link",
"variant": "default",
"className": "w-full"
},
{
"type": "button",
"label": "Back to Login",
"variant": "ghost",
"className": "w-full"
}
]
}
]
}Two-Factor Authentication
Six-digit code verification with a resend link.
Two-Factor Authentication
6-digit code verification with resend.
{
"type": "card",
"className": "w-full max-w-md mx-auto",
"header": [
{
"type": "stack",
"spacing": 2,
"className": "text-center",
"children": [
{
"type": "text",
"content": "Two-Factor Authentication",
"className": "text-2xl font-bold tracking-tight"
},
{
"type": "text",
"content": "Enter the verification code from your authenticator app",
"className": "text-sm text-muted-foreground"
}
]
}
],
"children": [
{
"type": "stack",
"spacing": 4,
"children": [
{
"type": "stack",
"spacing": 2,
"children": [
{
"type": "label",
"htmlFor": "code",
"label": "Verification Code"
},
{
"type": "input",
"id": "code",
"name": "code",
"placeholder": "000000",
"className": "text-center text-2xl tracking-widest",
"maxLength": 6,
"required": true
}
]
},
{
"type": "button",
"label": "Verify",
"variant": "default",
"className": "w-full"
},
{
"type": "div",
"className": "text-center",
"children": [
{
"type": "text",
"content": "Didn't receive a code? ",
"className": "text-sm text-muted-foreground"
},
{
"type": "text",
"content": "Resend",
"className": "text-sm text-primary hover:underline cursor-pointer"
}
]
}
]
}
]
}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
{
"type": "button",
"label": "Sign In",
"action": {
"type": "submit",
"endpoint": "/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