Login page

Centered sign-in card built from Card, Input, and Button — with an optional “Continue with Google” button.

Welcome back

Enter your email and we'll send you a one-time code.

Don't have an account? Sign up

Installation

$Terminal

npx shadcn@latest add https://sdk-components.thesqd.com/r/login-page.json

Usage

Drop the block onto your sign-in route. Wire `onSubmit` to your credential flow and `onGoogle` to your OAuth handler.

TSImport

import { LoginPage } from "@/components/blocks/login-page";

TSExample

import { LoginPage } from "@/components/blocks/login-page";

export function SignInPage() {
  return (
    <LoginPage
      title="Welcome back"
      description="Sign in to your account to continue."
      googleEnabled
      forgotHref="/forgot-password"
      onGoogle={() => signInWithGoogle()}
      onSubmit={({ email, password }) => signIn(email, password)}
    />
  );
}

Composition

A single LoginPage component with prop-driven header, optional Google button, email/password form, and footer.

LoginPage                        — auth card (Card + TextField + OtpField + Button)
├── header
│   ├── logo                     — optional brand mark
│   └── SectionHeader            — size="lg" title + description
├── email step
│   ├── TextField — email     (AtSignIcon leading)
│   ├── TextField — password  (LockIcon leading, + "Forgot password?" link)
│   │                            hidden when otp
│   ├── Button    — full-width submit ("Sign in" / "Send code")
│   ├── google (googleEnabled)  — "or" divider + "Continue with Google"
│   └── footer                  — "Don't have an account? Sign up"
└── code step (otp, after submit)
    ├── OtpField  — 6-digit verification code
    ├── Button    — "Verify" (disabled until full)
    └── back link — "← Use a different email"

Email & password

Card with email + password inputs, a forgot-password link, a full-width submit button, and a sign-up footer.

Welcome back

Don't have an account? Sign up

Pass `googleEnabled` to surface a “Continue with Google” button and an `or` divider below the email form.

Welcome back

Don't have an account? Sign up

One-time code

Pass `otp` for a passwordless flow — submit the email to request a code, then verify it in the OTP field on the next step.

Welcome back

Enter your email and we'll send you a one-time code.

Don't have an account? Sign up

One-time code + Google

Combine `otp` and `googleEnabled` for a fully passwordless card — email code plus a Google button.

Welcome back

Enter your email and we'll send you a one-time code.

Don't have an account? Sign up

API Reference

Props for the LoginPage block.

LoginPage

Prop	Type	Default	Description
`logo`	React.ReactNode	—	Brand mark rendered above the heading.
`title`	React.ReactNode	"Welcome back"	Heading above the form.
`description`	React.ReactNode	"Sign in to your account to continue."	Supporting copy under the heading.
`emailLabel`	React.ReactNode	"Email"	Email field label.
`emailPlaceholder`	string	"you@example.com"	Email field placeholder.
`passwordLabel`	React.ReactNode	"Password"	Password field label.
`passwordPlaceholder`	string	"••••••••"	Password field placeholder.
`submitLabel`	React.ReactNode	—	Email-step submit copy. Defaults to "Sign in", or "Send code" when `otp` is set.
`otp`	boolean	false	Passwordless one-time-code mode — hides the password field, then shows an OTP field on the verify step.
`otpLength`	number	6	Number of OTP slots on the verify step.
`onRequestCode`	(email: string) => void \| Promise<void \| { error?: string }>	—	Called when the email is submitted in `otp` mode — send the code here. Return `{ error }` to keep the user on the email step (e.g. pre-flight rejection); returning nothing advances to the code-entry step.
`onVerifyCode`	(values: { email: string; code: string }) => void	—	Called when the code is submitted (or auto-completes) on the verify step.
`forgotHref`	string	—	Forgot-password link href. Omit to hide the link.
`googleEnabled`	boolean	false	Show the "Continue with Google" button and the divider.
`googleLabel`	React.ReactNode	"Continue with Google"	Google button copy.
`dividerLabel`	React.ReactNode	"or"	Divider text between the social button and the email form.
`footerText`	React.ReactNode	"Don't have an account?"	Footer prompt before the sign-up link.
`footerLinkText`	React.ReactNode	"Sign up"	Footer link label.
`footerHref`	string	"#"	Footer link href.
`onSubmit`	(values: { email: string; password: string }) => void	—	Called on form submit with the entered credentials.
`onGoogle`	() => void	—	Called when the Google button is pressed.
`error`	React.ReactNode	—	Error message rendered in a red banner under the heading. Pass the auth context's `error` here so an unauthorized sign-in is surfaced inline.
`className`	string	—	Extra classes merged onto the Card.