Logobaseui-cn

Login

Card-based login with Base UI Form validation, alert errors, toast success states, and overlay-ready behavior.

components/ui/auth.tsxexportLoginBlock
blockformauth
Loading preview...

Installation

Run the following command to add the component to your project:

npx baseui-cn add login

Running the install command above adds components/ui/auth.tsx and exports LoginBlock. Because the block uses success toasts, make sure your app is wrapped once in ToastProvider, as shown in the toast docs.

Usage

import { LoginBlock } from "@/components/ui/auth"

<LoginBlock
  onGoogleLogin={() => {}}
  onGithubLogin={() => {}}
  onSubmit={async ({ email, password }) => {
    const isValidDemo = email === "demo@baseui-cn.com" && password === "BaseUI123!"

    if (!isValidDemo) {
      return {
        status: "error",
        message: "Invalid credentials",
        fieldErrors: {
          email: "Try demo@baseui-cn.com",
          password: "Try BaseUI123!",
        },
      }
    }

    return {
      status: "success",
      message: "Logged in successfully",
    }
  }}
/>

Error State

Loading preview...

Use the returned AuthSubmitResult to map server failures into Base UI form errors and a form-level alert without pulling in another form library.

In A Dialog

Loading preview...

This is one of the main baseui-cn advantages: the same auth block works inside layered overlays without swapping form or feedback primitives.

Props

PropTypeDefaultDescription
onSubmit
(values: LoginValues) => Promise<AuthSubmitResult<LoginFieldName> | void> | AuthSubmitResult<LoginFieldName> | void—

Optional submit handler. Without it, the block runs a built-in async demo success flow.

variant
'default' | 'bordered' | 'elevated' | 'minimal''default'

Controls the card presentation.

size
'sm' | 'md' | 'lg''md'

Controls spacing, typography, and form control sizing.

animation
'none' | 'fade' | 'slide-up' | 'scale''fade'

Controls entry motion for the block.

showSocial
booleantrue

Shows built-in social buttons when provider callbacks are supplied.

signUpHref
string'/sign-up'

Link used in the footer prompt below the login card.

forgotPasswordHref
string'/forgot-password'

Optional recovery link shown beside the password label.

successToast
{ title?: string; description?: string; timeout?: number }—

Overrides the success toast content used after a successful submit.