@atlasauth/svelte 0.8.0 → 0.9.0

package/dist/components/OrganizationAuditLog.svelte.d.ts

@@ -0,0 +1,31 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        /**
+           * `<OrganizationAuditLog/>` — the active organization's audit trail for its
+           * admins, next to `<OrganizationProfile/>`. Renders nothing for a member who
+           * may not read it (the server is the authority; the component just follows
+           * it). Labels are props so an app can localise them.
+           */ pageSize?: number | undefined;
+        action?: string | undefined;
+        labels?: {
+            title?: string;
+            empty?: string;
+            loadMore?: string;
+            actor?: string;
+        };
+        formatDate?: (ms: number) => string;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
+};
+export type OrganizationAuditLogProps = typeof __propDef.props;
+export type OrganizationAuditLogEvents = typeof __propDef.events;
+export type OrganizationAuditLogSlots = typeof __propDef.slots;
+export default class OrganizationAuditLog extends SvelteComponent<OrganizationAuditLogProps, OrganizationAuditLogEvents, OrganizationAuditLogSlots> {
+}
+export {};

package/dist/components/OrganizationProfile.svelte

@@ -1,22 +1,318 @@
-<script>import { useAtlas } from "../context";
-import { getOrganization } from "../accessors";
+<script>import { createEventDispatcher, onDestroy } from "svelte";
+import {
+  OrganizationProfileController,
+  localizedErrorMessage,
+  reauthenticate
+} from "@atlasauth/js";
+import { useAtlas } from "../context";
+import { getAuth, getOrganization } from "../accessors";
 import { classFor } from "../appearance";
 import { translate } from "../i18n";
-import Protect from "./Protect.svelte";
+import { FapiClient } from "../fapi";
+import { ATLAS_SVELTE_SDK } from "../version";
 const atlas = useAtlas();
 const org = getOrganization();
-const t = (key) => translate(atlas.catalog, key);
-$: cardClass = classFor("card", atlas.appearance, "atlas-card");
+const auth = getAuth();
+const dispatch = createEventDispatcher();
+const t = (key, vars) => translate(atlas.catalog, key, vars);
+const cls = (key, base) => classFor(key, atlas.appearance, base);
+const errorText = (err) => localizedErrorMessage(err, atlas.errorCatalog ?? atlas.catalog, atlas.catalog);
+const client = new FapiClient({
+  publishableKey: atlas.publishableKey,
+  baseUrl: atlas.frontendApi,
+  locale: atlas.locale,
+  sdk: ATLAS_SVELTE_SDK
+});
+let controller = null;
+let state = null;
+let unsubscribe = null;
+let currentId = null;
+let tab = "members";
+let editingRole = null;
+let roleKey = "";
+let roleName = "";
+let rolePerms = [];
+let email = "";
+let inviteRole = "org:member";
+let confirm = null;
+let needsPassword = false;
+let password = "";
+$: canManage = $auth.has({ permission: "org:sys_memberships:manage" });
+$: isAdmin = $org.membership?.role === "org:admin";
+$: roles = state && state.roles.length > 0 ? state.roles : [{ key: "org:member", name: "org:member" }];
+$: errorMessage = state?.error && !state.error.needsReverification ? errorText(state.error) : null;
+$: tabs = ["members", ...canManage ? ["invitations", "roles"] : [], "settings"];
+$: customRoles = state ? state.roles.filter((r) => Boolean(r.organization_id)) : [];
+$: {
+  const id = $org.organization?.id ?? null;
+  if (id !== currentId) {
+    currentId = id;
+    unsubscribe?.();
+    controller = null;
+    state = null;
+    if (id) {
+      controller = new OrganizationProfileController(client, id, {
+        canManage,
+        onChange: async () => {
+          await atlas.reload();
+        }
+      });
+      unsubscribe = controller.subscribe((next) => state = next);
+      state = controller.getState();
+      void controller.load();
+    }
+  }
+}
+onDestroy(() => unsubscribe?.());
+const memberName = (m) => [m.user?.first_name, m.user?.last_name].filter(Boolean).join(" ") || t("organization.unnamedMember");
+async function sendInvite() {
+  const address = email.trim();
+  if (controller && address && await controller.invite(address, inviteRole)) email = "";
+}
+async function leave() {
+  if (controller && await controller.leave()) dispatch("exit", "left");
+  confirm = null;
+}
+async function remove() {
+  if (!controller) return;
+  if (needsPassword) {
+    try {
+      await reauthenticate(
+        { strategy: "password", password },
+        { api: atlas.frontendApi, publishableKey: atlas.publishableKey, locale: atlas.locale }
+      );
+    } catch {
+      return;
+    }
+    password = "";
+    needsPassword = false;
+  }
+  if (await controller.deleteOrganization()) {
+    dispatch("exit", "deleted");
+    confirm = null;
+    return;
+  }
+  const err = controller.getState().error;
+  if (err?.needsReverification) needsPassword = true;
+}
+function resetRoleForm() {
+  editingRole = null;
+  roleKey = "";
+  roleName = "";
+  rolePerms = [];
+}
+function editRole(role) {
+  editingRole = role.id ?? null;
+  roleKey = role.key;
+  roleName = role.name;
+  rolePerms = [...role.permissions ?? []];
+}
+function togglePermission(key, on) {
+  rolePerms = on ? [...rolePerms, key] : rolePerms.filter((k) => k !== key);
+}
+async function saveRole() {
+  if (!controller) return;
+  const out = editingRole ? await controller.updateRole(editingRole, { name: roleName.trim(), permissions: rolePerms }) : await controller.createRole({ key: roleKey.trim(), name: roleName.trim(), permissions: rolePerms });
+  if (out) resetRoleForm();
+}
+function cancel() {
+  confirm = null;
+  needsPassword = false;
+  password = "";
+}
 </script>
 
-{#if $org.organization}
-  <div class={cardClass}>
+{#if $org.organization && controller && state}
+  <div class={cls('card', 'atlas-card')} data-atlas="organization-profile">
     <h1>{$org.organization.name}</h1>
     <p>{t('organization.roleLabel')}: {$org.membership?.role}</p>
-    <!-- Management controls are gated on the ACTIVE org role, matching the
-         server's §9.2 rule rather than duplicating a looser one. -->
-    <Protect permission="org:sys_memberships:manage">
-      <button>{t('organization.invite')}</button>
-    </Protect>
+
+    <div class={cls('menu', 'atlas-menu')} role="tablist">
+      {#each tabs as key}
+        <button
+          type="button"
+          role="tab"
+          aria-selected={tab === key}
+          class={cls('menuItem', 'atlas-menu-item')}
+          data-atlas={`organization-tab-${key}`}
+          on:click={() => (tab = key)}
+        >
+          {t(`organization.${key}`)}
+        </button>
+      {/each}
+    </div>
+
+    {#if errorMessage}
+      <p class={cls('formFieldError', 'atlas-error')} role="alert">{errorMessage}</p>
+    {/if}
+
+    {#if tab === 'members'}
+      <ul class={'atlas-list'} data-atlas="organization-members">
+        {#each state.members as m (m.id)}
+          <li data-atlas="organization-member">
+            <span>{memberName(m)}{m.user?.id === $auth.userId ? ` ${t('organization.you')}` : ''}</span>
+            {#if canManage && m.user && m.user.id !== $auth.userId}
+              <select
+                aria-label={t('organization.roleLabel')}
+                class={cls('formFieldInput', 'atlas-input')}
+                value={m.role}
+                disabled={state.busy === `role:${m.user.id}`}
+                on:change={(e) => m.user && controller?.changeRole(m.user.id, e.currentTarget.value)}
+              >
+                {#each roles as r}<option value={r.key}>{r.name}</option>{/each}
+              </select>
+              <button
+                type="button"
+                class={cls('formButtonSecondary', 'atlas-button-secondary')}
+                disabled={state.busy === `remove:${m.user.id}`}
+                on:click={() => m.user && controller?.removeMember(m.user.id)}
+              >
+                {t('organization.remove')}
+              </button>
+            {:else}
+              <span> · {m.role}</span>
+            {/if}
+          </li>
+        {/each}
+      </ul>
+    {/if}
+
+    {#if tab === 'invitations' && canManage}
+      <div data-atlas="organization-invitations">
+        <form on:submit|preventDefault={sendInvite}>
+          <label class={cls('formField', 'atlas-field')}>
+            <span class={cls('formFieldLabel', 'atlas-field-label')}>{t('organization.emailLabel')}</span>
+            <input type="email" class={cls('formFieldInput', 'atlas-input')} bind:value={email} />
+          </label>
+          <label class={cls('formField', 'atlas-field')}>
+            <span class={cls('formFieldLabel', 'atlas-field-label')}>{t('organization.roleLabel')}</span>
+            <select class={cls('formFieldInput', 'atlas-input')} bind:value={inviteRole}>
+              {#each roles as r}<option value={r.key}>{r.name}</option>{/each}
+            </select>
+          </label>
+          <button type="submit" class={cls('formButtonPrimary', 'atlas-button')} disabled={state.busy === 'invite' || !email.trim()}>
+            {t('organization.sendInvite')}
+          </button>
+        </form>
+        {#if state.invitations.length === 0}
+          <p class={'atlas-text'}>{t('organization.noInvitations')}</p>
+        {:else}
+          <ul class={'atlas-list'}>
+            {#each state.invitations as inv (inv.id)}
+              <li data-atlas="organization-invitation">
+                <span>{inv.email_address} · {inv.role ?? ''}</span>
+                <button type="button" class={cls('formButtonSecondary', 'atlas-button-secondary')} on:click={() => controller?.resendInvitation(inv.id)}>
+                  {t('organization.resend')}
+                </button>
+                <button type="button" class={cls('formButtonSecondary', 'atlas-button-secondary')} on:click={() => controller?.revokeInvitation(inv.id)}>
+                  {t('organization.revoke')}
+                </button>
+              </li>
+            {/each}
+          </ul>
+        {/if}
+      </div>
+    {/if}
+
+    {#if tab === 'roles' && canManage}
+      <div data-atlas="organization-roles">
+        {#if customRoles.length === 0}
+          <p class={'atlas-text'}>{t('organization.noCustomRoles')}</p>
+        {:else}
+          <ul class={'atlas-list'}>
+            {#each customRoles as role (role.id ?? role.key)}
+              <li data-atlas="organization-role">
+                <span>{role.name} · {role.key}</span>
+                <button type="button" class={cls('formButtonSecondary', 'atlas-button-secondary')} on:click={() => editRole(role)}>
+                  {t('organization.editRole')}
+                </button>
+                <button
+                  type="button"
+                  class={cls('formButtonSecondary', 'atlas-button-secondary')}
+                  disabled={!role.id || state.busy === `role:delete:${role.id}`}
+                  on:click={() => role.id && controller?.deleteRole(role.id)}
+                >
+                  {t('organization.deleteRole')}
+                </button>
+              </li>
+            {/each}
+          </ul>
+        {/if}
+        <form data-atlas="organization-role-form" on:submit|preventDefault={saveRole}>
+          {#if !editingRole}
+            <label class={cls('formField', 'atlas-field')}>
+              <span class={cls('formFieldLabel', 'atlas-field-label')}>{t('organization.roleKey')}</span>
+              <input name="role_key" class={cls('formFieldInput', 'atlas-input')} bind:value={roleKey} />
+            </label>
+          {/if}
+          <label class={cls('formField', 'atlas-field')}>
+            <span class={cls('formFieldLabel', 'atlas-field-label')}>{t('organization.roleName')}</span>
+            <input name="role_name" class={cls('formFieldInput', 'atlas-input')} bind:value={roleName} />
+          </label>
+          <fieldset class={cls('formField', 'atlas-field')}>
+            <legend class={cls('formFieldLabel', 'atlas-field-label')}>{t('organization.rolePermissions')}</legend>
+            {#each state.permissions as p (p.key)}
+              <label data-atlas="organization-role-permission">
+                <input
+                  type="checkbox"
+                  value={p.key}
+                  checked={rolePerms.includes(p.key)}
+                  on:change={(e) => togglePermission(p.key, e.currentTarget.checked)}
+                />
+                {p.name}
+              </label>
+            {/each}
+          </fieldset>
+          <button
+            type="submit"
+            class={cls('formButtonPrimary', 'atlas-button')}
+            disabled={!roleName.trim() || (!editingRole && !roleKey.trim()) || Boolean(state.busy?.startsWith('role:'))}
+          >
+            {editingRole ? t('organization.saveRole') : t('organization.createRole')}
+          </button>
+          {#if editingRole}
+            <button type="button" class={cls('formButtonSecondary', 'atlas-button-secondary')} on:click={resetRoleForm}>
+              {t('organization.cancel')}
+            </button>
+          {/if}
+        </form>
+      </div>
+    {/if}
+
+    {#if tab === 'settings'}
+      <div data-atlas="organization-settings">
+        {#if confirm}
+          <p class={'atlas-text'}>
+            {t(confirm === 'leave' ? 'organization.leaveConfirm' : 'organization.deleteConfirm', { name: $org.organization.name })}
+          </p>
+          {#if needsPassword}
+            <label class={cls('formField', 'atlas-field')}>
+              <span class={cls('formFieldLabel', 'atlas-field-label')}>{t('organization.passwordPrompt')}</span>
+              <input type="password" autocomplete="current-password" class={cls('formFieldInput', 'atlas-input')} bind:value={password} />
+            </label>
+          {/if}
+          <button
+            type="button"
+            class={cls('formButtonPrimary', 'atlas-button')}
+            disabled={state.busy === 'leave' || state.busy === 'delete'}
+            on:click={() => (confirm === 'leave' ? leave() : remove())}
+          >
+            {t('organization.confirm')}
+          </button>
+          <button type="button" class={cls('formButtonSecondary', 'atlas-button-secondary')} on:click={cancel}>
+            {t('organization.cancel')}
+          </button>
+        {:else}
+          <button type="button" class={cls('formButtonSecondary', 'atlas-button-secondary')} on:click={() => (confirm = 'leave')}>
+            {t('organization.leave')}
+          </button>
+          {#if isAdmin}
+            <button type="button" class={cls('formButtonSecondary', 'atlas-button-secondary')} on:click={() => (confirm = 'delete')}>
+              {t('organization.delete')}
+            </button>
+          {/if}
+        {/if}
+      </div>
+    {/if}
   </div>
 {/if}

package/dist/components/OrganizationProfile.svelte.d.ts

@@ -2,6 +2,8 @@ import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: Record<string, never>;
     events: {
+        exit: CustomEvent<"left" | "deleted">;
+    } & {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};

package/dist/components/PasskeySignUpStep.svelte

@@ -0,0 +1,23 @@
+<script>import { localizedErrorMessage } from "@atlasauth/js";
+import { useAtlas } from "../context";
+import { classFor } from "../appearance";
+import { translate } from "../i18n";
+export let busy = false;
+export let errors = [];
+export let onCreate;
+const atlas = useAtlas();
+const cls = (key, base) => classFor(key, atlas.appearance, base);
+const t = (key) => translate(atlas.catalog, key);
+const errorText = (error) => localizedErrorMessage(error, atlas.errorCatalog ?? atlas.catalog, atlas.catalog);
+</script>
+
+<div class={cls('card', 'atlas-card')} data-atlas-passkey-sign-up="">
+  <h1 class={cls('headerTitle', 'atlas-title')}>{t('signUp.title')}</h1>
+  {#each errors as error (error.code)}
+    <p class={cls('formFieldError', 'atlas-error')} role="alert">{errorText(error)}</p>
+  {/each}
+  <p class="atlas-text">{t('signUp.passkeyPrompt')}</p>
+  <button class={cls('formButtonPrimary', 'atlas-button')} type="button" disabled={busy} on:click={() => onCreate()}>
+    {t('signUp.passkeyCreate')}
+  </button>
+</div>

package/dist/components/PasskeySignUpStep.svelte.d.ts

@@ -0,0 +1,24 @@
+import { SvelteComponent } from "svelte";
+import { type FieldError } from '@atlasauth/js';
+declare const __propDef: {
+    props: {
+        /**
+           * The passkey-only sign-up's last step: create the passkey. The server
+           * creates the account only when this registration verifies.
+           */ busy?: boolean;
+        errors?: FieldError[];
+        onCreate: () => void;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
+};
+export type PasskeySignUpStepProps = typeof __propDef.props;
+export type PasskeySignUpStepEvents = typeof __propDef.events;
+export type PasskeySignUpStepSlots = typeof __propDef.slots;
+export default class PasskeySignUpStep extends SvelteComponent<PasskeySignUpStepProps, PasskeySignUpStepEvents, PasskeySignUpStepSlots> {
+}
+export {};

package/dist/components/RecoveryCodes.svelte

@@ -0,0 +1,55 @@
+<script>import { canDownloadRecoveryCodes, copyRecoveryCodes, downloadRecoveryCodes } from "@atlasauth/js";
+import { useAtlas } from "../context";
+import { classFor } from "../appearance";
+import { translate } from "../i18n";
+export let codes;
+export let busy = false;
+export let onSaved;
+const atlas = useAtlas();
+const cls = (key, base) => classFor(key, atlas.appearance, base);
+const t = (key) => translate(atlas.catalog, key);
+const canCopy = typeof navigator !== "undefined" && !!navigator.clipboard?.writeText;
+const canDownload = canDownloadRecoveryCodes();
+let copied = false;
+$: if (codes) copied = false;
+async function copy() {
+  copied = await copyRecoveryCodes(codes);
+}
+</script>
+
+<div class={cls('card', 'atlas-card')} data-atlas="recovery-codes">
+  <h1 class={cls('headerTitle', 'atlas-title')}>{t('mfa.recoveryCodesTitle')}</h1>
+  <p class="atlas-text">{t('mfa.recoveryCodesHelp')}</p>
+  <ul
+    class="atlas-recovery-codes"
+    data-atlas="recovery-codes-list"
+    style="list-style:none;padding:0;margin:8px 0 12px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;text-align:center"
+  >
+    {#each codes as code (code)}
+      <li><code>{code}</code></li>
+    {/each}
+  </ul>
+  <div class="atlas-alternatives">
+    {#if canCopy}
+      <button class={cls('formButtonSecondary', 'atlas-button-secondary')} type="button" data-atlas="recovery-codes-copy" on:click={() => void copy()}>
+        {t('mfa.recoveryCodesCopy')}
+      </button>
+    {/if}
+    {#if canDownload}
+      <button
+        class={cls('formButtonSecondary', 'atlas-button-secondary')}
+        type="button"
+        data-atlas="recovery-codes-download"
+        on:click={() => downloadRecoveryCodes(codes)}
+      >
+        {t('mfa.recoveryCodesDownload')}
+      </button>
+    {/if}
+  </div>
+  {#if copied}
+    <p class="atlas-text" aria-live="polite" data-atlas="recovery-codes-copied">{t('mfa.recoveryCodesCopied')}</p>
+  {/if}
+  <button class={cls('formButtonPrimary', 'atlas-button')} type="button" data-atlas="recovery-codes-saved" disabled={busy} on:click={onSaved}>
+    {t('mfa.recoveryCodesSaved')}
+  </button>
+</div>

package/dist/components/RecoveryCodes.svelte.d.ts

@@ -0,0 +1,25 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        /**
+           * The recovery codes a mid-sign-in MFA enrolment came with, shown once before
+           * the sign-in finishes: copy them, download them as a .txt file, then
+           * "I've saved my codes" (`onSaved`) exchanges the ticket. The codes live only
+           * in the flow's memory and are forgotten once saved.
+           */ codes: string[];
+        busy?: boolean;
+        onSaved: () => void;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
+};
+export type RecoveryCodesProps = typeof __propDef.props;
+export type RecoveryCodesEvents = typeof __propDef.events;
+export type RecoveryCodesSlots = typeof __propDef.slots;
+export default class RecoveryCodes extends SvelteComponent<RecoveryCodesProps, RecoveryCodesEvents, RecoveryCodesSlots> {
+}
+export {};

package/dist/components/SignIn.svelte

@@ -1,10 +1,11 @@
 <script>import { onDestroy } from "svelte";
-import { signUp as hostedSignUp } from "@atlasauth/js";
+import { lastUsedMethodLabel, pendingRecoveryCodes, signUp as hostedSignUp } from "@atlasauth/js";
 import { signIn } from "../accessors";
 import { useAtlas } from "../context";
 import { classFor } from "../appearance";
 import { translate } from "../i18n";
 import AttemptFlow from "./AttemptFlow.svelte";
+import RecoveryCodes from "./RecoveryCodes.svelte";
 export let afterUrl = void 0;
 export let signUpUrl = void 0;
 const atlas = useAtlas();
@@ -26,11 +27,24 @@ $: promptHref = $flowState.attempt?.status !== "complete" ? signUpHref(signUpUrl
 const flow = signIn();
 const flowState = flow.state;
 const settings = flow.settings;
+const lastMethod = flow.lastMethod;
+const enrollmentState = flow.enrollmentState;
 onDestroy(() => flow.destroy());
+$: recoveryCodes = pendingRecoveryCodes($flowState);
+$: lastLabel = !$flowState.attempt ? lastUsedMethodLabel($lastMethod, t) : null;
 const drawn = (..._deps) => flow.captcha.needed ? flow.captcha : null;
 $: captcha = drawn($settings, $flowState);
 </script>
 
+{#if lastLabel}
+  <p class={classFor('badge', atlas.appearance, 'atlas-text atlas-last-used-hint')} data-atlas="last-used" data-atlas-method={$lastMethod}>
+    {t('signIn.lastUsed')}: {lastLabel}
+  </p>
+{/if}
+
+{#if recoveryCodes}
+  <RecoveryCodes codes={recoveryCodes} busy={$flowState.busy} onSaved={flow.saveRecoveryCodes} />
+{:else}
 <AttemptFlow
   attempt={$flowState.attempt}
   busy={$flowState.busy}
@@ -39,9 +53,14 @@ $: captcha = drawn($settings, $flowState);
   titleKey="signIn.title"
   onSubmit={flow.submit}
   onPrepare={flow.prepare}
+  onEmailSecondFactor={$settings?.account.emailSecondFactor ? flow.sendEmailSecondFactor : null}
+  onSmsSecondFactor={$settings && flow.mfaChoices().sms ? flow.sendSmsSecondFactor : null}
+  enrollment={flow.enrollment}
+  enrollmentState={$enrollmentState}
   emailDelivery={$settings?.emailDelivery ?? null}
   {captcha}
 />
+{/if}
 
 {#if promptHref}
   <p class={classFor('footerAction', atlas.appearance, 'atlas-footer')} data-atlas-sign-up-prompt="">

package/dist/components/SignUp.svelte

@@ -1,6 +1,8 @@
 <script>import { onDestroy } from "svelte";
+import { awaitingPasskey, passkeysSupported } from "@atlasauth/js";
 import { signUp } from "../accessors";
 import AttemptFlow from "./AttemptFlow.svelte";
+import PasskeySignUpStep from "./PasskeySignUpStep.svelte";
 import SignUpForm from "./SignUpForm.svelte";
 export let afterUrl = void 0;
 const flow = signUp();
@@ -9,9 +11,18 @@ const settings = flow.settings;
 onDestroy(() => flow.destroy());
 const drawn = (..._deps) => flow.signUpCaptcha.needed ? flow.signUpCaptcha : null;
 $: captcha = drawn($settings, $flowState);
+let mode = "password";
+$: offer = $settings?.account.passkeySignUp ?? null;
+$: canPasskey = !!offer && passkeysSupported();
+$: usingPasskey = mode === "passkey" && canPasskey;
+function switchMode() {
+  mode = usingPasskey ? "password" : "passkey";
+}
 </script>
 
-{#if $flowState.attempt}
+{#if $flowState.attempt && awaitingPasskey($flowState.attempt)}
+  <PasskeySignUpStep busy={$flowState.busy} errors={$flowState.errors} onCreate={flow.createPasskey} />
+{:else if $flowState.attempt}
   <AttemptFlow
     attempt={$flowState.attempt}
     busy={$flowState.busy}
@@ -19,6 +30,8 @@ $: captcha = drawn($settings, $flowState);
     sessionKept={$flowState.sessionKept}
     titleKey="signUp.title"
     onSubmit={flow.submit}
+    emailVerification={$settings?.account.emailVerification ?? 'code'}
+    onResend={flow.resendSignUp}
   />
 {:else}
   <SignUpForm
@@ -26,6 +39,8 @@ $: captcha = drawn($settings, $flowState);
     busy={$flowState.busy}
     errors={$flowState.errors}
     {captcha}
-    onSubmit={flow.create}
+    onSubmit={usingPasskey ? flow.createWithPasskey : flow.create}
+    passkey={usingPasskey && offer ? { email: offer.email } : null}
+    onSwitchMode={canPasskey ? switchMode : undefined}
   />
 {/if}