Login pages and sign up screens

Details

What Authentication brings along, read from the registry and the source.

Area

App

Variants

9

Version

1.0.1 · since 1.0.0

File

components/ui/auth.tsx

Brings along

utilskitbuttonicon

npm packages

None

Languages

English and German, 99 texts of its own

Studio

Adjust in code

Build with AI

Over MCP in Claude, Cursor, Copilot and Codex

Props

The AuthProps interface from components/ui/auth.tsx, with the comments from the code.

• variantoptional
  AuthVariant

  sign-insplitsign-upforgot-passwordone-time-codemagic-linktwo-factoronboarding-stepsinvite-accept

• brandrequired
  { name: string; href?: string; logo?: React.ReactNode }
• titleoptional
  React.ReactNode
• descriptionoptional
  React.ReactNode
• providersoptional
  AuthProvider[]

  Passkey, single sign-on and similar, shown above the form

• signUpHrefoptional
  string

  Links around the form

• signInHrefoptional
  string
• forgotHrefoptional
  string
• termsHrefoptional
  string
• privacyHrefoptional
  string
• mediaoptional
  React.ReactNode

  split: picture and quote on the side

• quoteoptional
  { text: string; author: string; role?: string }
• benefitsoptional
  string[]

  sign-up: reasons next to the form

• emailoptional
  string

  one-time-code, magic-link: the address the code or link was sent to

• twoFactoroptional
  { qr: React.ReactNode; secret: string; backupCodes?: string[] }

  two-factor: the code picture and the secret for manual entry

• onboardingoptional
  { domain: string; useCases: { id: string; label: string; description: string; icon: IconName }[] }

  onboarding-steps: the domain suffix and the use cases to choose from

• inviteoptional
  { inviter: { name: string; email: string }; workspace: { name: string; logo?: React.ReactNode; members: string[]; total: number }; role: string; email: string }

  invite-accept

• onSubmitoptional
  (values: Record<string, string>) => void | string | Promise<void | string>

  Called with the form values. Return a string to show it as an error. Without it the block simulates a short request, so demos feel real.

Built-in texts

Authentication writes these texts itself. The language follows the KitProvider, the labels prop replaces single ones.