Login Seiten und Registrierung

Details

Was Anmeldung mitbringt, aus Registry und Quellcode gelesen.

Bereich

App

Variants

9

Version

1.0.1 · seit 1.0.0

Datei

components/ui/auth.tsx

Bringt mit

utilskitbuttonicon

npm-Pakete

Keine

Sprachen

Englisch und Deutsch, 99 eigene Texte

Studio

Im Code anpassen

Mit KI bauen

Per MCP in Claude, Cursor, Copilot und Codex

Props

Die Schnittstelle AuthProps aus components/ui/auth.tsx. Beschreibungen stammen aus den Kommentaren im Code und sind auf Englisch.

• variantoptional
  AuthVariant

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

• brandPflicht
  { 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.

Eingebaute Texte

Diese Texte schreibt Anmeldung selbst. Die Sprache folgt dem KitProvider, über die Prop labels ersetzt du einzelne.