@sentropic/auth-ui 0.2.0

package/src/components/AuthLogin.svelte

@@ -0,0 +1,222 @@
+<script lang="ts">
+  import { onMount } from 'svelte';
+  import {
+    createDefaultAuthUiLabels,
+    type AuthUiError,
+    type AuthUiLabels,
+    type AuthUiSession,
+    type AuthUiTransport,
+  } from '../contracts.js';
+  import {
+    isWebAuthnSupported,
+    startPasskeyAuthentication,
+    getWebAuthnErrorMessage,
+  } from '../webauthn.js';
+
+  interface Props {
+    transport: AuthUiTransport;
+    labels?: Partial<AuthUiLabels>;
+    onLoggedIn: (session: AuthUiSession) => void | Promise<void>;
+    onLostDevice?: () => void;
+    onError?: (error: AuthUiError) => void;
+  }
+
+  let { transport, labels, onLoggedIn, onLostDevice, onError }: Props = $props();
+
+  const resolvedLabels = $derived(createDefaultAuthUiLabels(labels ?? {}));
+
+  let loading = $state(false);
+  let error = $state('');
+  let webauthnSupported = $state(false);
+  let showLostDevice = $state(false);
+
+  onMount(() => {
+    webauthnSupported = isWebAuthnSupported();
+    if (!webauthnSupported) {
+      error = resolvedLabels.loginUnsupportedBrowser;
+    }
+  });
+
+  async function handleLogin(): Promise<void> {
+    loading = true;
+    error = '';
+    try {
+      const optionsResult = await transport.createPasskeyAuthenticationOptions({});
+      if (!optionsResult.ok) {
+        error = optionsResult.error.message;
+        onError?.(optionsResult.error);
+        loading = false;
+        return;
+      }
+
+      let credential;
+      try {
+        credential = await startPasskeyAuthentication(optionsResult.value.options);
+      } catch (err) {
+        const authError = err as AuthUiError;
+        error = getWebAuthnErrorMessage(authError, resolvedLabels);
+        onError?.(authError);
+        loading = false;
+        return;
+      }
+
+      const verifyResult = await transport.verifyPasskeyAuthentication({ credential });
+      if (!verifyResult.ok) {
+        error = verifyResult.error.message;
+        onError?.(verifyResult.error);
+        loading = false;
+        return;
+      }
+
+      await onLoggedIn(verifyResult.value);
+    } finally {
+      loading = false;
+    }
+  }
+
+  function handleLostDevice(): void {
+    showLostDevice = true;
+    onLostDevice?.();
+  }
+</script>
+
+<div class="auth-ui-login">
+  <header class="auth-ui-header">
+    <h2 class="auth-ui-title">{resolvedLabels.loginTitle}</h2>
+    <p class="auth-ui-subtitle">
+      {webauthnSupported ? resolvedLabels.loginSupportedHint : resolvedLabels.loginUnavailable}
+    </p>
+  </header>
+
+  {#if !webauthnSupported}
+    <div class="auth-ui-alert auth-ui-alert--error" role="alert">{error}</div>
+  {:else if !showLostDevice}
+    <div class="auth-ui-section">
+      {#if error}
+        <div class="auth-ui-alert auth-ui-alert--error" role="alert">{error}</div>
+      {/if}
+      <button
+        type="button"
+        class="auth-ui-button auth-ui-button--primary"
+        onclick={handleLogin}
+        disabled={loading}
+      >
+        {loading ? resolvedLabels.loginButtonLoading : resolvedLabels.loginButton}
+      </button>
+      <div class="auth-ui-actions">
+        <button type="button" class="auth-ui-link" onclick={handleLostDevice}>
+          {resolvedLabels.loginLostDevice}
+        </button>
+      </div>
+      <div class="auth-ui-actions">
+        <slot name="no-account">
+          <span class="auth-ui-link">{resolvedLabels.loginNoAccount}</span>
+        </slot>
+      </div>
+    </div>
+  {:else}
+    <div class="auth-ui-section">
+      <div class="auth-ui-alert auth-ui-alert--info" role="status">
+        <h3 class="auth-ui-alert__title">{resolvedLabels.loginLostDeviceTitle}</h3>
+        <p>{resolvedLabels.webauthnRegisterNotice}</p>
+      </div>
+      <div class="auth-ui-actions">
+        <slot name="register-new-device">
+          <span class="auth-ui-link">{resolvedLabels.loginRegisterNewDevice}</span>
+        </slot>
+      </div>
+      <div class="auth-ui-actions">
+        <button type="button" class="auth-ui-link auth-ui-link--secondary" onclick={() => (showLostDevice = false)}>
+          {resolvedLabels.loginBackToLogin}
+        </button>
+      </div>
+    </div>
+  {/if}
+</div>
+
+<style>
+  .auth-ui-login {
+    display: flex;
+    flex-direction: column;
+    gap: 1.5rem;
+    max-width: 28rem;
+    margin: 0 auto;
+    padding: 2rem 1rem;
+    font-family: var(--auth-font-family, system-ui, -apple-system, sans-serif);
+    color: var(--auth-text, #111827);
+  }
+  .auth-ui-header {
+    text-align: center;
+  }
+  .auth-ui-title {
+    margin: 0 0 0.5rem;
+    font-size: 1.5rem;
+    font-weight: 700;
+  }
+  .auth-ui-subtitle {
+    margin: 0;
+    font-size: 0.875rem;
+    color: var(--auth-muted, #6b7280);
+  }
+  .auth-ui-section {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+  }
+  .auth-ui-actions {
+    text-align: center;
+  }
+  .auth-ui-alert {
+    padding: 0.75rem 1rem;
+    border-radius: var(--auth-radius, 0.375rem);
+    font-size: 0.875rem;
+  }
+  .auth-ui-alert--error {
+    background: var(--auth-error-bg, #fef2f2);
+    color: var(--auth-error-text, #991b1b);
+  }
+  .auth-ui-alert--info {
+    background: var(--auth-info-bg, #eff6ff);
+    color: var(--auth-info-text, #1e3a8a);
+  }
+  .auth-ui-alert__title {
+    margin: 0 0 0.25rem;
+    font-size: 0.95rem;
+    font-weight: 600;
+  }
+  .auth-ui-button {
+    width: 100%;
+    padding: 0.625rem 1rem;
+    border: none;
+    border-radius: var(--auth-radius, 0.375rem);
+    font-size: 0.875rem;
+    font-weight: 500;
+    cursor: pointer;
+  }
+  .auth-ui-button:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+  .auth-ui-button--primary {
+    background: var(--auth-primary, #4f46e5);
+    color: var(--auth-primary-text, #ffffff);
+  }
+  .auth-ui-button--primary:hover:not(:disabled) {
+    background: var(--auth-primary-hover, #4338ca);
+  }
+  .auth-ui-link {
+    background: none;
+    border: none;
+    color: var(--auth-link, #4f46e5);
+    cursor: pointer;
+    font-size: 0.875rem;
+    font-weight: 500;
+    text-decoration: none;
+  }
+  .auth-ui-link:hover {
+    text-decoration: underline;
+  }
+  .auth-ui-link--secondary {
+    color: var(--auth-link-secondary, #6b7280);
+  }
+</style>

package/src/components/AuthLogin.svelte.d.ts

@@ -0,0 +1,18 @@
+import type { Component } from 'svelte';
+import type {
+  AuthUiError,
+  AuthUiLabels,
+  AuthUiSession,
+  AuthUiTransport,
+} from '../contracts.js';
+
+export interface AuthLoginProps {
+  transport: AuthUiTransport;
+  labels?: Partial<AuthUiLabels>;
+  onLoggedIn: (session: AuthUiSession) => void | Promise<void>;
+  onLostDevice?: () => void;
+  onError?: (error: AuthUiError) => void;
+}
+
+declare const AuthLogin: Component<AuthLoginProps>;
+export default AuthLogin;

package/src/components/AuthMagicLinkVerify.svelte

@@ -0,0 +1,165 @@
+<script lang="ts">
+  import { onMount } from 'svelte';
+  import {
+    createAuthUiError,
+    createDefaultAuthUiLabels,
+    type AuthUiError,
+    type AuthUiLabels,
+    type AuthUiSession,
+    type AuthUiTransport,
+  } from '../contracts.js';
+
+  interface Props {
+    transport: AuthUiTransport;
+    labels?: Partial<AuthUiLabels>;
+    /** Function the host supplies to read the token from its router/URL. */
+    tokenSource: () => string | null | undefined;
+    onVerified: (session: AuthUiSession) => void | Promise<void>;
+    /** Optional callback the host can use to drive its own redirect (e.g. to /dashboard). */
+    onRedirect?: () => void;
+    onError?: (error: AuthUiError) => void;
+    /** Delay before invoking onRedirect after a successful verify. Defaults to 1000 ms. */
+    redirectDelayMs?: number;
+  }
+
+  let {
+    transport,
+    labels,
+    tokenSource,
+    onVerified,
+    onRedirect,
+    onError,
+    redirectDelayMs = 1000,
+  }: Props = $props();
+
+  const resolvedLabels = $derived(createDefaultAuthUiLabels(labels ?? {}));
+
+  let loading = $state(true);
+  let success = $state(false);
+  let error = $state('');
+
+  onMount(async () => {
+    const token = tokenSource()?.trim();
+    if (!token) {
+      const missing = createAuthUiError('invalid_input', resolvedLabels.magicLinkErrorMissingToken);
+      error = missing.message;
+      onError?.(missing);
+      loading = false;
+      return;
+    }
+
+    const result = await transport.verifyMagicLink({ token });
+    loading = false;
+
+    if (!result.ok) {
+      error = result.error.message || resolvedLabels.magicLinkErrorVerifyFailed;
+      onError?.(result.error);
+      return;
+    }
+
+    success = true;
+    await onVerified(result.value);
+    if (onRedirect) {
+      setTimeout(onRedirect, redirectDelayMs);
+    }
+  });
+</script>
+
+<div class="auth-ui-magic-link">
+  <header class="auth-ui-header">
+    <h2 class="auth-ui-title">{resolvedLabels.magicLinkTitle}</h2>
+  </header>
+
+  {#if loading && !error}
+    <div class="auth-ui-loading" role="status">
+      <div class="auth-ui-spinner" aria-hidden="true"></div>
+      <p class="auth-ui-loading__label">{resolvedLabels.magicLinkVerifying}</p>
+    </div>
+  {:else if success}
+    <div class="auth-ui-alert auth-ui-alert--success" role="status">
+      <h3 class="auth-ui-alert__title">{resolvedLabels.magicLinkSuccessTitle}</h3>
+      <p>{resolvedLabels.redirectingDashboard}</p>
+    </div>
+  {:else if error}
+    <div class="auth-ui-alert auth-ui-alert--error" role="alert">
+      <h3 class="auth-ui-alert__title">{resolvedLabels.magicLinkErrorTitle}</h3>
+      <p>{error}</p>
+    </div>
+    <div class="auth-ui-actions">
+      <slot name="back-to-login">
+        <span class="auth-ui-link">{resolvedLabels.magicLinkBackToLogin}</span>
+      </slot>
+    </div>
+  {/if}
+</div>
+
+<style>
+  .auth-ui-magic-link {
+    display: flex;
+    flex-direction: column;
+    gap: 1.5rem;
+    max-width: 28rem;
+    margin: 0 auto;
+    padding: 2rem 1rem;
+    font-family: var(--auth-font-family, system-ui, -apple-system, sans-serif);
+    color: var(--auth-text, #111827);
+  }
+  .auth-ui-header {
+    text-align: center;
+  }
+  .auth-ui-title {
+    margin: 0;
+    font-size: 1.5rem;
+    font-weight: 700;
+  }
+  .auth-ui-loading {
+    text-align: center;
+  }
+  .auth-ui-spinner {
+    display: inline-block;
+    width: 3rem;
+    height: 3rem;
+    border: 2px solid transparent;
+    border-bottom-color: var(--auth-primary, #4f46e5);
+    border-radius: 50%;
+    animation: auth-ui-spin 0.75s linear infinite;
+  }
+  .auth-ui-loading__label {
+    margin-top: 1rem;
+    font-size: 0.875rem;
+    color: var(--auth-muted, #6b7280);
+  }
+  @keyframes auth-ui-spin {
+    to { transform: rotate(360deg); }
+  }
+  .auth-ui-alert {
+    padding: 1rem;
+    border-radius: var(--auth-radius, 0.375rem);
+    font-size: 0.875rem;
+  }
+  .auth-ui-alert--error {
+    background: var(--auth-error-bg, #fef2f2);
+    color: var(--auth-error-text, #991b1b);
+  }
+  .auth-ui-alert--success {
+    background: var(--auth-success-bg, #f0fdf4);
+    color: var(--auth-success-text, #166534);
+  }
+  .auth-ui-alert__title {
+    margin: 0 0 0.5rem;
+    font-size: 0.95rem;
+    font-weight: 600;
+  }
+  .auth-ui-actions {
+    text-align: center;
+  }
+  .auth-ui-link {
+    color: var(--auth-link, #4f46e5);
+    font-size: 0.875rem;
+    font-weight: 500;
+    text-decoration: none;
+  }
+  .auth-ui-link:hover {
+    text-decoration: underline;
+  }
+</style>

package/src/components/AuthMagicLinkVerify.svelte.d.ts

@@ -0,0 +1,20 @@
+import type { Component } from 'svelte';
+import type {
+  AuthUiError,
+  AuthUiLabels,
+  AuthUiSession,
+  AuthUiTransport,
+} from '../contracts.js';
+
+export interface AuthMagicLinkVerifyProps {
+  transport: AuthUiTransport;
+  labels?: Partial<AuthUiLabels>;
+  tokenSource: () => string | null | undefined;
+  onVerified: (session: AuthUiSession) => void | Promise<void>;
+  onRedirect?: () => void;
+  onError?: (error: AuthUiError) => void;
+  redirectDelayMs?: number;
+}
+
+declare const AuthMagicLinkVerify: Component<AuthMagicLinkVerifyProps>;
+export default AuthMagicLinkVerify;