Authentication

Installation#

# One-time setup (tokens + lib helpers)
npx koalaui-cli@latest init

# Add this component (its dependencies come along)
npx koalaui-cli@latest add auth-form

Usage#

"use client"

import { LoginForm, type AuthProvider, type LoginFormData } from "@/components/ui/auth-form"

export function Example() {
  async function signIn({ email, password, remember }: LoginFormData) {
    await fetch("/api/sign-in", {
      method: "POST",
      body: JSON.stringify({ email, password, remember }),
    })
  }

  function continueWith(provider: AuthProvider) {
    window.location.assign("/api/oauth/" + provider)
  }

  return <LoginForm onSubmit={signIn} onProvider={continueWith} />
}

Sign up#

SignUpForm adds a full-name field and a password-strength meter, and gates the submit on the terms checkbox.

Provider-first#

ProviderForm drops the password core for a stack of full-width Continue with… buttons: the password-less OAuth pattern. Add showEmail for a magic-link fallback below the providers.

Single provider · consent gate

Pass one provider with emphasizeFirst for a single dominant button, and requireTerms to gate it behind a consent checkbox. A social rail links out to the community: the OAuth-only screen used by game servers and Discord-native products.

Localization#

Every word the three blocks print reads from one labels dictionary, so a translation is written once and handed to all of them. Pass only the keys you change; the rest keep their English defaults. In the two provider phrases, {provider} is replaced with the provider's name wherever your language puts it. The consent sentences carry links whose words move in a translation, so they are whole nodes instead: termsLabel on SignUpForm and ProviderForm. providers picks the social row on LoginForm and SignUpForm too, and the row takes one track per provider.

Full-page screens#

Composed into complete pages, these blocks become the Authentication section family: seven finished sign-in and sign-up screens (split and centered, plus the community Discord screens), each with a full-screen, resizable device-frame preview. For a split screen, drop variant="bare" on the form and place it in a SplitLayout pane so the shell owns the surface; for a centered page, keep the default bordered card on a soft backdrop.

API reference#

FAQ#