Koala UI

Authentication

Pro

The sign-in and sign-up pair, shipped as two ready blocks: social providers, an email and password core, and the cross-link to its sibling. Sign-up adds a name field and a live password-strength meter.

Welcome back

Sign in to your account to continue.

Forgot password?

Don't have an account? Sign up

Installation#

# One-time setup (tokens + lib helpers)npx koalaui-cli@latest init# Activate your Pro license (once per machine)npx koalaui-cli@latest login <key># Add this component (its dependencies come along)npx koalaui-cli@latest add auth-form

Usage#

This example is part of Koala UI Pro

The preview is yours to explore. Its code comes with a Pro license, paid once and used in every project.

Get the code

Have a license? Unlock it here

Sign up#

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

Create your account

Start your free trial. No credit card required.

Use 8+ characters with a mix of letters, numbers & symbols.

Already have an account? Sign in

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.

Sign in to Koala

Use a provider or get a magic link by email.

By continuing, you agree to our Terms and Privacy Policy.

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.

Want to join Eleven?

Sign in with Discord to request your whitelist and start your story.

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.

Hola de nuevo

Entra en tu cuenta para seguir.

¿La has olvidado?

¿No tienes cuenta? Crea una

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#

LoginForm

The sign-in block: provider row, email, password, "Remember me" and a forgot-password link. Forwards native <div> props (except title and onSubmit) and accepts className, merged last, like the other two blocks.

PropTypeDefaultDescription
titleReact.ReactNode"Welcome back"The heading of the block.
descriptionReact.ReactNode"Sign in to your account to continue."The line under the heading.
onSubmit(data: LoginFormData) => void | Promise<void>-Called with { email, password, remember }. Return a promise and the submit button shows a spinner until it settles.
onProvider(provider: "google" | "github" | "apple" | "discord") => void-Called with the provider id when a provider button is pressed.
showSocialbooleantrueShows the provider row and the divider above the email form.
providers("google" | "github" | "apple" | "discord")[]["google", "github", "apple"]The provider row, left to right.
forgotHrefstring"#"Target of the "Forgot password?" link.
signUpHrefstring"#"Target of the "Sign up" cross-link.
variant"card" | "bare""card"card is the standalone ring-edged block; bare drops the edge, shadow, max-width and padding to sit in a page shell.
density"comfortable" | "compact""compact"Outer gap, title size and card padding (16px or 24px). Falls back to the nearest DensityProvider.
labelsPartial<AuthFormLabels>-The strings of the block, for a translation. Pass only the keys you change; provider phrases take a {provider} placeholder.

SignUpForm

The sign-up block: adds a full-name field, a live password-strength meter and a terms checkbox that gates the submit button.

PropTypeDefaultDescription
titleReact.ReactNode"Create your account"The heading of the block.
descriptionReact.ReactNode"Start your free trial. No credit card required."The line under the heading.
onSubmit(data: SignUpFormData) => void | Promise<void>-Called with { name, email, password, acceptedTerms }. Return a promise to drive the spinner.
onProvider(provider: "google" | "github" | "apple" | "discord") => void-Called with the provider id when a provider button is pressed.
showSocialbooleantrueShows the provider row and the divider above the email form.
providers("google" | "github" | "apple" | "discord")[]["google", "github", "apple"]The provider row, left to right.
signInHrefstring"#"Target of the "Sign in" cross-link.
termsHrefstring"#"Target of the Terms link in the consent sentence.
privacyHrefstring"#"Target of the Privacy Policy link in the consent sentence.
termsLabelReact.ReactNode-Replaces the consent sentence whole, for a translation that moves words around the links.
variant"card" | "bare""card"card is the standalone ring-edged block; bare drops the edge, shadow, max-width and padding to sit in a page shell.
density"comfortable" | "compact""compact"Outer gap, title size and card padding (16px or 24px). Falls back to the nearest DensityProvider.
labelsPartial<AuthFormLabels>-The strings of the block, for a translation. Pass only the keys you change; provider phrases take a {provider} placeholder.

ProviderForm

The password-less, provider-first block: a stack of full-width "Continue with" buttons, with an optional magic-link email, footer and social rail.

PropTypeDefaultDescription
titleReact.ReactNode"Welcome"The heading of the block.
descriptionReact.ReactNode"Sign in or create your account to continue."The line under the heading.
providers("google" | "github" | "apple" | "discord")[]["google", "github", "apple"]The provider buttons, top to bottom.
onProvider(provider: "google" | "github" | "apple" | "discord") => void-Called with the provider id when a provider button is pressed.
emphasizeFirstbooleanfalseRenders the first provider as the solid primary button, for a single dominant choice.
action"continue" | "sign-in""continue"The verb on each button: "Continue with Google" or "Sign in with Google".
requireTermsbooleanfalseGates every action behind a consent checkbox the user must tick first.
termsLabelReact.ReactNode-The consent copy: the checkbox label with requireTerms, otherwise a static line under the buttons (null hides it).
termsHrefstring"#"Target of the Terms link in the default consent copy.
privacyHrefstring"#"Target of the Privacy Policy link in the default consent copy.
showEmailbooleanfalseAdds a magic-link email field under a divider.
emailActionReact.ReactNode"Continue with email"The label of the email submit button.
onSubmit(email: string) => void | Promise<void>-Called with the email. Return a promise to drive the spinner.
footerReact.ReactNode-A cross-link line under the actions, e.g. "Don't have an account? Sign up".
social{ network: SocialNetwork; href: string; label?: string }[]-A community link rail at the very bottom. network is "x", "discord", "youtube", "instagram", "github" or "linkedin".
variant"card" | "bare""card"card is the standalone ring-edged block; bare drops the edge, shadow, max-width and padding to sit in a page shell.
density"comfortable" | "compact""compact"Outer gap, title size and card padding (16px or 24px). Falls back to the nearest DensityProvider.
labelsPartial<AuthFormLabels>-The strings of the block, for a translation. Pass only the keys you change; provider phrases take a {provider} placeholder.

FAQ#

LoginForm is the sign-in block with email, password, a "Remember me" checkbox, and a forgot-password link. SignUpForm adds a full-name field and a live password-strength meter, and gates its submit button on the terms checkbox via `acceptedTerms`.