Copy page

Components

LoginForm

src/lib/components/auth/LoginForm.svelte

Purpose

A self-contained login form that posts credentials to /api/v1/auth/login and reacts to the backend auth config. The username/password fields are always rendered (form auth is an invariant); when enable_webauthn is on (and the browser supports WebAuthn) it renders a PasskeyButton below the form. Use it on the login page and inside the SessionExpiredDialog.

Origin

Custom — Primebrick-written. Built on sveltekit-superforms + Zod, the shadcn-svelte™ form/input/button/alert primitives, and the custom Password input. Not vendored from any registry.

Usage

Default (login page)

Code
<script>
  import LoginForm from '$lib/components/auth/LoginForm.svelte';

  function onsuccess(data) {
    // data: { success: boolean; user: any } — redirect to the app
    goto('/');
  }
</script>

<LoginForm {onsuccess} />

With error callback

Code
<LoginForm
  onsuccess={() => goto('/')}
  onerror={() => console.warn('login failed')}
/>

Inside the session-expired dialog

Code
<LoginForm
  onsuccess={handleLoginSuccess}
  onerror={handleLoginError}
/>

The parent decides what to do on success — the login page redirects, while the session-expired dialog drains and retries pending requests.

Behavior

• Auth-config driven: reads authConfigState (enable_webauthn). The password form is always rendered (form auth is an invariant); the passkey button only renders when WebAuthn is enabled and the browser supports it.
• Validation: Zod schema requires non-empty username and password; field-level errors are mapped from RFC7807 issues.
• Error display: a destructive Alert shows the translated message set via setMessage (e.g. invalid credentials, account locked with {minutes} interpolation).
• User store: on success, userProfileStore.set(data.user) is called before onsuccess.

Props

Full prop table: see API reference — loginform.

Key props:

• onsuccess?: (data: { success: boolean; user: any }) => void — called after a successful login.
• onerror?: () => void — called when login fails (bad credentials, network error, etc.).

Next steps

• Component catalog
• UI stack
• API reference