Copy page

Components

AuthMethodsPromptDialog

src/lib/components/auth/AuthMethodsPromptDialog.svelte

Purpose

A unified persistent dialog that prompts users who lack a passkey and/or an MFA factor to enroll one right after login. It auto-opens when the conditions are met and runs the enrollment ceremony inline via two inner components: PasskeyEnrollmentSection and MfaEnrollmentSection.

Replaces the previous separate PasskeyPromptDialog and MfaPromptDialog components (per the root MFA/2FA plan, Surface B). Use it once, mounted in the app shell or a top-level layout.

Origin

Custom — Primebrick-written. Uses the shadcn-svelte™ Dialog + Button + Checkbox + Choicebox, @lucide/svelte icons (Fingerprint, KeyRound, ShieldCheck, Smartphone, AlertTriangle), and the WebAuthn codec helpers. Not vendored from any registry.

Usage

Mount once

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

<AuthMethodsPromptDialog />

The component takes no props. It reads userProfileStore and authConfigState and manages its own open state via an $effect.

Required passkey mode

When passkey_required is true in the auth config:

• Only the passkey method is shown (no MFA card, no method selector)
• The "don't ask again" checkbox is hidden
• The "Not now" dismiss button is hidden
• The user must enroll a passkey to proceed

Optional mode (passkey_required=false)

When passkey_required is false:

• Both passkey and MFA method cards are shown (if the user lacks them)
• The user can pick a method from the selector
• "Not now" dismiss button is visible
• "Don't show this again" checkbox is visible
• MFA is never mandatory at the dialog level — real MFA enforcement is per-route step-up (Surface C)

Behavior

• Auto-show: shouldShow is true when the profile has a uuid and:
  • passkey_required=true: user has no passkey
  • passkey_required=false: (user needs passkey OR MFA) AND not dismissed An $effect mirrors shouldShow into open.
• Persistent: showCloseButton is false, Escape is ignored, and clicking outside triggers a "bump" shake animation instead of closing.
• Method selector: when passkey_required=false, a Choicebox shows passkey and MFA cards. Selecting one reveals the corresponding enrollment section.
• Passkey enrollment inline: POST /api/v1/auth/webauthn/signup/begin → navigator.credentials.create() → POST /api/v1/auth/webauthn/signup/finish. On success the profile store is updated with has_passkey: true and the dialog closes.
• MFA enrollment inline (Option B): POST /api/v1/auth/mfa/enroll/begin → QR code displayed → user scans with OTP app → POST /api/v1/auth/mfa/enroll/finish. On success the profile store is updated with has_mfa: true and the dialog closes.
• Already enrolled: an InvalidStateError triggers a best-effort sync-passkeys call, updates the store, and closes the dialog.
• Dismiss: when "don't show this again" is checked, POST /api/v1/auth/me/dismiss-auth-method-enforcer persists the dismissal and the store is updated with auth_method_enforcer_dismissed: true. Without the checkbox, the dismiss is session-only (dialog reappears on next login).
• Notifications: all outcomes go through pushNotification.

Props

Full prop table: see API reference — authmethodspromptdialog.

This component takes no props.

Inner components

• PasskeyEnrollmentSection — src/lib/components/auth/PasskeyEnrollmentSection.svelte
• MfaEnrollmentSection — src/lib/components/auth/MfaEnrollmentSection.svelte

Next steps

• Component catalog
• UI stack
• API reference