@seamless-auth/svelte 0.0.0-stage → 0.1.0

package/dist/screens/OtpInput.svelte

@@ -0,0 +1,101 @@
+<!--
+  Copyright © 2026 Fells Code, LLC
+  Licensed under the Apache License, Version 2.0
+  See LICENSE file in the project root for full license information
+-->
+<!-- One box per character of a one-time code. Bind the code with bind:value. -->
+<script lang="ts">
+  import { isOtpCharacter, otpCharacters, type OtpInputMode } from '@seamless-auth/client';
+
+  let {
+    value = $bindable(''),
+    length = 6,
+    mode = 'numeric',
+    name = 'otp',
+  }: { value?: string; length?: number; mode?: OtpInputMode; name?: string } = $props();
+
+  const boxes: (HTMLInputElement | undefined)[] = $state([]);
+  const chars = $derived(Array.from({ length }, (_, i) => value[i] ?? ''));
+
+  const focus = (index: number) => boxes[index]?.focus();
+  const write = (next: string[]) => {
+    value = next.join('');
+  };
+
+  function fill(index: number, input: string) {
+    const incoming = otpCharacters(input, mode).slice(0, length);
+    const next = [...chars];
+
+    incoming.forEach((char, offset) => {
+      if (index + offset < next.length) next[index + offset] = char;
+    });
+
+    write(next);
+    focus(Math.min(index + incoming.length, length - 1));
+  }
+
+  function onInput(index: number, event: Event) {
+    const box = event.currentTarget as HTMLInputElement;
+    const typed = box.value;
+
+    if (typed.length > 1) {
+      fill(index, typed);
+      return;
+    }
+
+    if (typed && !isOtpCharacter(typed, mode)) {
+      // The value only flows down, so a refused character has to be taken back
+      // out of the element itself.
+      box.value = chars[index];
+      return;
+    }
+
+    const next = [...chars];
+    next[index] = typed;
+    write(next);
+
+    if (typed) focus(index + 1);
+  }
+
+  function onKeydown(index: number, event: KeyboardEvent) {
+    if (event.key === 'Backspace') {
+      event.preventDefault();
+      const next = [...chars];
+
+      if (next[index]) {
+        next[index] = '';
+        write(next);
+      } else if (index > 0) {
+        next[index - 1] = '';
+        write(next);
+        focus(index - 1);
+      }
+    }
+
+    if (event.key === 'ArrowLeft' && index > 0) focus(index - 1);
+    if (event.key === 'ArrowRight' && index < length - 1) focus(index + 1);
+  }
+
+  function onPaste(event: ClipboardEvent) {
+    event.preventDefault();
+    fill(0, event.clipboardData?.getData('text') ?? '');
+  }
+</script>
+
+<div class="sa-otp" role="group" aria-label="One-time password input" onpaste={onPaste}>
+  {#each chars as char, i (i)}
+    <input
+      bind:this={boxes[i]}
+      class="sa-otp-input"
+      type="text"
+      inputmode={mode === 'numeric' ? 'numeric' : 'text'}
+      autocomplete="one-time-code"
+      name={`${name}-${i}`}
+      maxlength="1"
+      value={char}
+      aria-label={`Digit ${i + 1}`}
+      oninput={event => onInput(i, event)}
+      onkeydown={event => onKeydown(i, event)}
+    />
+  {/each}
+</div>

package/dist/screens/OtpInput.svelte.d.ts

@@ -0,0 +1,10 @@
+import { type OtpInputMode } from '@seamless-auth/client';
+type $$ComponentProps = {
+    value?: string;
+    length?: number;
+    mode?: OtpInputMode;
+    name?: string;
+};
+declare const OtpInput: import("svelte").Component<$$ComponentProps, {}, "value">;
+type OtpInput = ReturnType<typeof OtpInput>;
+export default OtpInput;

package/dist/screens/PasskeyLogin.svelte

@@ -0,0 +1,34 @@
+<!--
+  Copyright © 2026 Fells Code, LLC
+  Licensed under the Apache License, Version 2.0
+  See LICENSE file in the project root for full license information
+-->
+<!-- Sign in with a passkey alone, without an identifier first. -->
+<script lang="ts">
+  import { getAuthNavigator, getSeamlessAuth } from '../context.js';
+  import AuthLayout from './AuthLayout.svelte';
+
+  const auth = getSeamlessAuth();
+  const navigator = getAuthNavigator();
+  let error = $state('');
+
+  async function signIn() {
+    error = '';
+    const result = await auth.handlePasskeyLogin();
+
+    if (result.error) {
+      error = 'Passkey sign-in could not be completed. Try another sign-in method.';
+      return;
+    }
+
+    await navigator.toApp();
+  }
+</script>
+
+<AuthLayout>
+  <h2 class="sa-heading">Login with Passkey</h2>
+  <button type="button" class="sa-button" onclick={signIn}>Use Passkey</button>
+  {#if error}
+    <p class="sa-error">{error}</p>
+  {/if}
+</AuthLayout>

package/dist/screens/PasskeyLogin.svelte.d.ts

@@ -0,0 +1,3 @@
+declare const PasskeyLogin: import("svelte").Component<Record<string, never>, {}, "">;
+type PasskeyLogin = ReturnType<typeof PasskeyLogin>;
+export default PasskeyLogin;

package/dist/screens/RegisterPasskey.svelte

@@ -0,0 +1,110 @@
+<!--
+  Copyright © 2026 Fells Code, LLC
+  Licensed under the Apache License, Version 2.0
+  See LICENSE file in the project root for full license information
+-->
+<!--
+  Offers passkey enrolment to a user who has just signed in. The session already
+  exists by the time this renders, so a passkey is an addition to it, which is
+  what makes leaving without one a legitimate way to finish.
+-->
+<script lang="ts">
+  import {
+    enrollPasskey,
+    hasNonPasskeyLoginMethod,
+    safeReturnPath,
+    type PasskeyAttachment,
+  } from '@seamless-auth/client';
+  import { onMount } from 'svelte';
+
+  import { getAuthNavigator, getSeamlessAuth } from '../context.js';
+  import AuthLayout from './AuthLayout.svelte';
+
+  const auth = getSeamlessAuth();
+  const navigator = getAuthNavigator();
+  // The OAuth callback hands over the caller's destination when the API asks for
+  // enrolment first. Without one, the configured signedInPath applies.
+  const returnTo = navigator.state().returnTo;
+  const finish = () =>
+    returnTo === undefined ? navigator.toApp() : navigator.toLocation(safeReturnPath(returnTo));
+
+  let status = $state<'idle' | 'loading' | 'success' | 'error'>('idle');
+  let message = $state('');
+
+  // With passkey as the only enabled method, a user who skipped would have no
+  // way back into the account they just made.
+  const canSkip = $derived(hasNonPasskeyLoginMethod(auth.loginMethods));
+  const busy = $derived(status === 'loading');
+
+  onMount(() => {
+    void auth.checkPasskeySupport();
+    void auth.loadLoginMethods();
+  });
+
+  async function register(attachment?: PasskeyAttachment) {
+    status = 'loading';
+
+    const { error } = await enrollPasskey(
+      { client: auth.client, refreshSession: auth.refreshSession },
+      attachment
+    );
+
+    if (error) {
+      status = 'error';
+      message = error;
+      return;
+    }
+
+    status = 'success';
+    message = 'Passkey registered successfully.';
+    await finish();
+  }
+
+  async function finishWithoutPasskey() {
+    await auth.refreshSession();
+    await finish();
+  }
+</script>
+
+<AuthLayout>
+  {#if auth.passkeySupportLoading || auth.loginMethodsLoading}
+    <div class="sa-center">
+      <div class="sa-spinner" aria-hidden="true"></div>
+      <span>Checking for Passkey Support...</span>
+    </div>
+  {:else if !auth.passkeySupported}
+    <h2 class="sa-heading">Passkeys are not available here</h2>
+    <p class="sa-description">
+      {canSkip
+        ? 'This device does not support passkeys. You can continue without one and add a passkey later from a device that does.'
+        : 'This device does not support passkeys, and this application requires one to sign in. Try again from a device or browser that supports them.'}
+    </p>
+    {#if canSkip}
+      <button type="button" class="sa-button" onclick={finishWithoutPasskey}>Continue</button>
+    {/if}
+  {:else}
+    <h2 class="sa-heading">Secure Your Account with a Passkey</h2>
+    <p class="sa-description">
+      Your device supports passkeys! Register one to skip passwords forever.
+    </p>
+    <button type="button" class="sa-button" disabled={busy} onclick={() => register()}>
+      {busy ? 'Registering...' : 'Register Passkey'}
+    </button>
+    <button
+      type="button"
+      class="sa-secondary"
+      disabled={busy}
+      onclick={() => register('cross-platform')}
+    >
+      Use a security key instead
+    </button>
+    {#if message}
+      <p class={status === 'success' ? 'sa-success' : 'sa-error'} role="status">{message}</p>
+    {/if}
+    {#if canSkip}
+      <button type="button" class="sa-link" disabled={busy} onclick={finishWithoutPasskey}>
+        Skip for now
+      </button>
+    {/if}
+  {/if}
+</AuthLayout>

package/dist/screens/RegisterPasskey.svelte.d.ts

@@ -0,0 +1,3 @@
+declare const RegisterPasskey: import("svelte").Component<Record<string, never>, {}, "">;
+type RegisterPasskey = ReturnType<typeof RegisterPasskey>;
+export default RegisterPasskey;

package/dist/screens/VerifyMagicLink.svelte

@@ -0,0 +1,104 @@
+<!--
+  Copyright © 2026 Fells Code, LLC
+  Licensed under the Apache License, Version 2.0
+  See LICENSE file in the project root for full license information
+-->
+<!--
+  Where an emailed magic link lands. Verifies the link once, tells the tab that
+  asked for it, and signs this tab in too when the link was opened in the same
+  browser.
+-->
+<script module lang="ts">
+  // Tokens this page has already spent. A link can be used once, and a screen
+  // that mounts again (a Back press, a wrapper that remounts) must not send it
+  // a second time.
+  const spent = new Set<string>();
+</script>
+
+<script lang="ts">
+  import { finishMagicLinkSignIn, type MagicLinkOutcome } from '@seamless-auth/client';
+  import { onMount } from 'svelte';
+
+  import { getAuthNavigator, getSeamlessAuth } from '../context.js';
+  import AuthLayout from './AuthLayout.svelte';
+
+  const auth = getSeamlessAuth();
+  const navigator = getAuthNavigator();
+  let outcome = $state<MagicLinkOutcome | null>(null);
+  let error = $state('');
+
+  // Browser only. A server render would spend the single-use link in a request
+  // that carries none of this browser's cookies.
+  onMount(() => {
+    let active = true;
+    let redirect: ReturnType<typeof setTimeout> | undefined;
+
+    void (async () => {
+      const token = navigator.query('token');
+
+      if (!token) {
+        error = 'Missing token for verification.';
+        return;
+      }
+
+      if (spent.has(token)) {
+        error = 'This sign-in link has already been used.';
+        return;
+      }
+      spent.add(token);
+
+      // The token is read; keep it out of history and Referers from here on.
+      void navigator.dropQuery().catch(() => undefined);
+
+      // A link can be used once, and a mounted screen verifies it once.
+      const result = await auth.client.verifyMagicLink(token);
+
+      if (!active) return;
+
+      if (result.error) {
+        error = 'Failed to verify token';
+        return;
+      }
+
+      const next = await finishMagicLinkSignIn({
+        client: auth.client,
+        refreshSession: auth.refreshSession,
+      });
+
+      if (!active) return;
+
+      outcome = next;
+
+      if (next === 'signed-in') {
+        redirect = setTimeout(() => void navigator.toApp(), 900);
+      }
+    })();
+
+    return () => {
+      active = false;
+      clearTimeout(redirect);
+    };
+  });
+</script>
+
+<AuthLayout>
+  <div class="sa-center">
+    <h1 class="sa-heading">Verifying your login</h1>
+
+    {#if !outcome && !error}
+      <div class="sa-spinner" aria-hidden="true"></div>
+      <p class="sa-helper-text">Please wait while we securely verify your sign-in link.</p>
+    {/if}
+    {#if outcome === 'signed-in'}
+      <p class="sa-success" role="status">Login verified. Redirecting...</p>
+    {/if}
+    {#if outcome === 'elsewhere'}
+      <p class="sa-success" role="status">
+        Login verified. Return to the device where you requested this link to continue.
+      </p>
+    {/if}
+    {#if error}
+      <p class="sa-error" role="alert">{error}</p>
+    {/if}
+  </div>
+</AuthLayout>

package/dist/screens/VerifyMagicLink.svelte.d.ts

@@ -0,0 +1,3 @@
+declare const VerifyMagicLink: import("svelte").Component<Record<string, never>, {}, "">;
+type VerifyMagicLink = ReturnType<typeof VerifyMagicLink>;
+export default VerifyMagicLink;

package/dist/screens/VerifyOtp.svelte

@@ -0,0 +1,141 @@
+<!--
+  Copyright © 2026 Fells Code, LLC
+  Licensed under the Apache License, Version 2.0
+  See LICENSE file in the project root for full license information
+-->
+<!--
+  Checks a one-time code sent by email or text message. The previous screen's
+  navigation state says whether this is a sign-in (flow: 'login') or a
+  registration.
+-->
+<script lang="ts">
+  import {
+    formatCountdown,
+    OTP_LENGTH,
+    OTP_LIFETIME_SECONDS,
+    otpResendFailedMessage,
+    requestOtp,
+    verifyOtp,
+    type OtpChannel,
+  } from '@seamless-auth/client';
+  import { onMount } from 'svelte';
+
+  import { getAuthNavigator, getSeamlessAuth } from '../context.js';
+  import AuthLayout from './AuthLayout.svelte';
+  import OtpInput from './OtpInput.svelte';
+
+  let { channel = 'email' }: { channel?: OtpChannel } = $props();
+
+  const COPY = {
+    email: {
+      title: 'Verify Your Email',
+      subtitle: 'We sent you a verification email. Enter the code below.',
+      label: 'Email Verification Code',
+      resend: 'Resend code to email',
+      resent: 'Verification email has been resent.',
+    },
+    phone: {
+      title: 'Verify Your Phone Number',
+      subtitle: 'Enter the code sent to your phone number.',
+      label: 'Phone Verification Code',
+      resend: 'Resend code to phone',
+      resent: 'Verification SMS has been resent.',
+    },
+  } as const;
+
+  const auth = getSeamlessAuth();
+  const navigator = getAuthNavigator();
+  const flow = navigator.state().flow === 'login' ? 'login' : 'register';
+
+  const copy = $derived(COPY[channel]);
+  let code = $state('');
+  let error = $state('');
+  let resendMessage = $state('');
+  let loading = $state(false);
+  let secondsLeft = $state(OTP_LIFETIME_SECONDS);
+
+  onMount(() => {
+    // The registration screen offers passkey enrolment next, which needs this.
+    if (channel === 'email') void auth.checkPasskeySupport();
+
+    const timer = setInterval(() => {
+      secondsLeft = Math.max(0, secondsLeft - 1);
+    }, 1000);
+    return () => clearInterval(timer);
+  });
+
+  async function resend() {
+    error = '';
+    resendMessage = '';
+
+    const result = await requestOtp(auth.client, channel, flow);
+
+    if (result.error) {
+      error = otpResendFailedMessage(channel);
+      return;
+    }
+
+    resendMessage = copy.resent;
+  }
+
+  async function submit(event: SubmitEvent) {
+    event.preventDefault();
+    if (loading) return;
+    error = '';
+    loading = true;
+
+    try {
+      const passkeySupported = channel === 'email' ? await auth.checkPasskeySupport() : false;
+
+      const result = await verifyOtp(
+        { client: auth.client, refreshSession: auth.refreshSession },
+        { channel, flow, code, passkeySupported }
+      );
+
+      if (result.error !== null) {
+        error = result.error;
+        return;
+      }
+
+      if (result.next === 'register_passkey') await navigator.toScreen('registerPasskey');
+      else if (result.next === 'verify_email') await navigator.toScreen('verifyEmailOtp');
+      else await navigator.toApp();
+    } catch {
+      // Backstop for unexpected errors only.
+      error = 'Verification failed.';
+    } finally {
+      loading = false;
+    }
+  }
+</script>
+
+<AuthLayout>
+  <h2 class="sa-heading">{copy.title}</h2>
+  <p class="sa-subtitle">{copy.subtitle}</p>
+
+  {#if error}
+    <p class="sa-error">{error}</p>
+  {/if}
+  {#if resendMessage}
+    <p class="sa-success">{resendMessage}</p>
+  {/if}
+
+  <form onsubmit={submit}>
+    <div>
+      <span class="sa-label">
+        {copy.label}
+        <span class="sa-timer">(code expires in {formatCountdown(secondsLeft)})</span>
+      </span>
+      <OtpInput bind:value={code} length={OTP_LENGTH} mode={channel === 'email' ? 'text' : 'numeric'} />
+      <button type="button" class="sa-link" onclick={resend}>{copy.resend}</button>
+    </div>
+
+    <button type="submit" class="sa-button" disabled={loading}>
+      {loading ? 'Verifying...' : 'Verify & Continue'}
+    </button>
+
+    <button type="button" class="sa-link" onclick={() => navigator.toScreen('login')}>
+      Back to login
+    </button>
+  </form>
+</AuthLayout>

package/dist/screens/VerifyOtp.svelte.d.ts

@@ -0,0 +1,7 @@
+import { type OtpChannel } from '@seamless-auth/client';
+type $$ComponentProps = {
+    channel?: OtpChannel;
+};
+declare const VerifyOtp: import("svelte").Component<$$ComponentProps, {}, "">;
+type VerifyOtp = ReturnType<typeof VerifyOtp>;
+export default VerifyOtp;