@nebulr-group/bridge-svelte 0.1.0-beta.0

package/dist/client/components/sdk-auth/MfaChallenge.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { HTMLAttributes } from 'svelte/elements';
+interface Props extends HTMLAttributes<HTMLDivElement> {
+    onVerified?: () => void;
+    onError?: (error: Error) => void;
+    showRecoveryOption?: boolean;
+}
+declare const MfaChallenge: import("svelte").Component<Props, {}, "">;
+type MfaChallenge = ReturnType<typeof MfaChallenge>;
+export default MfaChallenge;

package/dist/client/components/sdk-auth/MfaSetup.svelte

@@ -0,0 +1,182 @@
+<script lang="ts">
+  import type { HTMLAttributes } from 'svelte/elements';
+  import { getBridgeAuth } from '../../../core/bridge-instance.js';
+  import AuthFormWrapper from './shared/AuthFormWrapper.svelte';
+  import Spinner from './shared/Spinner.svelte';
+  import Alert from './shared/Alert.svelte';
+
+  interface Props extends HTMLAttributes<HTMLDivElement> {
+    onComplete?: () => void;
+    onError?: (error: Error) => void;
+  }
+
+  let {
+    onComplete,
+    onError,
+    class: className,
+    style,
+    ...rest
+  }: Props = $props();
+
+  let step = $state<'phone' | 'verify' | 'backup'>('phone');
+  let phoneNumber = $state('');
+  let code = $state('');
+  let backupCode = $state<string | null>(null);
+  let loading = $state(false);
+  let error = $state<string | null>(null);
+  let copied = $state(false);
+  let resendCountdown = $state(0);
+  let resendTimer: ReturnType<typeof setInterval> | null = null;
+
+  function startResendCooldown() {
+    resendCountdown = 60;
+    if (resendTimer) clearInterval(resendTimer);
+    resendTimer = setInterval(() => {
+      resendCountdown--;
+      if (resendCountdown <= 0) {
+        if (resendTimer) clearInterval(resendTimer);
+        resendTimer = null;
+      }
+    }, 1000);
+  }
+
+  async function handleSendCode() {
+    if (loading) return;
+    error = null;
+    loading = true;
+    try {
+      await getBridgeAuth().setupMfa(phoneNumber);
+      step = 'verify';
+      startResendCooldown();
+    } catch (err: any) {
+      error = err.message || 'Failed to send verification code.';
+      onError?.(err);
+    } finally {
+      loading = false;
+    }
+  }
+
+  async function handleResendCode() {
+    if (loading || resendCountdown > 0) return;
+    error = null;
+    loading = true;
+    try {
+      await getBridgeAuth().setupMfa(phoneNumber);
+      code = '';
+      startResendCooldown();
+    } catch (err: any) {
+      error = err.message || 'Failed to resend verification code.';
+      onError?.(err);
+    } finally {
+      loading = false;
+    }
+  }
+
+  function goBackToPhone() {
+    step = 'phone';
+    code = '';
+    error = null;
+    resendCountdown = 0;
+    if (resendTimer) clearInterval(resendTimer);
+    resendTimer = null;
+  }
+
+  async function handleVerifyCode() {
+    if (loading) return;
+    error = null;
+    loading = true;
+    try {
+      const result = await getBridgeAuth().confirmMfaSetup(code);
+      backupCode = result.backupCode ?? null;
+      step = 'backup';
+    } catch (err: any) {
+      error = err.message || 'Invalid code. Please try again.';
+      onError?.(err);
+    } finally {
+      loading = false;
+    }
+  }
+
+  async function copyBackupCode() {
+    if (backupCode) {
+      await navigator.clipboard.writeText(backupCode);
+      copied = true;
+      setTimeout(() => { copied = false; }, 2000);
+    }
+  }
+
+  async function handleDone() {
+    // Complete the MFA setup flow (transitions auth state + auto-selects tenant)
+    await getBridgeAuth().completeMfaSetup();
+    onComplete?.();
+  }
+</script>
+
+<AuthFormWrapper heading="Set up two-factor authentication" class={className} {style} {...rest}>
+  {#if error}
+    <Alert variant="error">{error}</Alert>
+  {/if}
+
+  {#if step === 'phone'}
+    <p class="bridge-step-desc">Enter your phone number to receive a verification code via SMS.</p>
+    <form onsubmit={(e) => { e.preventDefault(); handleSendCode(); }}>
+      <div class="bridge-form-group">
+        <label for="mfa-phone">Phone number</label>
+        <input
+          id="mfa-phone"
+          type="tel"
+          placeholder="+1 (555) 000-0000"
+          bind:value={phoneNumber}
+          disabled={loading}
+        />
+      </div>
+      <button type="submit" class="bridge-btn bridge-btn-primary" disabled={loading || !phoneNumber.trim()}>
+        {#if loading}<Spinner size={16} />{:else}Send code{/if}
+      </button>
+    </form>
+
+  {:else if step === 'verify'}
+    <p class="bridge-step-desc">Enter the 6-digit code sent to your phone.</p>
+    <form onsubmit={(e) => { e.preventDefault(); handleVerifyCode(); }}>
+      <div class="bridge-form-group">
+        <label for="mfa-verify-code">Verification code</label>
+        <input
+          id="mfa-verify-code"
+          type="text"
+          inputmode="numeric"
+          autocomplete="one-time-code"
+          placeholder="Enter 6-digit code"
+          maxlength={6}
+          bind:value={code}
+          disabled={loading}
+        />
+      </div>
+      <button type="submit" class="bridge-btn bridge-btn-primary" disabled={loading || code.length < 6}>
+        {#if loading}<Spinner size={16} />{:else}Verify{/if}
+      </button>
+    </form>
+    <p class="bridge-mfa-help">
+      {#if resendCountdown > 0}
+        Didn't get your text message? You can resend in {resendCountdown}s.
+      {:else}
+        Didn't get your text message? <button type="button" class="bridge-link" onclick={handleResendCode} disabled={loading}>Resend code</button>.
+      {/if}
+    </p>
+    <button type="button" class="bridge-link" onclick={goBackToPhone}>Change phone number</button>
+
+  {:else if step === 'backup'}
+    <Alert variant="success">Two-factor authentication enabled!</Alert>
+    <p class="bridge-step-desc">Save this recovery code in a safe place. You can use it to access your account if you lose your phone.</p>
+    {#if backupCode}
+      <div class="bridge-backup-code">
+        <code>{backupCode}</code>
+        <button type="button" class="bridge-btn bridge-btn-secondary" onclick={copyBackupCode}>
+          {copied ? 'Copied!' : 'Copy'}
+        </button>
+      </div>
+    {/if}
+    <button type="button" class="bridge-btn bridge-btn-primary" onclick={handleDone}>
+      Done
+    </button>
+  {/if}
+</AuthFormWrapper>

package/dist/client/components/sdk-auth/MfaSetup.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { HTMLAttributes } from 'svelte/elements';
+interface Props extends HTMLAttributes<HTMLDivElement> {
+    onComplete?: () => void;
+    onError?: (error: Error) => void;
+}
+declare const MfaSetup: import("svelte").Component<Props, {}, "">;
+type MfaSetup = ReturnType<typeof MfaSetup>;
+export default MfaSetup;

package/dist/client/components/sdk-auth/PasskeyLogin.svelte

@@ -0,0 +1,99 @@
+<script lang="ts">
+  import type { HTMLButtonAttributes } from 'svelte/elements';
+  import { onMount } from 'svelte';
+  import { getBridgeAuth } from '../../../core/bridge-instance.js';
+  import Spinner from './shared/Spinner.svelte';
+  import Alert from './shared/Alert.svelte';
+
+  interface Props extends HTMLButtonAttributes {
+    onLogin?: () => void;
+    onError?: (error: Error) => void;
+    onSetupPasskey?: () => void;
+    autofill?: boolean;
+  }
+
+  let {
+    onLogin,
+    onError,
+    onSetupPasskey,
+    autofill = false,
+    class: className,
+    style,
+    ...rest
+  }: Props = $props();
+
+  let loading = $state(false);
+  let error = $state<string | null>(null);
+  let supported = $state(false);
+
+  onMount(() => {
+    supported = typeof window !== 'undefined'
+      && !!window.PublicKeyCredential;
+  });
+
+  async function handlePasskeyLogin() {
+    if (loading || !supported) return;
+    error = null;
+    loading = true;
+    try {
+      const options = await getBridgeAuth().getPasskeyAuthOptions();
+
+      let authResponse: any;
+      if (typeof window !== 'undefined' && (window as any).__simpleWebAuthn?.startAuthentication) {
+        authResponse = await (window as any).__simpleWebAuthn.startAuthentication(options, autofill);
+      } else {
+        // @ts-ignore — @simplewebauthn/browser is an optional peer dependency
+        const mod = await import('@simplewebauthn/browser');
+        authResponse = await mod.startAuthentication({ optionsJSON: options, useBrowserAutofill: autofill });
+      }
+
+      await getBridgeAuth().authenticateWithPasskey(authResponse);
+      onLogin?.();
+    } catch (err: any) {
+      if (err.name === 'NotAllowedError' && onSetupPasskey) {
+        onSetupPasskey();
+        return;
+      }
+      if (err.name === 'NotAllowedError') {
+        error = 'Passkey authentication was cancelled.';
+      } else {
+        error = err.message || 'Passkey authentication failed.';
+      }
+      onError?.(err);
+    } finally {
+      loading = false;
+    }
+  }
+</script>
+
+{#if supported}
+  {#if error}
+    <Alert variant="error">{error}</Alert>
+    {#if onSetupPasskey}
+      <p class="bridge-passkey-setup-hint">
+        Don't have a passkey? <button type="button" class="bridge-link" onclick={onSetupPasskey}>Create one.</button>
+      </p>
+    {/if}
+  {/if}
+  <button
+    type="button"
+    class={className}
+    {style}
+    data-bridge-passkey-login
+    data-loading={loading}
+    onclick={handlePasskeyLogin}
+    disabled={loading}
+    {...rest}
+  >
+  <span class="bridge-sso-btn-inner">
+    {#if loading}
+      <Spinner size={16} />
+    {:else}
+      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" width="24" height="24" aria-hidden="true">
+        <path fill="currentColor" stroke-width="0.5" d="M3 20v-2.35c0-.63335.158335-1.175.475-1.625.316665-.45.725-.79165 1.225-1.025 1.11665-.5 2.1875-.875 3.2125-1.125S9.96665 13.5 11 13.5c.43335 0 .85415.02085 1.2625.0625s.82915.10415 1.2625.1875c-.08335.96665.09585 1.87915.5375 2.7375C14.50415 17.34585 15.15 18.01665 16 18.5v1.5H3Zm16 3.675-1.5-1.5v-4.65c-.73335-.21665-1.33335-.62915-1.8-1.2375-.46665-.60835-.7-1.3125-.7-2.1125 0-.96665.34165-1.79165 1.025-2.475.68335-.68335 1.50835-1.025 2.475-1.025s1.79165.34165 2.475 1.025c.68335.68335 1.025 1.50835 1.025 2.475 0 .75-.2125 1.41665-.6375 2-.425.58335-.9625 1-1.6125 1.25l1.25 1.25-1.5 1.5 1.5 1.5-2 2ZM11 11.5c-1.05 0-1.9375-.3625-2.6625-1.0875-.725-.725-1.0875-1.6125-1.0875-2.6625s.3625-1.9375 1.0875-2.6625C9.0625 4.3625 9.95 4 11 4s1.9375.3625 2.6625 1.0875c.725.725 1.0875 1.6125 1.0875 2.6625s-.3625 1.9375-1.0875 2.6625C12.9375 11.1375 12.05 11.5 11 11.5Zm7.5 3.175c.28335 0 .52085-.09585.7125-.2875S19.5 13.95835 19.5 13.675c0-.28335-.09585-.52085-.2875-.7125s-.42915-.2875-.7125-.2875c-.28335 0-.52085.09585-.7125.2875S17.5 13.39165 17.5 13.675c0 .28335.09585.52085.2875.7125s.42915.2875.7125.2875Z"/>
+      </svg>
+    {/if}
+    <span>Sign in with Passkeys</span>
+  </span>
+  </button>
+{/if}

package/dist/client/components/sdk-auth/PasskeyLogin.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { HTMLButtonAttributes } from 'svelte/elements';
+interface Props extends HTMLButtonAttributes {
+    onLogin?: () => void;
+    onError?: (error: Error) => void;
+    onSetupPasskey?: () => void;
+    autofill?: boolean;
+}
+declare const PasskeyLogin: import("svelte").Component<Props, {}, "">;
+type PasskeyLogin = ReturnType<typeof PasskeyLogin>;
+export default PasskeyLogin;

package/dist/client/components/sdk-auth/PasskeyRequestSetupLink.svelte

@@ -0,0 +1,83 @@
+<script lang="ts">
+  import { untrack } from 'svelte';
+  import { getBridgeAuth } from '../../../core/bridge-instance.js';
+  import AuthFormWrapper from './shared/AuthFormWrapper.svelte';
+  import Spinner from './shared/Spinner.svelte';
+  import Alert from './shared/Alert.svelte';
+
+  interface Props {
+    initialEmail?: string;
+    onBack: () => void;
+  }
+
+  let { initialEmail = '', onBack }: Props = $props();
+
+  type ViewState = 'form' | 'sent';
+
+  let view = $state<ViewState>('form');
+  let email = $state('');
+  let loading = $state(false);
+
+  // Seed email from prop once (runs at component creation)
+  untrack(() => { email = initialEmail; });
+  let error = $state<string | null>(null);
+
+  async function handleSubmit() {
+    if (loading || !email.trim()) return;
+    error = null;
+    loading = true;
+    try {
+      await getBridgeAuth().requestPasskeySetupLink(email);
+      view = 'sent';
+    } catch (err: any) {
+      error = err.message || 'Failed to send setup link.';
+    } finally {
+      loading = false;
+    }
+  }
+</script>
+
+{#if view === 'sent'}
+  <AuthFormWrapper heading="Check your email">
+    <p class="bridge-step-desc">
+      We sent a passkey setup link to <strong>{email}</strong>. Please check your inbox and click the link to create your passkey and finish signing in.
+    </p>
+    <button type="button" class="bridge-btn bridge-btn-secondary" onclick={onBack}>
+      Back to login
+    </button>
+  </AuthFormWrapper>
+{:else}
+  <AuthFormWrapper heading="Create a passkey">
+    <p class="bridge-step-desc">
+      Enter your email and we will send a link to create your passkey.
+    </p>
+    {#if error}
+      <Alert variant="error">{error}</Alert>
+    {/if}
+    <form onsubmit={(e) => { e.preventDefault(); handleSubmit(); }}>
+      <div class="bridge-form-group">
+        <label for="passkey-request-email">Email</label>
+        <input
+          id="passkey-request-email"
+          type="email"
+          placeholder="you@example.com"
+          required
+          bind:value={email}
+          disabled={loading}
+        />
+      </div>
+      <button
+        type="submit"
+        class="bridge-btn bridge-btn-primary"
+        disabled={loading || !email.trim()}
+      >
+        {#if loading}<Spinner size={16} />{:else}Send setup link{/if}
+      </button>
+    </form>
+    <div class="bridge-form-footer">
+      <button type="button" class="bridge-link" onclick={onBack}>
+        &larr; Back to login
+      </button>
+    </div>
+  </AuthFormWrapper>
+{/if}

package/dist/client/components/sdk-auth/PasskeyRequestSetupLink.svelte.d.ts

@@ -0,0 +1,7 @@
+interface Props {
+    initialEmail?: string;
+    onBack: () => void;
+}
+declare const PasskeyRequestSetupLink: import("svelte").Component<Props, {}, "">;
+type PasskeyRequestSetupLink = ReturnType<typeof PasskeyRequestSetupLink>;
+export default PasskeyRequestSetupLink;

package/dist/client/components/sdk-auth/PasskeySetup.svelte

@@ -0,0 +1,151 @@
+<script lang="ts">
+  import type { HTMLAttributes } from 'svelte/elements';
+  import { onMount } from 'svelte';
+  import { getBridgeAuth } from '../../../core/bridge-instance.js';
+  import AuthFormWrapper from './shared/AuthFormWrapper.svelte';
+  import Spinner from './shared/Spinner.svelte';
+  import Alert from './shared/Alert.svelte';
+
+  interface Props extends HTMLAttributes<HTMLDivElement> {
+    token: string;
+    onComplete?: () => void;
+    onError?: (error: Error) => void;
+    onBack?: () => void;
+    onExpired?: () => void;
+  }
+
+  let {
+    token,
+    onComplete,
+    onError,
+    onBack,
+    onExpired,
+    class: className,
+    style,
+    ...rest
+  }: Props = $props();
+
+  type ErrorType = 'expired' | 'cancelled' | 'unsupported' | 'network' | 'general';
+  type ViewState = 'loading' | 'success' | 'error';
+
+  let viewState = $state<ViewState>('loading');
+  let errorType = $state<ErrorType>('general');
+  let errorMessage = $state('');
+  let supported = $state(true);
+
+  function classifyError(err: any): ErrorType {
+    if (err.name === 'NotAllowedError') return 'cancelled';
+    const msg = (err.message || '').toLowerCase();
+    if (msg.includes('expired') || msg.includes('invalid token') || msg.includes('not found')) return 'expired';
+    if (msg.includes('network') || msg.includes('fetch') || msg.includes('econnrefused')) return 'network';
+    return 'general';
+  }
+
+  let heading = $derived(
+    viewState === 'loading' ? 'Setting up passkey'
+    : viewState === 'success' ? 'Passkey created'
+    : 'Passkey setup'
+  );
+
+  async function handleSetup() {
+    viewState = 'loading';
+    try {
+      const options = await getBridgeAuth().getPasskeyRegistrationOptions(token);
+
+      let regResponse: any;
+      if (typeof window !== 'undefined' && (window as any).__simpleWebAuthn?.startRegistration) {
+        regResponse = await (window as any).__simpleWebAuthn.startRegistration(options);
+      } else {
+        // @ts-ignore — @simplewebauthn/browser is an optional peer dependency
+        const mod = await import('@simplewebauthn/browser');
+        regResponse = await mod.startRegistration({ optionsJSON: options });
+      }
+
+      const result = await getBridgeAuth().verifyPasskeyRegistration(regResponse, token);
+      if (result.verified) {
+        viewState = 'success';
+      } else {
+        errorType = 'general';
+        errorMessage = 'Passkey registration could not be verified.';
+        viewState = 'error';
+      }
+    } catch (err: any) {
+      errorType = classifyError(err);
+      errorMessage = err.message || 'Passkey setup failed.';
+      viewState = 'error';
+      onError?.(err);
+    }
+  }
+
+  onMount(() => {
+    if (typeof window === 'undefined' || !window.PublicKeyCredential) {
+      supported = false;
+      errorType = 'unsupported';
+      viewState = 'error';
+      return;
+    }
+    handleSetup();
+  });
+</script>
+
+<AuthFormWrapper {heading} class={className} {style} {...rest}>
+  {#if viewState === 'loading'}
+    <div class="bridge-passkey-loading">
+      <Spinner size={16} />
+      <p class="bridge-step-desc">Follow the prompt from your browser or device to complete passkey setup.</p>
+    </div>
+
+  {:else if viewState === 'success'}
+    <Alert variant="success">Your passkey has been created.</Alert>
+    <button
+      type="button"
+      class="bridge-btn bridge-btn-primary"
+      onclick={() => onComplete?.()}
+    >
+      Sign in now
+    </button>
+
+  {:else if errorType === 'expired'}
+    <Alert variant="error">This setup link has expired or is invalid.</Alert>
+    {#if onExpired}
+      <button type="button" class="bridge-btn bridge-btn-primary" onclick={() => onExpired?.()}>
+        Request new setup link
+      </button>
+    {/if}
+    {#if onBack}
+      <button type="button" class="bridge-btn bridge-btn-ghost" onclick={() => onBack?.()}>
+        Back to sign in
+      </button>
+    {/if}
+
+  {:else if errorType === 'cancelled'}
+    <Alert variant="error">Passkey setup was cancelled.</Alert>
+    <button type="button" class="bridge-btn bridge-btn-primary" onclick={handleSetup}>
+      Try again
+    </button>
+    {#if onBack}
+      <button type="button" class="bridge-btn bridge-btn-ghost" onclick={() => onBack?.()}>
+        Back to sign in
+      </button>
+    {/if}
+
+  {:else if errorType === 'unsupported'}
+    <Alert variant="info">Your browser does not support passkeys.</Alert>
+    {#if onBack}
+      <button type="button" class="bridge-btn bridge-btn-secondary" onclick={() => onBack?.()}>
+        Back to sign in
+      </button>
+    {/if}
+
+  {:else}
+    <Alert variant="error">{errorMessage || 'An error occurred during passkey setup.'}</Alert>
+    <button type="button" class="bridge-btn bridge-btn-primary" onclick={handleSetup}>
+      Try again
+    </button>
+    {#if onBack}
+      <button type="button" class="bridge-btn bridge-btn-ghost" onclick={() => onBack?.()}>
+        Back to sign in
+      </button>
+    {/if}
+  {/if}
+</AuthFormWrapper>

package/dist/client/components/sdk-auth/PasskeySetup.svelte.d.ts

@@ -0,0 +1,11 @@
+import type { HTMLAttributes } from 'svelte/elements';
+interface Props extends HTMLAttributes<HTMLDivElement> {
+    token: string;
+    onComplete?: () => void;
+    onError?: (error: Error) => void;
+    onBack?: () => void;
+    onExpired?: () => void;
+}
+declare const PasskeySetup: import("svelte").Component<Props, {}, "">;
+type PasskeySetup = ReturnType<typeof PasskeySetup>;
+export default PasskeySetup;

package/dist/client/components/sdk-auth/SignupForm.svelte

@@ -0,0 +1,119 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import type { HTMLAttributes } from 'svelte/elements';
+  import { getBridgeAuth } from '../../../core/bridge-instance.js';
+  import { getConfig } from '../../stores/config.store.js';
+  import AuthFormWrapper from './shared/AuthFormWrapper.svelte';
+  import Spinner from './shared/Spinner.svelte';
+  import Alert from './shared/Alert.svelte';
+
+  interface Props extends HTMLAttributes<HTMLDivElement> {
+    onSignup?: () => void;
+    onError?: (error: Error) => void;
+    showLoginLink?: boolean;
+    /** Override login page URL. Default: derived from BridgeConfig loginRoute. */
+    loginHref?: string | undefined;
+    heading?: string;
+    footer?: Snippet;
+  }
+
+  let {
+    onSignup,
+    onError,
+    showLoginLink = true,
+    loginHref = undefined,
+    heading = 'Create your account',
+    footer,
+    class: className,
+    style,
+    ...rest
+  }: Props = $props();
+
+  let effectiveLoginHref = $derived(loginHref ?? getConfig().loginRoute);
+
+  let email = $state('');
+  let firstName = $state('');
+  let lastName = $state('');
+  let loading = $state(false);
+  let error = $state<string | null>(null);
+  let success = $state(false);
+
+  async function handleSubmit() {
+    if (loading) return;
+    error = null;
+    loading = true;
+    try {
+      await getBridgeAuth().signup(email, firstName, lastName);
+      success = true;
+      onSignup?.();
+    } catch (err: any) {
+      error = err.message || 'Failed to create account.';
+      onError?.(err);
+    } finally {
+      loading = false;
+    }
+  }
+</script>
+
+<AuthFormWrapper {heading} class={className} {style} {...rest}>
+  {#if success}
+    <h2 class="bridge-success-heading">Check your email</h2>
+    <p class="bridge-step-desc">We sent a verification link to <strong>{email}</strong>. Check your inbox to activate your account.</p>
+    {#if footer}
+      {@render footer()}
+    {:else if showLoginLink}
+      <div class="bridge-form-footer">
+        Already have an account? <a href={effectiveLoginHref}>Log in</a>
+      </div>
+    {/if}
+  {:else}
+    {#if error}
+      <Alert variant="error">{error}</Alert>
+    {/if}
+
+    <form onsubmit={(e) => { e.preventDefault(); handleSubmit(); }}>
+      <div class="bridge-form-group">
+        <label for="signup-email">Email</label>
+        <input
+          id="signup-email"
+          type="email"
+          placeholder="you@example.com"
+          required
+          bind:value={email}
+          disabled={loading}
+        />
+      </div>
+      <div class="bridge-form-group">
+        <label for="signup-first-name">First name</label>
+        <input
+          id="signup-first-name"
+          type="text"
+          placeholder="First name"
+          bind:value={firstName}
+          disabled={loading}
+        />
+      </div>
+      <div class="bridge-form-group">
+        <label for="signup-last-name">Last name</label>
+        <input
+          id="signup-last-name"
+          type="text"
+          placeholder="Last name"
+          bind:value={lastName}
+          disabled={loading}
+        />
+      </div>
+      <button type="submit" class="bridge-btn bridge-btn-primary" disabled={loading || !email.trim()}>
+        {#if loading}<Spinner size={16} />{:else}Sign up{/if}
+      </button>
+    </form>
+
+    {#if footer}
+      {@render footer()}
+    {:else if showLoginLink}
+      <div class="bridge-form-footer">
+        Already have an account? <a href={effectiveLoginHref}>Log in</a>
+      </div>
+    {/if}
+  {/if}
+</AuthFormWrapper>