@authon/svelte 0.2.1 → 0.3.1

package/README.ko.md

@@ -0,0 +1,50 @@
+[English](./README.md) | **한국어**
+
+# @authon/svelte
+
+> Svelte 인증 -- 반응형 스토어 -- 셀프 호스팅 Clerk 대안
+
+## 설치
+
+```bash
+npm install @authon/svelte
+```
+
+## 빠른 시작
+
+```svelte
+<!-- +layout.svelte -->
+<script lang="ts">
+  import { initAuthon } from '@authon/svelte';
+  import { onDestroy } from 'svelte';
+  const authon = initAuthon('pk_live_...', { apiUrl: 'https://your-authon-server.com' });
+  onDestroy(() => authon.destroy());
+</script>
+<slot />
+```
+
+```svelte
+<!-- +page.svelte -->
+<script lang="ts">
+  import { getAuthon } from '@authon/svelte';
+  const { user, isSignedIn, openSignIn, signOut } = getAuthon();
+</script>
+
+{#if $isSignedIn}
+  <p>환영합니다, {$user?.displayName}</p>
+  <button on:click={signOut}>로그아웃</button>
+{:else}
+  <button on:click={openSignIn}>로그인</button>
+{/if}
+```
+
+## 환경 변수
+
+| 변수 | 필수 | 설명 |
+|------|------|------|
+| `PUBLIC_AUTHON_API_URL` | Yes | Authon 서버 URL |
+| `PUBLIC_AUTHON_PUBLISHABLE_KEY` | Yes | 퍼블리셔블 키 |
+
+## 라이선스
+
+MIT

package/README.md

@@ -1,94 +1,204 @@
+**English** | [한국어](./README.ko.md)
+
 # @authon/svelte
 
-Svelte SDK for [Authon](https://authon.dev) — stores, actions, and components.
+> Drop-in Svelte authentication with reactive stores — self-hosted Clerk alternative, Auth0 alternative
+
+[![npm version](https://img.shields.io/npm/v/@authon/svelte?color=6d28d9)](https://www.npmjs.com/package/@authon/svelte)
+[![License](https://img.shields.io/badge/license-MIT-blue)](../../LICENSE)
+
+## Prerequisites
+
+Before installing the SDK, create an Authon project and get your API keys:
+
+1. **Create a project** at [Authon Dashboard](https://authon.dev/dashboard/overview)
+   - Click "Create Project" and enter your app name
+   - Select the authentication methods you want (Email/Password, OAuth providers, etc.)
+
+2. **Get your API keys** from Project Settings → API Keys
+   - **Publishable Key** (`pk_live_...` or `pk_test_...`) — safe to use in client-side code
+   - **Secret Key** (`sk_live_...` or `sk_test_...`) — server-side only, never expose to clients
+
+3. **Configure OAuth providers** (optional) in Project Settings → OAuth
+   - Add Google, Apple, GitHub, etc. with their respective Client ID and Secret
+   - Set the redirect URL to `https://api.authon.dev/v1/auth/oauth/redirect`
+
+> **Test vs Live keys:** Use `pk_test_...` during development. Switch to `pk_live_...` before deploying to production. Test keys use a sandbox environment with no rate limits.
 
 ## Install
 
 ```bash
 npm install @authon/svelte
-# or
-pnpm add @authon/svelte
 ```
 
-Requires `svelte >= 4.0.0`.
-
 ## Quick Start
 
-### 1. Initialize
+```svelte
+<!-- src/routes/+layout.svelte -->
+<script lang="ts">
+  import { initAuthon } from '@authon/svelte';
+  import { onDestroy } from 'svelte';
 
-```ts
-// src/lib/authon.ts
-import { initAuthon } from '@authon/svelte';
+  const authon = initAuthon('pk_live_YOUR_PUBLISHABLE_KEY', {
+    apiUrl: 'https://your-authon-server.com',
+    theme: 'auto',
+  });
 
-export const authon = initAuthon({
-  publishableKey: 'pk_live_...',
-});
-```
+  onDestroy(() => authon.destroy());
+</script>
 
-### 2. Use Stores
+<slot />
+```
 
 ```svelte
-<script>
-  import { user, isSignedIn, isLoading } from '@authon/svelte';
-  import { openSignIn, signOut } from '@authon/svelte';
+<!-- src/routes/+page.svelte -->
+<script lang="ts">
+  import { getAuthon } from '@authon/svelte';
+  const { user, isSignedIn, isLoading, openSignIn, signOut } = getAuthon();
 </script>
 
 {#if $isLoading}
   <p>Loading...</p>
 {:else if $isSignedIn}
   <p>Welcome, {$user?.displayName}</p>
-  <button on:click={signOut}>Sign Out</button>
+  <button on:click={signOut}>Sign out</button>
 {:else}
-  <button on:click={openSignIn}>Sign In</button>
+  <button on:click={openSignIn}>Sign in</button>
 {/if}
 ```
 
-### 3. Use Components
+## Common Tasks
+
+### Add Google OAuth Login
 
 ```svelte
-<script>
-  import { SignedIn, SignedOut, UserButton } from '@authon/svelte';
+<script lang="ts">
+  import { getAuthon } from '@authon/svelte';
+  const { client } = getAuthon();
 </script>
 
-<SignedIn>
-  <UserButton />
-</SignedIn>
-<SignedOut>
-  <button on:click={openSignIn}>Sign In</button>
-</SignedOut>
+<button on:click={() => client.signInWithOAuth('google')}>Sign in with Google</button>
 ```
 
-## API Reference
+### Protect a Route
+
+```svelte
+<!-- src/routes/dashboard/+page.svelte -->
+<script lang="ts">
+  import { getAuthon } from '@authon/svelte';
+  import { goto } from '$app/navigation';
+  import { onMount } from 'svelte';
+
+  const { isSignedIn, isLoading } = getAuthon();
+
+  onMount(() => {
+    if (!$isLoading && !$isSignedIn) goto('/sign-in');
+  });
+</script>
+
+{#if $isSignedIn}
+  <h1>Dashboard</h1>
+{/if}
+```
 
-### Stores
+### Get Current User
 
-| Store | Type | Description |
-|-------|------|-------------|
-| `user` | `Readable<AuthonUser \| null>` | Current user |
-| `isSignedIn` | `Readable<boolean>` | Whether the user is signed in |
-| `isLoading` | `Readable<boolean>` | Whether auth state is loading |
+```svelte
+<script lang="ts">
+  import { getAuthon } from '@authon/svelte';
+  const { user, isLoading } = getAuthon();
+</script>
 
-### Actions
+{#if $isLoading}
+  <p>Loading...</p>
+{:else if $user}
+  <p>Email: {$user.email}</p>
+  <p>Name: {$user.displayName}</p>
+{:else}
+  <p>Not signed in</p>
+{/if}
+```
 
-| Function | Returns | Description |
-|----------|---------|-------------|
-| `openSignIn()` | `Promise<void>` | Open sign-in modal |
-| `openSignUp()` | `Promise<void>` | Open sign-up modal |
-| `signOut()` | `Promise<void>` | Sign out |
-| `getToken()` | `string \| null` | Get current access token |
+### Add Email/Password Auth
 
-### Components
+```svelte
+<script lang="ts">
+  import { getAuthon } from '@authon/svelte';
+  const { client } = getAuthon();
+  let email = '';
+  let password = '';
+
+  async function handleSignIn() {
+    await client.signInWithEmail(email, password);
+  }
+</script>
 
-| Component | Description |
-|-----------|-------------|
-| `<SignedIn>` | Renders slot only when signed in |
-| `<SignedOut>` | Renders slot only when signed out |
-| `<UserButton>` | Avatar dropdown with sign-out |
+<form on:submit|preventDefault={handleSignIn}>
+  <input bind:value={email} type="email" placeholder="Email" />
+  <input bind:value={password} type="password" placeholder="Password" />
+  <button type="submit">Sign in</button>
+</form>
+```
+
+### Handle Sign Out
+
+```svelte
+<script lang="ts">
+  import { getAuthon } from '@authon/svelte';
+  const { signOut } = getAuthon();
+</script>
 
-## Documentation
+<button on:click={signOut}>Sign Out</button>
+```
+
+## Environment Variables
+
+| Variable | Required | Description |
+|----------|----------|-------------|
+| `PUBLIC_AUTHON_API_URL` | Yes | Your Authon server URL |
+| `PUBLIC_AUTHON_PUBLISHABLE_KEY` | Yes | Project publishable key |
+
+## API Reference
 
-[authon.dev/docs](https://authon.dev/docs)
+### Setup
+
+| Function | Description |
+|----------|-------------|
+| `initAuthon(key, config?)` | Create store and set in Svelte context (call in root layout) |
+| `getAuthon()` | Get `AuthonStore` from context (call in child components) |
+| `createAuthonStore(key, config?)` | Low-level store factory (without context) |
+
+### AuthonStore
+
+| Property / Method | Type |
+|-------------------|------|
+| `user` | `Readable<AuthonUser \| null>` |
+| `isSignedIn` | `Readable<boolean>` |
+| `isLoading` | `Readable<boolean>` |
+| `client` | `Authon` |
+| `signOut()` | `Promise<void>` |
+| `openSignIn()` | `Promise<void>` |
+| `openSignUp()` | `Promise<void>` |
+| `getToken()` | `string \| null` |
+| `web3GetNonce(...)` | Web3 nonce request |
+| `web3Verify(...)` | Web3 sign-in |
+| `passwordlessSendCode(...)` | Send magic link or OTP |
+| `passwordlessVerifyCode(...)` | Verify OTP |
+| `passkeyRegister(...)` | Register passkey |
+| `passkeyAuthenticate(...)` | Auth with passkey |
+| `destroy()` | Cleanup |
+
+## Comparison
+
+| Feature | Authon | Clerk | Auth.js |
+|---------|--------|-------|---------|
+| Self-hosted | Yes | No | Partial |
+| Pricing | Free | $25/mo+ | Free |
+| OAuth providers | 10+ | 20+ | 80+ |
+| ShadowDOM modal | Yes | No | No |
+| MFA/Passkeys | Yes | Yes | Plugin |
+| Web3 auth | Yes | No | No |
 
 ## License
 
-[MIT](../../LICENSE)
+MIT

package/dist/index.cjs

@@ -62,7 +62,21 @@ function createAuthonStore(publishableKey, config) {
     openSignUp: () => client.openSignUp(),
     getToken: () => client.getToken(),
     destroy: () => client.destroy(),
-    client
+    client,
+    // Web3
+    web3GetNonce: (address, chain, walletType, chainId) => client.web3GetNonce(address, chain, walletType, chainId),
+    web3Verify: (message, signature, address, chain, walletType) => client.web3Verify(message, signature, address, chain, walletType),
+    web3LinkWallet: (params) => client.linkWallet(params),
+    web3UnlinkWallet: (walletId) => client.unlinkWallet(walletId),
+    web3GetWallets: () => client.listWallets(),
+    // Passwordless
+    passwordlessSendCode: (email, type = "otp") => type === "magic-link" ? client.sendMagicLink(email) : client.sendEmailOtp(email),
+    passwordlessVerifyCode: (email, code) => client.verifyPasswordless({ email, code }),
+    // Passkeys
+    passkeyRegister: (name) => client.registerPasskey(name),
+    passkeyAuthenticate: (email) => client.authenticateWithPasskey(email),
+    passkeyList: () => client.listPasskeys(),
+    passkeyDelete: (credentialId) => client.revokePasskey(credentialId)
   };
 }
 

package/dist/index.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.ts","../src/store.ts","../src/context.ts","../src/SocialButtons.ts"],"sourcesContent":["export { createAuthonStore } from './store';\nexport type { AuthonStore } from './store';\nexport { initAuthon, getAuthon } from './context';\nexport { renderSocialButtons } from './SocialButtons';\nexport type { SocialButtonsOptions } from './SocialButtons';\n","import { writable, derived, type Readable } from 'svelte/store';\nimport { Authon } from '@authon/js';\nimport type { AuthonConfig } from '@authon/js';\nimport type { AuthonUser } from '@authon/shared';\n\nexport interface AuthonStore {\n  user: Readable<AuthonUser | null>;\n  isSignedIn: Readable<boolean>;\n  isLoading: Readable<boolean>;\n  signOut: () => Promise<void>;\n  openSignIn: () => Promise<void>;\n  openSignUp: () => Promise<void>;\n  getToken: () => string | null;\n  destroy: () => void;\n  client: Authon;\n}\n\n/**\n * Creates an Authon store with reactive Svelte stores.\n *\n * Usage:\n * ```ts\n * import { createAuthonStore } from '@authon/svelte'\n *\n * const authon = createAuthonStore('pk_live_...')\n *\n * // In your component:\n * $: user = $authon.user\n * $: isSignedIn = $authon.isSignedIn\n * ```\n */\nexport function createAuthonStore(\n  publishableKey: string,\n  config?: Omit<AuthonConfig, 'mode'>,\n): AuthonStore {\n  const client = new Authon(publishableKey, config);\n  const userStore = writable<AuthonUser | null>(null);\n  const isLoadingStore = writable(true);\n\n  const isSignedIn = derived(userStore, ($user) => $user !== null);\n\n  client.on('signedIn', (user) => {\n    userStore.set(user as AuthonUser);\n    isLoadingStore.set(false);\n  });\n\n  client.on('signedOut', () => {\n    userStore.set(null);\n  });\n\n  client.on('error', () => {\n    isLoadingStore.set(false);\n  });\n\n  const existingUser = client.getUser();\n  if (existingUser) {\n    userStore.set(existingUser);\n  }\n  isLoadingStore.set(false);\n\n  return {\n    user: { subscribe: userStore.subscribe },\n    isSignedIn,\n    isLoading: { subscribe: isLoadingStore.subscribe },\n    signOut: async () => {\n      await client.signOut();\n      userStore.set(null);\n    },\n    openSignIn: () => client.openSignIn(),\n    openSignUp: () => client.openSignUp(),\n    getToken: () => client.getToken(),\n    destroy: () => client.destroy(),\n    client,\n  };\n}\n","import { setContext, getContext } from 'svelte';\nimport type { AuthonConfig } from '@authon/js';\nimport { createAuthonStore, type AuthonStore } from './store';\n\nconst AUTHON_CONTEXT_KEY = Symbol('authon');\n\n/**\n * Initialize Authon in a Svelte component tree.\n * Call this in your root layout or top-level component.\n *\n * Usage in +layout.svelte:\n * ```svelte\n * <script>\n *   import { initAuthon } from '@authon/svelte'\n *   const authon = initAuthon('pk_live_...')\n * </script>\n * ```\n */\nexport function initAuthon(\n  publishableKey: string,\n  config?: Omit<AuthonConfig, 'mode'>,\n): AuthonStore {\n  const store = createAuthonStore(publishableKey, config);\n  setContext(AUTHON_CONTEXT_KEY, store);\n  return store;\n}\n\n/**\n * Get the Authon store from Svelte context.\n * Must be called within a component tree where `initAuthon` was called.\n *\n * Usage:\n * ```svelte\n * <script>\n *   import { getAuthon } from '@authon/svelte'\n *   const { user, isSignedIn, signOut } = getAuthon()\n * </script>\n * ```\n */\nexport function getAuthon(): AuthonStore {\n  const store = getContext<AuthonStore | undefined>(AUTHON_CONTEXT_KEY);\n  if (!store) {\n    throw new Error('getAuthon() must be called within a component tree where initAuthon() was called.');\n  }\n  return store;\n}\n","import { PROVIDER_COLORS, PROVIDER_DISPLAY_NAMES, type OAuthProviderType } from '@authon/shared';\nimport { getProviderButtonConfig, type Authon } from '@authon/js';\n\nexport interface SocialButtonsOptions {\n  /** Authon client instance */\n  client: Authon;\n  /** Target container element */\n  container: HTMLElement;\n  /** Called after successful OAuth sign-in */\n  onSuccess?: () => void;\n  /** Called on OAuth error */\n  onError?: (error: Error) => void;\n  /** Compact mode — icon-only square buttons in a row (default: false) */\n  compact?: boolean;\n  /** Gap between buttons in px (default: 10, compact default: 12) */\n  gap?: number;\n  /** Custom labels per provider */\n  labels?: Partial<Record<OAuthProviderType, string>>;\n  /** Icon size (default: 20, compact default: 24) */\n  iconSize?: number;\n  /** Border radius in px (default: 10) */\n  borderRadius?: number;\n  /** Button height in px (default: 48) */\n  height?: number;\n  /** Button size for compact mode in px (default: 48) */\n  size?: number;\n}\n\n/**\n * Render social login buttons into a container element.\n *\n * Usage in +page.svelte:\n * ```svelte\n * <script>\n *   import { getAuthon } from '@authon/svelte'\n *   import { renderSocialButtons } from '@authon/svelte'\n *   import { onMount } from 'svelte'\n *\n *   const { client } = getAuthon()\n *   let container: HTMLElement\n *\n *   onMount(() => {\n *     const cleanup = renderSocialButtons({\n *       client,\n *       container,\n *       compact: true,\n *       onError: (err) => console.error(err),\n *     })\n *     return cleanup\n *   })\n * </script>\n *\n * <div bind:this={container}></div>\n * ```\n */\nexport function renderSocialButtons(options: SocialButtonsOptions): () => void {\n  const {\n    client,\n    container,\n    onSuccess,\n    onError,\n    compact = false,\n    gap,\n    labels,\n    iconSize,\n    borderRadius = 10,\n    height = 48,\n    size = 48,\n  } = options;\n\n  const resolvedGap = gap ?? (compact ? 12 : 10);\n  const resolvedIconSize = iconSize ?? (compact ? 24 : 20);\n  let loadingProvider: string | null = null;\n  let buttons: HTMLButtonElement[] = [];\n\n  const handleClick = async (provider: OAuthProviderType, btn: HTMLButtonElement) => {\n    if (loadingProvider) return;\n    loadingProvider = provider;\n    btn.innerHTML = '<span style=\"display:inline-block;width:16px;height:16px;border:2px solid currentColor;border-top-color:transparent;border-radius:50%;animation:authon-spin 0.6s linear infinite\"></span>';\n    buttons.forEach((b) => (b.disabled = true));\n\n    try {\n      await client.signInWithOAuth(provider);\n      onSuccess?.();\n    } catch (e: any) {\n      const error = e instanceof Error ? e : new Error(String(e));\n      onError?.(error);\n    } finally {\n      loadingProvider = null;\n      renderButtons(providers);\n    }\n  };\n\n  let providers: OAuthProviderType[] = [];\n\n  function renderButtons(providerList: OAuthProviderType[]) {\n    container.innerHTML = '';\n    buttons = [];\n\n    // Inject keyframe if not present\n    if (!document.getElementById('authon-spin-style')) {\n      const style = document.createElement('style');\n      style.id = 'authon-spin-style';\n      style.textContent = '@keyframes authon-spin{to{transform:rotate(360deg)}}';\n      document.head.appendChild(style);\n    }\n\n    const wrapper = document.createElement('div');\n    wrapper.style.display = 'flex';\n    wrapper.style.gap = `${resolvedGap}px`;\n\n    if (compact) {\n      wrapper.style.flexDirection = 'row';\n      wrapper.style.flexWrap = 'wrap';\n      wrapper.style.justifyContent = 'center';\n    } else {\n      wrapper.style.flexDirection = 'column';\n    }\n\n    for (const provider of providerList) {\n      const colors = PROVIDER_COLORS[provider] || { bg: '#333', text: '#fff' };\n      const displayName = PROVIDER_DISPLAY_NAMES[provider] || provider;\n      const config = getProviderButtonConfig(provider);\n      const iconSvg = config.iconSvg\n        .replace(/width=\"\\d+\"/, `width=\"${resolvedIconSize}\"`)\n        .replace(/height=\"\\d+\"/, `height=\"${resolvedIconSize}\"`);\n      const needsBorder = colors.bg.toLowerCase() === '#ffffff';\n\n      const btn = document.createElement('button');\n      btn.setAttribute('aria-label', `Sign in with ${displayName}`);\n      btn.style.display = 'flex';\n      btn.style.alignItems = 'center';\n      btn.style.justifyContent = 'center';\n      btn.style.border = needsBorder ? '1px solid #dadce0' : 'none';\n      btn.style.cursor = 'pointer';\n      btn.style.backgroundColor = colors.bg;\n      btn.style.color = colors.text;\n      btn.style.borderRadius = `${borderRadius}px`;\n      btn.style.transition = 'opacity 0.15s';\n      btn.style.fontFamily = 'inherit';\n\n      if (compact) {\n        btn.style.width = `${size}px`;\n        btn.style.height = `${size}px`;\n        btn.style.padding = '0';\n        btn.innerHTML = `<span style=\"display:flex;align-items:center\">${iconSvg}</span>`;\n      } else {\n        btn.style.width = '100%';\n        btn.style.height = `${height}px`;\n        btn.style.gap = '10px';\n        btn.style.paddingLeft = '16px';\n        btn.style.paddingRight = '16px';\n        const buttonLabel = labels?.[provider] ?? `Continue with ${displayName}`;\n        btn.innerHTML = `<span style=\"display:flex;align-items:center;flex-shrink:0\">${iconSvg}</span><span style=\"font-size:15px;font-weight:600;white-space:nowrap\">${buttonLabel}</span>`;\n      }\n\n      btn.addEventListener('click', () => handleClick(provider, btn));\n      btn.addEventListener('mouseenter', () => (btn.style.opacity = '0.85'));\n      btn.addEventListener('mouseleave', () => (btn.style.opacity = '1'));\n\n      buttons.push(btn);\n      wrapper.appendChild(btn);\n    }\n\n    container.appendChild(wrapper);\n  }\n\n  // Init\n  client.getProviders().then((p: OAuthProviderType[]) => {\n    providers = p;\n    if (providers.length > 0) {\n      renderButtons(providers);\n    }\n  });\n\n  // Cleanup\n  return () => {\n    container.innerHTML = '';\n    buttons = [];\n  };\n}\n"],"mappings":"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","names":["import_js"]}
+{"version":3,"sources":["../src/index.ts","../src/store.ts","../src/context.ts","../src/SocialButtons.ts"],"sourcesContent":["export { createAuthonStore } from './store';\nexport type { AuthonStore } from './store';\nexport { initAuthon, getAuthon } from './context';\nexport { renderSocialButtons } from './SocialButtons';\nexport type { SocialButtonsOptions } from './SocialButtons';\nexport type {\n  PasskeyCredential,\n  Web3Chain,\n  Web3NonceResponse,\n  Web3Wallet,\n  Web3WalletType,\n} from '@authon/shared';\n\n// Svelte components are exported as raw .svelte source for the consumer's compiler.\n// Import them directly:\n//   import SignIn from '@authon/svelte/SignIn.svelte'\n//   import SignUp from '@authon/svelte/SignUp.svelte'\n","import { writable, derived, type Readable } from 'svelte/store';\nimport { Authon } from '@authon/js';\nimport type { AuthonConfig } from '@authon/js';\nimport type {\n  AuthonUser,\n  PasskeyCredential,\n  Web3Chain,\n  Web3NonceResponse,\n  Web3Wallet,\n  Web3WalletType,\n} from '@authon/shared';\n\nexport interface AuthonStore {\n  user: Readable<AuthonUser | null>;\n  isSignedIn: Readable<boolean>;\n  isLoading: Readable<boolean>;\n  signOut: () => Promise<void>;\n  openSignIn: () => Promise<void>;\n  openSignUp: () => Promise<void>;\n  getToken: () => string | null;\n  destroy: () => void;\n  client: Authon;\n  // Web3\n  web3GetNonce: (address: string, chain: Web3Chain, walletType: Web3WalletType, chainId?: number) => Promise<Web3NonceResponse>;\n  web3Verify: (message: string, signature: string, address: string, chain: Web3Chain, walletType: Web3WalletType) => Promise<AuthonUser>;\n  web3LinkWallet: (params: { address: string; chain: Web3Chain; walletType: Web3WalletType; chainId?: number; message: string; signature: string }) => Promise<Web3Wallet>;\n  web3UnlinkWallet: (walletId: string) => Promise<void>;\n  web3GetWallets: () => Promise<Web3Wallet[]>;\n  // Passwordless\n  passwordlessSendCode: (email: string, type?: 'magic-link' | 'otp') => Promise<void>;\n  passwordlessVerifyCode: (email: string, code: string) => Promise<AuthonUser>;\n  // Passkeys\n  passkeyRegister: (name?: string) => Promise<PasskeyCredential>;\n  passkeyAuthenticate: (email?: string) => Promise<AuthonUser>;\n  passkeyList: () => Promise<PasskeyCredential[]>;\n  passkeyDelete: (credentialId: string) => Promise<void>;\n}\n\n/**\n * Creates an Authon store with reactive Svelte stores.\n *\n * Usage:\n * ```ts\n * import { createAuthonStore } from '@authon/svelte'\n *\n * const authon = createAuthonStore('pk_live_...')\n *\n * // In your component:\n * $: user = $authon.user\n * $: isSignedIn = $authon.isSignedIn\n * ```\n */\nexport function createAuthonStore(\n  publishableKey: string,\n  config?: Omit<AuthonConfig, 'mode'>,\n): AuthonStore {\n  const client = new Authon(publishableKey, config);\n  const userStore = writable<AuthonUser | null>(null);\n  const isLoadingStore = writable(true);\n\n  const isSignedIn = derived(userStore, ($user) => $user !== null);\n\n  client.on('signedIn', (user) => {\n    userStore.set(user as AuthonUser);\n    isLoadingStore.set(false);\n  });\n\n  client.on('signedOut', () => {\n    userStore.set(null);\n  });\n\n  client.on('error', () => {\n    isLoadingStore.set(false);\n  });\n\n  const existingUser = client.getUser();\n  if (existingUser) {\n    userStore.set(existingUser);\n  }\n  isLoadingStore.set(false);\n\n  return {\n    user: { subscribe: userStore.subscribe },\n    isSignedIn,\n    isLoading: { subscribe: isLoadingStore.subscribe },\n    signOut: async () => {\n      await client.signOut();\n      userStore.set(null);\n    },\n    openSignIn: () => client.openSignIn(),\n    openSignUp: () => client.openSignUp(),\n    getToken: () => client.getToken(),\n    destroy: () => client.destroy(),\n    client,\n    // Web3\n    web3GetNonce: (address, chain, walletType, chainId?) =>\n      client.web3GetNonce(address, chain, walletType, chainId),\n    web3Verify: (message, signature, address, chain, walletType) =>\n      client.web3Verify(message, signature, address, chain, walletType),\n    web3LinkWallet: (params) => client.linkWallet(params),\n    web3UnlinkWallet: (walletId) => client.unlinkWallet(walletId),\n    web3GetWallets: () => client.listWallets(),\n    // Passwordless\n    passwordlessSendCode: (email, type = 'otp') =>\n      type === 'magic-link' ? client.sendMagicLink(email) : client.sendEmailOtp(email),\n    passwordlessVerifyCode: (email, code) => client.verifyPasswordless({ email, code }),\n    // Passkeys\n    passkeyRegister: (name?) => client.registerPasskey(name),\n    passkeyAuthenticate: (email?) => client.authenticateWithPasskey(email),\n    passkeyList: () => client.listPasskeys(),\n    passkeyDelete: (credentialId) => client.revokePasskey(credentialId),\n  };\n}\n","import { setContext, getContext } from 'svelte';\nimport type { AuthonConfig } from '@authon/js';\nimport { createAuthonStore, type AuthonStore } from './store';\n\nconst AUTHON_CONTEXT_KEY = Symbol('authon');\n\n/**\n * Initialize Authon in a Svelte component tree.\n * Call this in your root layout or top-level component.\n *\n * Usage in +layout.svelte:\n * ```svelte\n * <script>\n *   import { initAuthon } from '@authon/svelte'\n *   const authon = initAuthon('pk_live_...')\n * </script>\n * ```\n */\nexport function initAuthon(\n  publishableKey: string,\n  config?: Omit<AuthonConfig, 'mode'>,\n): AuthonStore {\n  const store = createAuthonStore(publishableKey, config);\n  setContext(AUTHON_CONTEXT_KEY, store);\n  return store;\n}\n\n/**\n * Get the Authon store from Svelte context.\n * Must be called within a component tree where `initAuthon` was called.\n *\n * Usage:\n * ```svelte\n * <script>\n *   import { getAuthon } from '@authon/svelte'\n *   const { user, isSignedIn, signOut } = getAuthon()\n * </script>\n * ```\n */\nexport function getAuthon(): AuthonStore {\n  const store = getContext<AuthonStore | undefined>(AUTHON_CONTEXT_KEY);\n  if (!store) {\n    throw new Error('getAuthon() must be called within a component tree where initAuthon() was called.');\n  }\n  return store;\n}\n","import { PROVIDER_COLORS, PROVIDER_DISPLAY_NAMES, type OAuthProviderType } from '@authon/shared';\nimport { getProviderButtonConfig, type Authon } from '@authon/js';\n\nexport interface SocialButtonsOptions {\n  /** Authon client instance */\n  client: Authon;\n  /** Target container element */\n  container: HTMLElement;\n  /** Called after successful OAuth sign-in */\n  onSuccess?: () => void;\n  /** Called on OAuth error */\n  onError?: (error: Error) => void;\n  /** Compact mode — icon-only square buttons in a row (default: false) */\n  compact?: boolean;\n  /** Gap between buttons in px (default: 10, compact default: 12) */\n  gap?: number;\n  /** Custom labels per provider */\n  labels?: Partial<Record<OAuthProviderType, string>>;\n  /** Icon size (default: 20, compact default: 24) */\n  iconSize?: number;\n  /** Border radius in px (default: 10) */\n  borderRadius?: number;\n  /** Button height in px (default: 48) */\n  height?: number;\n  /** Button size for compact mode in px (default: 48) */\n  size?: number;\n}\n\n/**\n * Render social login buttons into a container element.\n *\n * Usage in +page.svelte:\n * ```svelte\n * <script>\n *   import { getAuthon } from '@authon/svelte'\n *   import { renderSocialButtons } from '@authon/svelte'\n *   import { onMount } from 'svelte'\n *\n *   const { client } = getAuthon()\n *   let container: HTMLElement\n *\n *   onMount(() => {\n *     const cleanup = renderSocialButtons({\n *       client,\n *       container,\n *       compact: true,\n *       onError: (err) => console.error(err),\n *     })\n *     return cleanup\n *   })\n * </script>\n *\n * <div bind:this={container}></div>\n * ```\n */\nexport function renderSocialButtons(options: SocialButtonsOptions): () => void {\n  const {\n    client,\n    container,\n    onSuccess,\n    onError,\n    compact = false,\n    gap,\n    labels,\n    iconSize,\n    borderRadius = 10,\n    height = 48,\n    size = 48,\n  } = options;\n\n  const resolvedGap = gap ?? (compact ? 12 : 10);\n  const resolvedIconSize = iconSize ?? (compact ? 24 : 20);\n  let loadingProvider: string | null = null;\n  let buttons: HTMLButtonElement[] = [];\n\n  const handleClick = async (provider: OAuthProviderType, btn: HTMLButtonElement) => {\n    if (loadingProvider) return;\n    loadingProvider = provider;\n    btn.innerHTML = '<span style=\"display:inline-block;width:16px;height:16px;border:2px solid currentColor;border-top-color:transparent;border-radius:50%;animation:authon-spin 0.6s linear infinite\"></span>';\n    buttons.forEach((b) => (b.disabled = true));\n\n    try {\n      await client.signInWithOAuth(provider);\n      onSuccess?.();\n    } catch (e: any) {\n      const error = e instanceof Error ? e : new Error(String(e));\n      onError?.(error);\n    } finally {\n      loadingProvider = null;\n      renderButtons(providers);\n    }\n  };\n\n  let providers: OAuthProviderType[] = [];\n\n  function renderButtons(providerList: OAuthProviderType[]) {\n    container.innerHTML = '';\n    buttons = [];\n\n    // Inject keyframe if not present\n    if (!document.getElementById('authon-spin-style')) {\n      const style = document.createElement('style');\n      style.id = 'authon-spin-style';\n      style.textContent = '@keyframes authon-spin{to{transform:rotate(360deg)}}';\n      document.head.appendChild(style);\n    }\n\n    const wrapper = document.createElement('div');\n    wrapper.style.display = 'flex';\n    wrapper.style.gap = `${resolvedGap}px`;\n\n    if (compact) {\n      wrapper.style.flexDirection = 'row';\n      wrapper.style.flexWrap = 'wrap';\n      wrapper.style.justifyContent = 'center';\n    } else {\n      wrapper.style.flexDirection = 'column';\n    }\n\n    for (const provider of providerList) {\n      const colors = PROVIDER_COLORS[provider] || { bg: '#333', text: '#fff' };\n      const displayName = PROVIDER_DISPLAY_NAMES[provider] || provider;\n      const config = getProviderButtonConfig(provider);\n      const iconSvg = config.iconSvg\n        .replace(/width=\"\\d+\"/, `width=\"${resolvedIconSize}\"`)\n        .replace(/height=\"\\d+\"/, `height=\"${resolvedIconSize}\"`);\n      const needsBorder = colors.bg.toLowerCase() === '#ffffff';\n\n      const btn = document.createElement('button');\n      btn.setAttribute('aria-label', `Sign in with ${displayName}`);\n      btn.style.display = 'flex';\n      btn.style.alignItems = 'center';\n      btn.style.justifyContent = 'center';\n      btn.style.border = needsBorder ? '1px solid #dadce0' : 'none';\n      btn.style.cursor = 'pointer';\n      btn.style.backgroundColor = colors.bg;\n      btn.style.color = colors.text;\n      btn.style.borderRadius = `${borderRadius}px`;\n      btn.style.transition = 'opacity 0.15s';\n      btn.style.fontFamily = 'inherit';\n\n      if (compact) {\n        btn.style.width = `${size}px`;\n        btn.style.height = `${size}px`;\n        btn.style.padding = '0';\n        btn.innerHTML = `<span style=\"display:flex;align-items:center\">${iconSvg}</span>`;\n      } else {\n        btn.style.width = '100%';\n        btn.style.height = `${height}px`;\n        btn.style.gap = '10px';\n        btn.style.paddingLeft = '16px';\n        btn.style.paddingRight = '16px';\n        const buttonLabel = labels?.[provider] ?? `Continue with ${displayName}`;\n        btn.innerHTML = `<span style=\"display:flex;align-items:center;flex-shrink:0\">${iconSvg}</span><span style=\"font-size:15px;font-weight:600;white-space:nowrap\">${buttonLabel}</span>`;\n      }\n\n      btn.addEventListener('click', () => handleClick(provider, btn));\n      btn.addEventListener('mouseenter', () => (btn.style.opacity = '0.85'));\n      btn.addEventListener('mouseleave', () => (btn.style.opacity = '1'));\n\n      buttons.push(btn);\n      wrapper.appendChild(btn);\n    }\n\n    container.appendChild(wrapper);\n  }\n\n  // Init\n  client.getProviders().then((p: OAuthProviderType[]) => {\n    providers = p;\n    if (providers.length > 0) {\n      renderButtons(providers);\n    }\n  });\n\n  // Cleanup\n  return () => {\n    container.innerHTML = '';\n    buttons = [];\n  };\n}\n"],"mappings":"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","names":["import_js"]}

package/dist/index.d.cts

@@ -1,6 +1,7 @@
 import { Readable } from 'svelte/store';
 import { Authon, AuthonConfig } from '@authon/js';
-import { AuthonUser, OAuthProviderType } from '@authon/shared';
+import { AuthonUser, Web3Chain, Web3WalletType, Web3NonceResponse, Web3Wallet, PasskeyCredential, OAuthProviderType } from '@authon/shared';
+export { PasskeyCredential, Web3Chain, Web3NonceResponse, Web3Wallet, Web3WalletType } from '@authon/shared';
 
 interface AuthonStore {
     user: Readable<AuthonUser | null>;
@@ -12,6 +13,24 @@ interface AuthonStore {
     getToken: () => string | null;
     destroy: () => void;
     client: Authon;
+    web3GetNonce: (address: string, chain: Web3Chain, walletType: Web3WalletType, chainId?: number) => Promise<Web3NonceResponse>;
+    web3Verify: (message: string, signature: string, address: string, chain: Web3Chain, walletType: Web3WalletType) => Promise<AuthonUser>;
+    web3LinkWallet: (params: {
+        address: string;
+        chain: Web3Chain;
+        walletType: Web3WalletType;
+        chainId?: number;
+        message: string;
+        signature: string;
+    }) => Promise<Web3Wallet>;
+    web3UnlinkWallet: (walletId: string) => Promise<void>;
+    web3GetWallets: () => Promise<Web3Wallet[]>;
+    passwordlessSendCode: (email: string, type?: 'magic-link' | 'otp') => Promise<void>;
+    passwordlessVerifyCode: (email: string, code: string) => Promise<AuthonUser>;
+    passkeyRegister: (name?: string) => Promise<PasskeyCredential>;
+    passkeyAuthenticate: (email?: string) => Promise<AuthonUser>;
+    passkeyList: () => Promise<PasskeyCredential[]>;
+    passkeyDelete: (credentialId: string) => Promise<void>;
 }
 /**
  * Creates an Authon store with reactive Svelte stores.

package/dist/index.d.ts

@@ -1,6 +1,7 @@
 import { Readable } from 'svelte/store';
 import { Authon, AuthonConfig } from '@authon/js';
-import { AuthonUser, OAuthProviderType } from '@authon/shared';
+import { AuthonUser, Web3Chain, Web3WalletType, Web3NonceResponse, Web3Wallet, PasskeyCredential, OAuthProviderType } from '@authon/shared';
+export { PasskeyCredential, Web3Chain, Web3NonceResponse, Web3Wallet, Web3WalletType } from '@authon/shared';
 
 interface AuthonStore {
     user: Readable<AuthonUser | null>;
@@ -12,6 +13,24 @@ interface AuthonStore {
     getToken: () => string | null;
     destroy: () => void;
     client: Authon;
+    web3GetNonce: (address: string, chain: Web3Chain, walletType: Web3WalletType, chainId?: number) => Promise<Web3NonceResponse>;
+    web3Verify: (message: string, signature: string, address: string, chain: Web3Chain, walletType: Web3WalletType) => Promise<AuthonUser>;
+    web3LinkWallet: (params: {
+        address: string;
+        chain: Web3Chain;
+        walletType: Web3WalletType;
+        chainId?: number;
+        message: string;
+        signature: string;
+    }) => Promise<Web3Wallet>;
+    web3UnlinkWallet: (walletId: string) => Promise<void>;
+    web3GetWallets: () => Promise<Web3Wallet[]>;
+    passwordlessSendCode: (email: string, type?: 'magic-link' | 'otp') => Promise<void>;
+    passwordlessVerifyCode: (email: string, code: string) => Promise<AuthonUser>;
+    passkeyRegister: (name?: string) => Promise<PasskeyCredential>;
+    passkeyAuthenticate: (email?: string) => Promise<AuthonUser>;
+    passkeyList: () => Promise<PasskeyCredential[]>;
+    passkeyDelete: (credentialId: string) => Promise<void>;
 }
 /**
  * Creates an Authon store with reactive Svelte stores.

package/dist/index.js

@@ -33,7 +33,21 @@ function createAuthonStore(publishableKey, config) {
     openSignUp: () => client.openSignUp(),
     getToken: () => client.getToken(),
     destroy: () => client.destroy(),
-    client
+    client,
+    // Web3
+    web3GetNonce: (address, chain, walletType, chainId) => client.web3GetNonce(address, chain, walletType, chainId),
+    web3Verify: (message, signature, address, chain, walletType) => client.web3Verify(message, signature, address, chain, walletType),
+    web3LinkWallet: (params) => client.linkWallet(params),
+    web3UnlinkWallet: (walletId) => client.unlinkWallet(walletId),
+    web3GetWallets: () => client.listWallets(),
+    // Passwordless
+    passwordlessSendCode: (email, type = "otp") => type === "magic-link" ? client.sendMagicLink(email) : client.sendEmailOtp(email),
+    passwordlessVerifyCode: (email, code) => client.verifyPasswordless({ email, code }),
+    // Passkeys
+    passkeyRegister: (name) => client.registerPasskey(name),
+    passkeyAuthenticate: (email) => client.authenticateWithPasskey(email),
+    passkeyList: () => client.listPasskeys(),
+    passkeyDelete: (credentialId) => client.revokePasskey(credentialId)
   };
 }
 

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/store.ts","../src/context.ts","../src/SocialButtons.ts"],"sourcesContent":["import { writable, derived, type Readable } from 'svelte/store';\nimport { Authon } from '@authon/js';\nimport type { AuthonConfig } from '@authon/js';\nimport type { AuthonUser } from '@authon/shared';\n\nexport interface AuthonStore {\n  user: Readable<AuthonUser | null>;\n  isSignedIn: Readable<boolean>;\n  isLoading: Readable<boolean>;\n  signOut: () => Promise<void>;\n  openSignIn: () => Promise<void>;\n  openSignUp: () => Promise<void>;\n  getToken: () => string | null;\n  destroy: () => void;\n  client: Authon;\n}\n\n/**\n * Creates an Authon store with reactive Svelte stores.\n *\n * Usage:\n * ```ts\n * import { createAuthonStore } from '@authon/svelte'\n *\n * const authon = createAuthonStore('pk_live_...')\n *\n * // In your component:\n * $: user = $authon.user\n * $: isSignedIn = $authon.isSignedIn\n * ```\n */\nexport function createAuthonStore(\n  publishableKey: string,\n  config?: Omit<AuthonConfig, 'mode'>,\n): AuthonStore {\n  const client = new Authon(publishableKey, config);\n  const userStore = writable<AuthonUser | null>(null);\n  const isLoadingStore = writable(true);\n\n  const isSignedIn = derived(userStore, ($user) => $user !== null);\n\n  client.on('signedIn', (user) => {\n    userStore.set(user as AuthonUser);\n    isLoadingStore.set(false);\n  });\n\n  client.on('signedOut', () => {\n    userStore.set(null);\n  });\n\n  client.on('error', () => {\n    isLoadingStore.set(false);\n  });\n\n  const existingUser = client.getUser();\n  if (existingUser) {\n    userStore.set(existingUser);\n  }\n  isLoadingStore.set(false);\n\n  return {\n    user: { subscribe: userStore.subscribe },\n    isSignedIn,\n    isLoading: { subscribe: isLoadingStore.subscribe },\n    signOut: async () => {\n      await client.signOut();\n      userStore.set(null);\n    },\n    openSignIn: () => client.openSignIn(),\n    openSignUp: () => client.openSignUp(),\n    getToken: () => client.getToken(),\n    destroy: () => client.destroy(),\n    client,\n  };\n}\n","import { setContext, getContext } from 'svelte';\nimport type { AuthonConfig } from '@authon/js';\nimport { createAuthonStore, type AuthonStore } from './store';\n\nconst AUTHON_CONTEXT_KEY = Symbol('authon');\n\n/**\n * Initialize Authon in a Svelte component tree.\n * Call this in your root layout or top-level component.\n *\n * Usage in +layout.svelte:\n * ```svelte\n * <script>\n *   import { initAuthon } from '@authon/svelte'\n *   const authon = initAuthon('pk_live_...')\n * </script>\n * ```\n */\nexport function initAuthon(\n  publishableKey: string,\n  config?: Omit<AuthonConfig, 'mode'>,\n): AuthonStore {\n  const store = createAuthonStore(publishableKey, config);\n  setContext(AUTHON_CONTEXT_KEY, store);\n  return store;\n}\n\n/**\n * Get the Authon store from Svelte context.\n * Must be called within a component tree where `initAuthon` was called.\n *\n * Usage:\n * ```svelte\n * <script>\n *   import { getAuthon } from '@authon/svelte'\n *   const { user, isSignedIn, signOut } = getAuthon()\n * </script>\n * ```\n */\nexport function getAuthon(): AuthonStore {\n  const store = getContext<AuthonStore | undefined>(AUTHON_CONTEXT_KEY);\n  if (!store) {\n    throw new Error('getAuthon() must be called within a component tree where initAuthon() was called.');\n  }\n  return store;\n}\n","import { PROVIDER_COLORS, PROVIDER_DISPLAY_NAMES, type OAuthProviderType } from '@authon/shared';\nimport { getProviderButtonConfig, type Authon } from '@authon/js';\n\nexport interface SocialButtonsOptions {\n  /** Authon client instance */\n  client: Authon;\n  /** Target container element */\n  container: HTMLElement;\n  /** Called after successful OAuth sign-in */\n  onSuccess?: () => void;\n  /** Called on OAuth error */\n  onError?: (error: Error) => void;\n  /** Compact mode — icon-only square buttons in a row (default: false) */\n  compact?: boolean;\n  /** Gap between buttons in px (default: 10, compact default: 12) */\n  gap?: number;\n  /** Custom labels per provider */\n  labels?: Partial<Record<OAuthProviderType, string>>;\n  /** Icon size (default: 20, compact default: 24) */\n  iconSize?: number;\n  /** Border radius in px (default: 10) */\n  borderRadius?: number;\n  /** Button height in px (default: 48) */\n  height?: number;\n  /** Button size for compact mode in px (default: 48) */\n  size?: number;\n}\n\n/**\n * Render social login buttons into a container element.\n *\n * Usage in +page.svelte:\n * ```svelte\n * <script>\n *   import { getAuthon } from '@authon/svelte'\n *   import { renderSocialButtons } from '@authon/svelte'\n *   import { onMount } from 'svelte'\n *\n *   const { client } = getAuthon()\n *   let container: HTMLElement\n *\n *   onMount(() => {\n *     const cleanup = renderSocialButtons({\n *       client,\n *       container,\n *       compact: true,\n *       onError: (err) => console.error(err),\n *     })\n *     return cleanup\n *   })\n * </script>\n *\n * <div bind:this={container}></div>\n * ```\n */\nexport function renderSocialButtons(options: SocialButtonsOptions): () => void {\n  const {\n    client,\n    container,\n    onSuccess,\n    onError,\n    compact = false,\n    gap,\n    labels,\n    iconSize,\n    borderRadius = 10,\n    height = 48,\n    size = 48,\n  } = options;\n\n  const resolvedGap = gap ?? (compact ? 12 : 10);\n  const resolvedIconSize = iconSize ?? (compact ? 24 : 20);\n  let loadingProvider: string | null = null;\n  let buttons: HTMLButtonElement[] = [];\n\n  const handleClick = async (provider: OAuthProviderType, btn: HTMLButtonElement) => {\n    if (loadingProvider) return;\n    loadingProvider = provider;\n    btn.innerHTML = '<span style=\"display:inline-block;width:16px;height:16px;border:2px solid currentColor;border-top-color:transparent;border-radius:50%;animation:authon-spin 0.6s linear infinite\"></span>';\n    buttons.forEach((b) => (b.disabled = true));\n\n    try {\n      await client.signInWithOAuth(provider);\n      onSuccess?.();\n    } catch (e: any) {\n      const error = e instanceof Error ? e : new Error(String(e));\n      onError?.(error);\n    } finally {\n      loadingProvider = null;\n      renderButtons(providers);\n    }\n  };\n\n  let providers: OAuthProviderType[] = [];\n\n  function renderButtons(providerList: OAuthProviderType[]) {\n    container.innerHTML = '';\n    buttons = [];\n\n    // Inject keyframe if not present\n    if (!document.getElementById('authon-spin-style')) {\n      const style = document.createElement('style');\n      style.id = 'authon-spin-style';\n      style.textContent = '@keyframes authon-spin{to{transform:rotate(360deg)}}';\n      document.head.appendChild(style);\n    }\n\n    const wrapper = document.createElement('div');\n    wrapper.style.display = 'flex';\n    wrapper.style.gap = `${resolvedGap}px`;\n\n    if (compact) {\n      wrapper.style.flexDirection = 'row';\n      wrapper.style.flexWrap = 'wrap';\n      wrapper.style.justifyContent = 'center';\n    } else {\n      wrapper.style.flexDirection = 'column';\n    }\n\n    for (const provider of providerList) {\n      const colors = PROVIDER_COLORS[provider] || { bg: '#333', text: '#fff' };\n      const displayName = PROVIDER_DISPLAY_NAMES[provider] || provider;\n      const config = getProviderButtonConfig(provider);\n      const iconSvg = config.iconSvg\n        .replace(/width=\"\\d+\"/, `width=\"${resolvedIconSize}\"`)\n        .replace(/height=\"\\d+\"/, `height=\"${resolvedIconSize}\"`);\n      const needsBorder = colors.bg.toLowerCase() === '#ffffff';\n\n      const btn = document.createElement('button');\n      btn.setAttribute('aria-label', `Sign in with ${displayName}`);\n      btn.style.display = 'flex';\n      btn.style.alignItems = 'center';\n      btn.style.justifyContent = 'center';\n      btn.style.border = needsBorder ? '1px solid #dadce0' : 'none';\n      btn.style.cursor = 'pointer';\n      btn.style.backgroundColor = colors.bg;\n      btn.style.color = colors.text;\n      btn.style.borderRadius = `${borderRadius}px`;\n      btn.style.transition = 'opacity 0.15s';\n      btn.style.fontFamily = 'inherit';\n\n      if (compact) {\n        btn.style.width = `${size}px`;\n        btn.style.height = `${size}px`;\n        btn.style.padding = '0';\n        btn.innerHTML = `<span style=\"display:flex;align-items:center\">${iconSvg}</span>`;\n      } else {\n        btn.style.width = '100%';\n        btn.style.height = `${height}px`;\n        btn.style.gap = '10px';\n        btn.style.paddingLeft = '16px';\n        btn.style.paddingRight = '16px';\n        const buttonLabel = labels?.[provider] ?? `Continue with ${displayName}`;\n        btn.innerHTML = `<span style=\"display:flex;align-items:center;flex-shrink:0\">${iconSvg}</span><span style=\"font-size:15px;font-weight:600;white-space:nowrap\">${buttonLabel}</span>`;\n      }\n\n      btn.addEventListener('click', () => handleClick(provider, btn));\n      btn.addEventListener('mouseenter', () => (btn.style.opacity = '0.85'));\n      btn.addEventListener('mouseleave', () => (btn.style.opacity = '1'));\n\n      buttons.push(btn);\n      wrapper.appendChild(btn);\n    }\n\n    container.appendChild(wrapper);\n  }\n\n  // Init\n  client.getProviders().then((p: OAuthProviderType[]) => {\n    providers = p;\n    if (providers.length > 0) {\n      renderButtons(providers);\n    }\n  });\n\n  // Cleanup\n  return () => {\n    container.innerHTML = '';\n    buttons = [];\n  };\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../src/store.ts","../src/context.ts","../src/SocialButtons.ts"],"sourcesContent":["import { writable, derived, type Readable } from 'svelte/store';\nimport { Authon } from '@authon/js';\nimport type { AuthonConfig } from '@authon/js';\nimport type {\n  AuthonUser,\n  PasskeyCredential,\n  Web3Chain,\n  Web3NonceResponse,\n  Web3Wallet,\n  Web3WalletType,\n} from '@authon/shared';\n\nexport interface AuthonStore {\n  user: Readable<AuthonUser | null>;\n  isSignedIn: Readable<boolean>;\n  isLoading: Readable<boolean>;\n  signOut: () => Promise<void>;\n  openSignIn: () => Promise<void>;\n  openSignUp: () => Promise<void>;\n  getToken: () => string | null;\n  destroy: () => void;\n  client: Authon;\n  // Web3\n  web3GetNonce: (address: string, chain: Web3Chain, walletType: Web3WalletType, chainId?: number) => Promise<Web3NonceResponse>;\n  web3Verify: (message: string, signature: string, address: string, chain: Web3Chain, walletType: Web3WalletType) => Promise<AuthonUser>;\n  web3LinkWallet: (params: { address: string; chain: Web3Chain; walletType: Web3WalletType; chainId?: number; message: string; signature: string }) => Promise<Web3Wallet>;\n  web3UnlinkWallet: (walletId: string) => Promise<void>;\n  web3GetWallets: () => Promise<Web3Wallet[]>;\n  // Passwordless\n  passwordlessSendCode: (email: string, type?: 'magic-link' | 'otp') => Promise<void>;\n  passwordlessVerifyCode: (email: string, code: string) => Promise<AuthonUser>;\n  // Passkeys\n  passkeyRegister: (name?: string) => Promise<PasskeyCredential>;\n  passkeyAuthenticate: (email?: string) => Promise<AuthonUser>;\n  passkeyList: () => Promise<PasskeyCredential[]>;\n  passkeyDelete: (credentialId: string) => Promise<void>;\n}\n\n/**\n * Creates an Authon store with reactive Svelte stores.\n *\n * Usage:\n * ```ts\n * import { createAuthonStore } from '@authon/svelte'\n *\n * const authon = createAuthonStore('pk_live_...')\n *\n * // In your component:\n * $: user = $authon.user\n * $: isSignedIn = $authon.isSignedIn\n * ```\n */\nexport function createAuthonStore(\n  publishableKey: string,\n  config?: Omit<AuthonConfig, 'mode'>,\n): AuthonStore {\n  const client = new Authon(publishableKey, config);\n  const userStore = writable<AuthonUser | null>(null);\n  const isLoadingStore = writable(true);\n\n  const isSignedIn = derived(userStore, ($user) => $user !== null);\n\n  client.on('signedIn', (user) => {\n    userStore.set(user as AuthonUser);\n    isLoadingStore.set(false);\n  });\n\n  client.on('signedOut', () => {\n    userStore.set(null);\n  });\n\n  client.on('error', () => {\n    isLoadingStore.set(false);\n  });\n\n  const existingUser = client.getUser();\n  if (existingUser) {\n    userStore.set(existingUser);\n  }\n  isLoadingStore.set(false);\n\n  return {\n    user: { subscribe: userStore.subscribe },\n    isSignedIn,\n    isLoading: { subscribe: isLoadingStore.subscribe },\n    signOut: async () => {\n      await client.signOut();\n      userStore.set(null);\n    },\n    openSignIn: () => client.openSignIn(),\n    openSignUp: () => client.openSignUp(),\n    getToken: () => client.getToken(),\n    destroy: () => client.destroy(),\n    client,\n    // Web3\n    web3GetNonce: (address, chain, walletType, chainId?) =>\n      client.web3GetNonce(address, chain, walletType, chainId),\n    web3Verify: (message, signature, address, chain, walletType) =>\n      client.web3Verify(message, signature, address, chain, walletType),\n    web3LinkWallet: (params) => client.linkWallet(params),\n    web3UnlinkWallet: (walletId) => client.unlinkWallet(walletId),\n    web3GetWallets: () => client.listWallets(),\n    // Passwordless\n    passwordlessSendCode: (email, type = 'otp') =>\n      type === 'magic-link' ? client.sendMagicLink(email) : client.sendEmailOtp(email),\n    passwordlessVerifyCode: (email, code) => client.verifyPasswordless({ email, code }),\n    // Passkeys\n    passkeyRegister: (name?) => client.registerPasskey(name),\n    passkeyAuthenticate: (email?) => client.authenticateWithPasskey(email),\n    passkeyList: () => client.listPasskeys(),\n    passkeyDelete: (credentialId) => client.revokePasskey(credentialId),\n  };\n}\n","import { setContext, getContext } from 'svelte';\nimport type { AuthonConfig } from '@authon/js';\nimport { createAuthonStore, type AuthonStore } from './store';\n\nconst AUTHON_CONTEXT_KEY = Symbol('authon');\n\n/**\n * Initialize Authon in a Svelte component tree.\n * Call this in your root layout or top-level component.\n *\n * Usage in +layout.svelte:\n * ```svelte\n * <script>\n *   import { initAuthon } from '@authon/svelte'\n *   const authon = initAuthon('pk_live_...')\n * </script>\n * ```\n */\nexport function initAuthon(\n  publishableKey: string,\n  config?: Omit<AuthonConfig, 'mode'>,\n): AuthonStore {\n  const store = createAuthonStore(publishableKey, config);\n  setContext(AUTHON_CONTEXT_KEY, store);\n  return store;\n}\n\n/**\n * Get the Authon store from Svelte context.\n * Must be called within a component tree where `initAuthon` was called.\n *\n * Usage:\n * ```svelte\n * <script>\n *   import { getAuthon } from '@authon/svelte'\n *   const { user, isSignedIn, signOut } = getAuthon()\n * </script>\n * ```\n */\nexport function getAuthon(): AuthonStore {\n  const store = getContext<AuthonStore | undefined>(AUTHON_CONTEXT_KEY);\n  if (!store) {\n    throw new Error('getAuthon() must be called within a component tree where initAuthon() was called.');\n  }\n  return store;\n}\n","import { PROVIDER_COLORS, PROVIDER_DISPLAY_NAMES, type OAuthProviderType } from '@authon/shared';\nimport { getProviderButtonConfig, type Authon } from '@authon/js';\n\nexport interface SocialButtonsOptions {\n  /** Authon client instance */\n  client: Authon;\n  /** Target container element */\n  container: HTMLElement;\n  /** Called after successful OAuth sign-in */\n  onSuccess?: () => void;\n  /** Called on OAuth error */\n  onError?: (error: Error) => void;\n  /** Compact mode — icon-only square buttons in a row (default: false) */\n  compact?: boolean;\n  /** Gap between buttons in px (default: 10, compact default: 12) */\n  gap?: number;\n  /** Custom labels per provider */\n  labels?: Partial<Record<OAuthProviderType, string>>;\n  /** Icon size (default: 20, compact default: 24) */\n  iconSize?: number;\n  /** Border radius in px (default: 10) */\n  borderRadius?: number;\n  /** Button height in px (default: 48) */\n  height?: number;\n  /** Button size for compact mode in px (default: 48) */\n  size?: number;\n}\n\n/**\n * Render social login buttons into a container element.\n *\n * Usage in +page.svelte:\n * ```svelte\n * <script>\n *   import { getAuthon } from '@authon/svelte'\n *   import { renderSocialButtons } from '@authon/svelte'\n *   import { onMount } from 'svelte'\n *\n *   const { client } = getAuthon()\n *   let container: HTMLElement\n *\n *   onMount(() => {\n *     const cleanup = renderSocialButtons({\n *       client,\n *       container,\n *       compact: true,\n *       onError: (err) => console.error(err),\n *     })\n *     return cleanup\n *   })\n * </script>\n *\n * <div bind:this={container}></div>\n * ```\n */\nexport function renderSocialButtons(options: SocialButtonsOptions): () => void {\n  const {\n    client,\n    container,\n    onSuccess,\n    onError,\n    compact = false,\n    gap,\n    labels,\n    iconSize,\n    borderRadius = 10,\n    height = 48,\n    size = 48,\n  } = options;\n\n  const resolvedGap = gap ?? (compact ? 12 : 10);\n  const resolvedIconSize = iconSize ?? (compact ? 24 : 20);\n  let loadingProvider: string | null = null;\n  let buttons: HTMLButtonElement[] = [];\n\n  const handleClick = async (provider: OAuthProviderType, btn: HTMLButtonElement) => {\n    if (loadingProvider) return;\n    loadingProvider = provider;\n    btn.innerHTML = '<span style=\"display:inline-block;width:16px;height:16px;border:2px solid currentColor;border-top-color:transparent;border-radius:50%;animation:authon-spin 0.6s linear infinite\"></span>';\n    buttons.forEach((b) => (b.disabled = true));\n\n    try {\n      await client.signInWithOAuth(provider);\n      onSuccess?.();\n    } catch (e: any) {\n      const error = e instanceof Error ? e : new Error(String(e));\n      onError?.(error);\n    } finally {\n      loadingProvider = null;\n      renderButtons(providers);\n    }\n  };\n\n  let providers: OAuthProviderType[] = [];\n\n  function renderButtons(providerList: OAuthProviderType[]) {\n    container.innerHTML = '';\n    buttons = [];\n\n    // Inject keyframe if not present\n    if (!document.getElementById('authon-spin-style')) {\n      const style = document.createElement('style');\n      style.id = 'authon-spin-style';\n      style.textContent = '@keyframes authon-spin{to{transform:rotate(360deg)}}';\n      document.head.appendChild(style);\n    }\n\n    const wrapper = document.createElement('div');\n    wrapper.style.display = 'flex';\n    wrapper.style.gap = `${resolvedGap}px`;\n\n    if (compact) {\n      wrapper.style.flexDirection = 'row';\n      wrapper.style.flexWrap = 'wrap';\n      wrapper.style.justifyContent = 'center';\n    } else {\n      wrapper.style.flexDirection = 'column';\n    }\n\n    for (const provider of providerList) {\n      const colors = PROVIDER_COLORS[provider] || { bg: '#333', text: '#fff' };\n      const displayName = PROVIDER_DISPLAY_NAMES[provider] || provider;\n      const config = getProviderButtonConfig(provider);\n      const iconSvg = config.iconSvg\n        .replace(/width=\"\\d+\"/, `width=\"${resolvedIconSize}\"`)\n        .replace(/height=\"\\d+\"/, `height=\"${resolvedIconSize}\"`);\n      const needsBorder = colors.bg.toLowerCase() === '#ffffff';\n\n      const btn = document.createElement('button');\n      btn.setAttribute('aria-label', `Sign in with ${displayName}`);\n      btn.style.display = 'flex';\n      btn.style.alignItems = 'center';\n      btn.style.justifyContent = 'center';\n      btn.style.border = needsBorder ? '1px solid #dadce0' : 'none';\n      btn.style.cursor = 'pointer';\n      btn.style.backgroundColor = colors.bg;\n      btn.style.color = colors.text;\n      btn.style.borderRadius = `${borderRadius}px`;\n      btn.style.transition = 'opacity 0.15s';\n      btn.style.fontFamily = 'inherit';\n\n      if (compact) {\n        btn.style.width = `${size}px`;\n        btn.style.height = `${size}px`;\n        btn.style.padding = '0';\n        btn.innerHTML = `<span style=\"display:flex;align-items:center\">${iconSvg}</span>`;\n      } else {\n        btn.style.width = '100%';\n        btn.style.height = `${height}px`;\n        btn.style.gap = '10px';\n        btn.style.paddingLeft = '16px';\n        btn.style.paddingRight = '16px';\n        const buttonLabel = labels?.[provider] ?? `Continue with ${displayName}`;\n        btn.innerHTML = `<span style=\"display:flex;align-items:center;flex-shrink:0\">${iconSvg}</span><span style=\"font-size:15px;font-weight:600;white-space:nowrap\">${buttonLabel}</span>`;\n      }\n\n      btn.addEventListener('click', () => handleClick(provider, btn));\n      btn.addEventListener('mouseenter', () => (btn.style.opacity = '0.85'));\n      btn.addEventListener('mouseleave', () => (btn.style.opacity = '1'));\n\n      buttons.push(btn);\n      wrapper.appendChild(btn);\n    }\n\n    container.appendChild(wrapper);\n  }\n\n  // Init\n  client.getProviders().then((p: OAuthProviderType[]) => {\n    providers = p;\n    if (providers.length > 0) {\n      renderButtons(providers);\n    }\n  });\n\n  // Cleanup\n  return () => {\n    container.innerHTML = '';\n    buttons = [];\n  };\n}\n"],"mappings":"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","names":[]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@authon/svelte",
-  "version": "0.2.1",
+  "version": "0.3.1",
   "description": "Authon Svelte SDK — stores and components",
   "type": "module",
   "main": "./dist/index.cjs",
@@ -11,10 +11,13 @@
       "types": "./dist/index.d.ts",
       "import": "./dist/index.js",
       "require": "./dist/index.cjs"
-    }
+    },
+    "./SignIn.svelte": "./src/components/SignIn.svelte",
+    "./SignUp.svelte": "./src/components/SignUp.svelte"
   },
   "files": [
-    "dist"
+    "dist",
+    "src/components"
   ],
   "scripts": {
     "build": "tsup",
@@ -37,8 +40,8 @@
     "store"
   ],
   "dependencies": {
-    "@authon/js": "^0.2.1",
-    "@authon/shared": "^0.2.0"
+    "@authon/js": "workspace:^",
+    "@authon/shared": "workspace:^"
   },
   "peerDependencies": {
     "svelte": "^4.0.0 || ^5.0.0"

package/src/components/SignIn.svelte

@@ -0,0 +1,39 @@
+<script lang="ts">
+  import { onMount, onDestroy, createEventDispatcher } from 'svelte';
+  import { Authon } from '@authon/js';
+  import type { AuthonUser } from '@authon/shared';
+
+  export let publishableKey: string;
+  export let apiUrl: string = 'https://api.authon.dev';
+  export let theme: 'light' | 'dark' | 'auto' = 'auto';
+  export let locale: string | undefined = undefined;
+
+  const dispatch = createEventDispatcher<{ signIn: { user: AuthonUser } }>();
+
+  let container: HTMLDivElement;
+  let authonInstance: Authon | null = null;
+  let unsubscribe: (() => void) | null = null;
+  const containerId = `authon-signin-${Math.random().toString(36).slice(2, 8)}`;
+
+  onMount(() => {
+    container.id = containerId;
+    authonInstance = new Authon(publishableKey, {
+      mode: 'embedded',
+      containerId,
+      apiUrl,
+      theme,
+      locale,
+    });
+    unsubscribe = authonInstance.on('signedIn', (user) => {
+      dispatch('signIn', { user: user as AuthonUser });
+    });
+    authonInstance.openSignIn();
+  });
+
+  onDestroy(() => {
+    unsubscribe?.();
+    authonInstance?.destroy();
+  });
+</script>
+
+<div bind:this={container}></div>

package/src/components/SignUp.svelte

@@ -0,0 +1,39 @@
+<script lang="ts">
+  import { onMount, onDestroy, createEventDispatcher } from 'svelte';
+  import { Authon } from '@authon/js';
+  import type { AuthonUser } from '@authon/shared';
+
+  export let publishableKey: string;
+  export let apiUrl: string = 'https://api.authon.dev';
+  export let theme: 'light' | 'dark' | 'auto' = 'auto';
+  export let locale: string | undefined = undefined;
+
+  const dispatch = createEventDispatcher<{ signUp: { user: AuthonUser } }>();
+
+  let container: HTMLDivElement;
+  let authonInstance: Authon | null = null;
+  let unsubscribe: (() => void) | null = null;
+  const containerId = `authon-signup-${Math.random().toString(36).slice(2, 8)}`;
+
+  onMount(() => {
+    container.id = containerId;
+    authonInstance = new Authon(publishableKey, {
+      mode: 'embedded',
+      containerId,
+      apiUrl,
+      theme,
+      locale,
+    });
+    unsubscribe = authonInstance.on('signedIn', (user) => {
+      dispatch('signUp', { user: user as AuthonUser });
+    });
+    authonInstance.openSignUp();
+  });
+
+  onDestroy(() => {
+    unsubscribe?.();
+    authonInstance?.destroy();
+  });
+</script>
+
+<div bind:this={container}></div>