build69
build69  /  Components  /  Auth  /  Login

Login

v1.0.29Updated 19 Oct 2026

Sign-in page with email/password, SSO buttons and "forgot password" link. Full-page copy-paste template; baked-in demo content (edit the JSX to customise).

View source← Back to catalog

Preview

Live · 16 stories
CenteredOpen ↗
▸Why this is recommendedloginsign-inauthauthentication+2

Login centred on the page.

Recommended for+14
  • ✓Auth flows
  • ✓App entry pages
  • ✓Public sign-in
  • ✓Internal / enterprise sign-in with no SSO or self-registration
  • ✓An internal or HR app where staff sign in with their Microsoft 365 / Entra ID work account
Tags+6
loginsign-inauthauthenticationpagecentered
Features+4
  • i18n: a labels prop overrides every built-in string; English defaults, brand-free copy
  • Centered, split-image, full-gradient and minimal layouts
  • Email + password + remember-me, plus the social sign-in row: OAuth provider buttons carrying each brand logo (sign in with Google, Apple, Microsoft, GitHub, X, Facebook, Discord, GitLab) — the social LOGIN row, as distinct from the footer social media links
  • Optional SSO / sign-up / forgot-password via props (providers, showSignUp, showForgotPassword)
  • Microsoft 365 / Entra ID sign-in via providers={["microsoft", …]}
  • Self-contained — no required props
Not recommended for−2
  • ✕In-app modals (use a Dialog)

Install

Ask your agent, or call the MCP tool directly. The resolved bundle is written into your project.

get_registry_item({ name: "Login" })

Usage

import { LoginCentered } from '@/components/pages/login';

<LoginCentered />

Tick variants in the left menu — each adds a tab with that variant’s real story source, the same code the preview above renders.

Props

PropTypeRequired
className

Optional wrapper class override

string—
providers

OAuth providers shown in the 'continue with' row; pass [] to hide SSO entirely. Supported keys: google, apple, github, microsoft, x, facebook, discord, gitlab. Default ['google','apple','github'] (unchanged). 'microsoft' is Microsoft 365 / Entra ID, for tenants that sign in with a work account. (LoginMagicLink / LoginWithSSO also honour it; the layout-only variants without an SSO row ignore it.)

SocialKey[]—
showSignUp

Show the sign-up / create-account footer link. Default true; set false for no self-registration.

boolean—
showForgotPassword

Show the forgot-password link beside the password field. Default true; set false for no self-service reset.

boolean—
labels

Override every built-in string and aria-label (i18n). Merged over DEFAULT_LOGIN_LABELS (62 English keys); every template in the file accepts it. The rendered DEFAULTS are English — page templates used to hardcode their copy, which no consumer could translate or ship. MCP feedback fb_ba2ec12f.

Partial<LoginLabels>—

Related

Platform docsAll componentsSource files