npm - @authon/svelte - Versions diffs - 0.3.0 → 0.3.1 - Mend

@authon/svelte 0.3.0 → 0.3.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (6) hide show

package/README.ko.md +22 -113
package/README.md +116 -376
package/dist/index.cjs.map +1 -1
package/package.json +6 -3
package/src/components/SignIn.svelte +39 -0
package/src/components/SignUp.svelte +39 -0

package/README.ko.md CHANGED Viewed

@@ -2,140 +2,49 @@
 # @authon/svelte
-[Authon](https://authon.dev)을 위한 Svelte SDK — store, 액션, 컴포넌트를 제공합니다.
+> Svelte 인증 -- 반응형 스토어 -- 셀프 호스팅 Clerk 대안
 ## 설치
 ```bash
 npm install @authon/svelte
-# 또는
-pnpm add @authon/svelte
 ```
-`svelte >= 4.0.0`이 필요합니다.
 ## 빠른 시작
-### 1. 초기화
-```ts
-// src/lib/authon.ts
-import { initAuthon } from '@authon/svelte';
-export const authon = initAuthon({
-  publishableKey: 'pk_live_...',
-});
-```
-### 2. Store 사용
 ```svelte
-<script>
-  import { user, isSignedIn, isLoading } from '@authon/svelte';
-  import { openSignIn, signOut } from '@authon/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>
-{#if $isLoading}
-  <p>Loading...</p>
-{:else if $isSignedIn}
-  <p>Welcome, {$user?.displayName}</p>
-  <button on:click={signOut}>Sign Out</button>
-{:else}
-  <button on:click={openSignIn}>Sign In</button>
-{/if}
+<slot />
 ```
-### 3. 컴포넌트 사용
 ```svelte
-<script>
-  import { SignedIn, SignedOut, UserButton } from '@authon/svelte';
-</script>
-<SignedIn>
-  <UserButton />
-</SignedIn>
-<SignedOut>
-  <button on:click={openSignIn}>Sign In</button>
-</SignedOut>
-```
-## API 레퍼런스
-### Store
-| Store | 타입 | 설명 |
-|-------|------|------|
-| `user` | `Readable<AuthonUser \| null>` | 현재 사용자 |
-| `isSignedIn` | `Readable<boolean>` | 로그인 여부 |
-| `isLoading` | `Readable<boolean>` | 인증 상태 로딩 여부 |
-### 액션
-| 함수 | 반환값 | 설명 |
-|------|--------|------|
-| `openSignIn()` | `Promise<void>` | 로그인 모달 열기 |
-| `openSignUp()` | `Promise<void>` | 회원가입 모달 열기 |
-| `signOut()` | `Promise<void>` | 로그아웃 |
-| `getToken()` | `string \| null` | 현재 액세스 토큰 반환 |
-### 컴포넌트
-| 컴포넌트 | 설명 |
-|----------|------|
-| `<SignedIn>` | 로그인 상태일 때만 슬롯 렌더링 |
-| `<SignedOut>` | 로그아웃 상태일 때만 슬롯 렌더링 |
-| `<UserButton>` | 로그아웃 기능이 포함된 아바타 드롭다운 |
-## 다중 인증 (MFA)
-Authon 클라이언트 인스턴스를 통해 MFA에 접근합니다.
-```svelte
-<script>
+<!-- +page.svelte -->
+<script lang="ts">
   import { getAuthon } from '@authon/svelte';
-  import { AuthonMfaRequiredError } from '@authon/js';
-  const authon = getAuthon();
-  let qrSvg = '';
-  let mfaToken = '';
-  async function enableMfa() {
-    const setup = await authon.client.setupMfa();
-    qrSvg = setup.qrCodeSvg;  // Display QR for authenticator app
-  }
-  async function verifySetup(code) {
-    await authon.client.verifyMfaSetup(code);
-  }
-  async function signIn(email, password) {
-    try {
-      await authon.client.signInWithEmail(email, password);
-    } catch (err) {
-      if (err instanceof AuthonMfaRequiredError) {
-        mfaToken = err.mfaToken;  // Show TOTP input
-      }
-    }
-  }
-  async function verifyMfa(code) {
-    await authon.client.verifyMfa(mfaToken, code);
-  }
+  const { user, isSignedIn, openSignIn, signOut } = getAuthon();
 </script>
-{#if qrSvg}
-  {@html qrSvg}
-  <p>Scan with your authenticator app</p>
+{#if $isSignedIn}
+  <p>환영합니다, {$user?.displayName}</p>
+  <button on:click={signOut}>로그아웃</button>
+{:else}
+  <button on:click={openSignIn}>로그인</button>
 {/if}
 ```
-전체 API 레퍼런스는 [`@authon/js` MFA 문서](../js/README.md#multi-factor-authentication-mfa)를 참고하세요.
-## 문서
+## 환경 변수
-[authon.dev/docs](https://authon.dev/docs)
+| 변수 | 필수 | 설명 |
+|------|------|------|
+| `PUBLIC_AUTHON_API_URL` | Yes | Authon 서버 URL |
+| `PUBLIC_AUTHON_PUBLISHABLE_KEY` | Yes | 퍼블리셔블 키 |
 ## 라이선스
-[MIT](../../LICENSE)
+MIT

package/README.md CHANGED Viewed

@@ -2,45 +2,59 @@
 # @authon/svelte
-Svelte integration for [Authon](https://authon.dev) — reactive stores, context-based setup, and social login buttons.
+> 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 @authon/js
+npm install @authon/svelte
 ```
-Requires `svelte >= 4.0.0`.
-## Setup
-Initialize Authon in your root layout component and provide it to the component tree via Svelte context:
+## Quick Start
 ```svelte
 <!-- src/routes/+layout.svelte -->
 <script lang="ts">
-  import { initAuthon } from '@authon/svelte'
-  import { onDestroy } from 'svelte'
+  import { initAuthon } from '@authon/svelte';
+  import { onDestroy } from 'svelte';
-  const authon = initAuthon('pk_live_...', {
+  const authon = initAuthon('pk_live_YOUR_PUBLISHABLE_KEY', {
+    apiUrl: 'https://your-authon-server.com',
     theme: 'auto',
-    locale: 'en',
-  })
+  });
-  onDestroy(() => authon.destroy())
+  onDestroy(() => authon.destroy());
 </script>
 <slot />
 ```
-Then access the store in any child component:
 ```svelte
 <!-- src/routes/+page.svelte -->
 <script lang="ts">
-  import { getAuthon } from '@authon/svelte'
-  const { user, isSignedIn, isLoading, openSignIn, signOut } = getAuthon()
+  import { getAuthon } from '@authon/svelte';
+  const { user, isSignedIn, isLoading, openSignIn, signOut } = getAuthon();
 </script>
 {#if $isLoading}
@@ -53,412 +67,138 @@ Then access the store in any child component:
 {/if}
 ```
-## API Reference
-### `initAuthon(publishableKey, config?)`
-Creates an `AuthonStore` and registers it in Svelte context. Call this once in your root layout.
-```ts
-import { initAuthon } from '@authon/svelte'
-const authon = initAuthon('pk_live_...', {
-  theme: 'auto',
-  locale: 'en',
-})
-```
-### `getAuthon()`
+## Common Tasks
-Retrieves the `AuthonStore` from Svelte context. Must be called within a component that is a descendant of the component where `initAuthon` was called.
-```ts
-import { getAuthon } from '@authon/svelte'
-const authon = getAuthon()
-```
-### `createAuthonStore(publishableKey, config?)`
-Low-level store factory. Use `initAuthon` / `getAuthon` for most cases; use this directly if you need a store without Svelte context.
-### `AuthonStore`
-```ts
-interface AuthonStore {
-  user: Readable<AuthonUser | null>
-  isSignedIn: Readable<boolean>
-  isLoading: Readable<boolean>
-  client: Authon                          // @authon/js Authon instance
-  signOut: () => Promise<void>
-  openSignIn: () => Promise<void>
-  openSignUp: () => Promise<void>
-  getToken: () => string | null
-  destroy: () => void
-}
-```
-All store values are Svelte `Readable` stores — subscribe with the `$` prefix in templates.
-### `renderSocialButtons(options)`
-Renders branded OAuth provider buttons into a DOM element. Returns a cleanup function.
-**Options:**
-| Option | Type | Default | Description |
-|---|---|---|---|
-| `client` | `Authon` | required | Authon client instance |
-| `container` | `HTMLElement` | required | Target DOM element |
-| `onSuccess` | `() => void` | — | Called after successful OAuth sign-in |
-| `onError` | `(error: Error) => void` | — | Called on OAuth error |
-| `compact` | `boolean` | `false` | Icon-only square buttons in a row |
-| `gap` | `number` | `10` / `12` | Gap between buttons in px |
-| `labels` | `Record<provider, string>` | — | Override button labels per provider |
-| `borderRadius` | `number` | `10` | Button border radius in px |
-| `height` | `number` | `48` | Button height in px |
-| `size` | `number` | `48` | Icon button size in px (compact mode) |
-## Examples
-### Basic auth state
+### Add Google OAuth Login
 ```svelte
 <script lang="ts">
-  import { getAuthon } from '@authon/svelte'
-  const { user, isSignedIn, isLoading, openSignIn, signOut } = getAuthon()
+  import { getAuthon } from '@authon/svelte';
+  const { client } = getAuthon();
 </script>
-{#if $isLoading}
-  <p>Loading...</p>
-{:else if $isSignedIn}
-  <p>Hello, {$user?.displayName ?? $user?.email}</p>
-  <button on:click={signOut}>Sign out</button>
-{:else}
-  <button on:click={openSignIn}>Sign in</button>
-{/if}
-```
-### Email + password sign-in
-```svelte
-<script lang="ts">
-  import { getAuthon } from '@authon/svelte'
-  const { client } = getAuthon()
-  let email = ''
-  let password = ''
-  let loading = false
-  let error = ''
-  async function handleSignIn() {
-    loading = true
-    error = ''
-    try {
-      await client.signInWithEmail(email, password)
-    } catch (e: any) {
-      error = e.message
-    } finally {
-      loading = false
-    }
-  }
-</script>
-<form on:submit|preventDefault={handleSignIn}>
-  <input bind:value={email} type="email" placeholder="Email" />
-  <input bind:value={password} type="password" placeholder="Password" />
-  <button type="submit" disabled={loading}>Sign in</button>
-  {#if error}<p>{error}</p>{/if}
-</form>
+<button on:click={() => client.signInWithOAuth('google')}>Sign in with Google</button>
 ```
-### OAuth sign-in
+### Protect a Route
 ```svelte
+<!-- src/routes/dashboard/+page.svelte -->
 <script lang="ts">
-  import { getAuthon, renderSocialButtons } from '@authon/svelte'
-  import { onMount, onDestroy } from 'svelte'
+  import { getAuthon } from '@authon/svelte';
+  import { goto } from '$app/navigation';
+  import { onMount } from 'svelte';
-  const { client } = getAuthon()
-  let container: HTMLElement
-  let cleanup: (() => void) | undefined
+  const { isSignedIn, isLoading } = getAuthon();
   onMount(() => {
-    cleanup = renderSocialButtons({
-      client,
-      container,
-      onSuccess: () => window.location.href = '/dashboard',
-      onError: (e) => console.error(e),
-    })
-  })
-  onDestroy(() => cleanup?.())
-  // Or trigger a single provider directly
-  async function signInWithGoogle() {
-    await client.signInWithOAuth('google')
-  }
-</script>
-<div bind:this={container} />
-<button on:click={signInWithGoogle}>Sign in with Google</button>
-```
-### MFA setup
-```svelte
-<script lang="ts">
-  import { getAuthon } from '@authon/svelte'
-  const { client } = getAuthon()
-  let qrCodeSvg = ''
-  let secret = ''
-  let backupCodes: string[] = []
-  let verifyCode = ''
-  async function initMfaSetup() {
-    const res = await client.setupMfa()
-    qrCodeSvg = res.qrCodeSvg   // SVG string for display
-    secret = res.secret
-    backupCodes = res.backupCodes
-  }
-  async function confirmSetup() {
-    await client.verifyMfaSetup(verifyCode)
-    alert('MFA enabled')
-  }
+    if (!$isLoading && !$isSignedIn) goto('/sign-in');
+  });
 </script>
-<button on:click={initMfaSetup}>Enable MFA</button>
-{#if qrCodeSvg}
-  {@html qrCodeSvg}
-  <p>Scan with your authenticator app</p>
-  <p>Secret: {secret}</p>
-  <ul>{#each backupCodes as code}<li>{code}</li>{/each}</ul>
-  <input bind:value={verifyCode} placeholder="6-digit code" />
-  <button on:click={confirmSetup}>Verify</button>
+{#if $isSignedIn}
+  <h1>Dashboard</h1>
 {/if}
 ```
-### MFA verification on sign-in
-```svelte
-<script lang="ts">
-  import { getAuthon } from '@authon/svelte'
-  import { AuthonMfaRequiredError } from '@authon/js'
-  const { client } = getAuthon()
-  let mfaToken = ''
-  let totpCode = ''
-  async function signIn(email: string, password: string) {
-    try {
-      await client.signInWithEmail(email, password)
-    } catch (e) {
-      if (e instanceof AuthonMfaRequiredError) {
-        mfaToken = e.mfaToken  // show TOTP input
-      }
-    }
-  }
-  async function verifyMfa() {
-    await client.verifyMfa(mfaToken, totpCode)
-  }
-</script>
-```
-### Passwordless — magic link
+### Get Current User
 ```svelte
 <script lang="ts">
-  import { getAuthon } from '@authon/svelte'
-  const { client } = getAuthon()
-  let email = ''
-  let sent = false
-  async function sendMagicLink() {
-    await client.sendMagicLink(email)
-    sent = true
-  }
+  import { getAuthon } from '@authon/svelte';
+  const { user, isLoading } = getAuthon();
 </script>
-{#if sent}
-  <p>Check your inbox for a sign-in link.</p>
+{#if $isLoading}
+  <p>Loading...</p>
+{:else if $user}
+  <p>Email: {$user.email}</p>
+  <p>Name: {$user.displayName}</p>
 {:else}
-  <input bind:value={email} type="email" placeholder="Email" />
-  <button on:click={sendMagicLink}>Send magic link</button>
+  <p>Not signed in</p>
 {/if}
 ```
-### Passwordless — email OTP
+### Add Email/Password Auth
 ```svelte
 <script lang="ts">
-  import { getAuthon } from '@authon/svelte'
+  import { getAuthon } from '@authon/svelte';
+  const { client } = getAuthon();
+  let email = '';
+  let password = '';
-  const { client } = getAuthon()
-  let email = ''
-  let otp = ''
-  let step: 'email' | 'verify' = 'email'
-  async function sendOtp() {
-    await client.sendEmailOtp(email)
-    step = 'verify'
-  }
-  async function verifyOtp() {
-    const user = await client.verifyPasswordless({ email, code: otp })
-    console.log('Signed in as:', user.email)
+  async function handleSignIn() {
+    await client.signInWithEmail(email, password);
   }
 </script>
-{#if step === 'email'}
+<form on:submit|preventDefault={handleSignIn}>
   <input bind:value={email} type="email" placeholder="Email" />
-  <button on:click={sendOtp}>Send code</button>
-{:else}
-  <input bind:value={otp} placeholder="6-digit code" />
-  <button on:click={verifyOtp}>Verify</button>
-{/if}
-```
-### Passkeys
-```svelte
-<script lang="ts">
-  import { getAuthon } from '@authon/svelte'
-  const { client } = getAuthon()
-  // Register (user must be signed in)
-  async function registerPasskey() {
-    const credential = await client.registerPasskey('My Device')
-    console.log('Registered:', credential.id)
-  }
-  // Authenticate
-  async function loginWithPasskey() {
-    const user = await client.authenticateWithPasskey()
-    console.log('Signed in as:', user.email)
-  }
-  // List registered passkeys
-  async function listPasskeys() {
-    const keys = await client.listPasskeys()
-    console.log(keys)
-  }
-</script>
-```
-### Web3 wallet authentication
-```svelte
-<script lang="ts">
-  import { getAuthon } from '@authon/svelte'
-  const { client } = getAuthon()
-  async function signInWithWallet() {
-    const address = '0xYourWalletAddress'
-    // 1. Get a nonce + signable message from Authon
-    const { nonce, message } = await client.web3GetNonce(address, 'evm', 'metamask')
-    // 2. Sign the message with the wallet
-    const signature = await window.ethereum.request({
-      method: 'personal_sign',
-      params: [message, address],
-    })
-    // 3. Verify the signature and sign in
-    const user = await client.web3Verify(message, signature, address, 'evm', 'metamask')
-    console.log('Signed in as:', user.email)
-  }
-  async function listLinkedWallets() {
-    const wallets = await client.listWallets()
-    console.log(wallets)
-  }
-</script>
+  <input bind:value={password} type="password" placeholder="Password" />
+  <button type="submit">Sign in</button>
+</form>
 ```
-### Profile update
+### Handle Sign Out
 ```svelte
 <script lang="ts">
-  import { getAuthon } from '@authon/svelte'
-  const { client } = getAuthon()
-  async function saveProfile() {
-    const updated = await client.updateProfile({
-      displayName: 'Jane Doe',
-      avatarUrl: 'https://example.com/avatar.png',
-      phone: '+1234567890',
-      publicMetadata: { role: 'admin' },
-    })
-    console.log('Updated user:', updated)
-  }
+  import { getAuthon } from '@authon/svelte';
+  const { signOut } = getAuthon();
 </script>
-```
-### Session management
-```svelte
-<script lang="ts">
-  import { getAuthon } from '@authon/svelte'
-  import { onMount } from 'svelte'
-  import type { SessionInfo } from '@authon/shared'
-  const { client } = getAuthon()
-  let sessions: SessionInfo[] = []
-  onMount(async () => {
-    sessions = await client.listSessions()
-  })
-  async function revokeSession(sessionId: string) {
-    await client.revokeSession(sessionId)
-    sessions = sessions.filter(s => s.id !== sessionId)
-  }
-</script>
-<ul>
-  {#each sessions as session (session.id)}
-    <li>
-      {session.userAgent} — {session.createdAt}
-      <button on:click={() => revokeSession(session.id)}>Revoke</button>
-    </li>
-  {/each}
-</ul>
+<button on:click={signOut}>Sign Out</button>
 ```
-## Store options
+## Environment Variables
-| Option | Type | Default | Description |
-|---|---|---|---|
-| `publishableKey` | `string` | required | Your Authon publishable key |
-| `config.theme` | `'light' \| 'dark' \| 'auto'` | `'auto'` | UI theme |
-| `config.locale` | `string` | `'en'` | Language code |
-| `config.apiUrl` | `string` | `'https://api.authon.dev'` | Custom API base URL |
-| `config.appearance` | `Partial<BrandingConfig>` | — | Override branding colors and logo |
+| Variable | Required | Description |
+|----------|----------|-------------|
+| `PUBLIC_AUTHON_API_URL` | Yes | Your Authon server URL |
+| `PUBLIC_AUTHON_PUBLISHABLE_KEY` | Yes | Project publishable key |
-## TypeScript
-```ts
-import type { AuthonStore, SocialButtonsOptions } from '@authon/svelte'
-import type { AuthonUser, SessionInfo, PasskeyCredential, Web3Wallet } from '@authon/shared'
-```
-## Documentation
+## 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.map CHANGED Viewed

	@@ -1 +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';\nexport type {\n PasskeyCredential,\n Web3Chain,\n Web3NonceResponse,\n Web3Wallet,\n Web3WalletType,\n} from '@authon/shared';\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"]}
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';\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":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,mBAAiD;AACjD,gBAAuB;AAmDhB,SAAS,kBACd,gBACA,QACa;AACb,QAAM,SAAS,IAAI,iBAAO,gBAAgB,MAAM;AAChD,QAAM,gBAAY,uBAA4B,IAAI;AAClD,QAAM,qBAAiB,uBAAS,IAAI;AAEpC,QAAM,iBAAa,sBAAQ,WAAW,CAAC,UAAU,UAAU,IAAI;AAE/D,SAAO,GAAG,YAAY,CAAC,SAAS;AAC9B,cAAU,IAAI,IAAkB;AAChC,mBAAe,IAAI,KAAK;AAAA,EAC1B,CAAC;AAED,SAAO,GAAG,aAAa,MAAM;AAC3B,cAAU,IAAI,IAAI;AAAA,EACpB,CAAC;AAED,SAAO,GAAG,SAAS,MAAM;AACvB,mBAAe,IAAI,KAAK;AAAA,EAC1B,CAAC;AAED,QAAM,eAAe,OAAO,QAAQ;AACpC,MAAI,cAAc;AAChB,cAAU,IAAI,YAAY;AAAA,EAC5B;AACA,iBAAe,IAAI,KAAK;AAExB,SAAO;AAAA,IACL,MAAM,EAAE,WAAW,UAAU,UAAU;AAAA,IACvC;AAAA,IACA,WAAW,EAAE,WAAW,eAAe,UAAU;AAAA,IACjD,SAAS,YAAY;AACnB,YAAM,OAAO,QAAQ;AACrB,gBAAU,IAAI,IAAI;AAAA,IACpB;AAAA,IACA,YAAY,MAAM,OAAO,WAAW;AAAA,IACpC,YAAY,MAAM,OAAO,WAAW;AAAA,IACpC,UAAU,MAAM,OAAO,SAAS;AAAA,IAChC,SAAS,MAAM,OAAO,QAAQ;AAAA,IAC9B;AAAA;AAAA,IAEA,cAAc,CAAC,SAAS,OAAO,YAAY,YACzC,OAAO,aAAa,SAAS,OAAO,YAAY,OAAO;AAAA,IACzD,YAAY,CAAC,SAAS,WAAW,SAAS,OAAO,eAC/C,OAAO,WAAW,SAAS,WAAW,SAAS,OAAO,UAAU;AAAA,IAClE,gBAAgB,CAAC,WAAW,OAAO,WAAW,MAAM;AAAA,IACpD,kBAAkB,CAAC,aAAa,OAAO,aAAa,QAAQ;AAAA,IAC5D,gBAAgB,MAAM,OAAO,YAAY;AAAA;AAAA,IAEzC,sBAAsB,CAAC,OAAO,OAAO,UACnC,SAAS,eAAe,OAAO,cAAc,KAAK,IAAI,OAAO,aAAa,KAAK;AAAA,IACjF,wBAAwB,CAAC,OAAO,SAAS,OAAO,mBAAmB,EAAE,OAAO,KAAK,CAAC;AAAA;AAAA,IAElF,iBAAiB,CAAC,SAAU,OAAO,gBAAgB,IAAI;AAAA,IACvD,qBAAqB,CAAC,UAAW,OAAO,wBAAwB,KAAK;AAAA,IACrE,aAAa,MAAM,OAAO,aAAa;AAAA,IACvC,eAAe,CAAC,iBAAiB,OAAO,cAAc,YAAY;AAAA,EACpE;AACF;;;AChHA,oBAAuC;AAIvC,IAAM,qBAAqB,uBAAO,QAAQ;AAcnC,SAAS,WACd,gBACA,QACa;AACb,QAAM,QAAQ,kBAAkB,gBAAgB,MAAM;AACtD,gCAAW,oBAAoB,KAAK;AACpC,SAAO;AACT;AAcO,SAAS,YAAyB;AACvC,QAAM,YAAQ,0BAAoC,kBAAkB;AACpE,MAAI,CAAC,OAAO;AACV,UAAM,IAAI,MAAM,mFAAmF;AAAA,EACrG;AACA,SAAO;AACT;;;AC7CA,oBAAgF;AAChF,IAAAA,aAAqD;AAsD9C,SAAS,oBAAoB,SAA2C;AAC7E,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,UAAU;AAAA,IACV;AAAA,IACA;AAAA,IACA;AAAA,IACA,eAAe;AAAA,IACf,SAAS;AAAA,IACT,OAAO;AAAA,EACT,IAAI;AAEJ,QAAM,cAAc,QAAQ,UAAU,KAAK;AAC3C,QAAM,mBAAmB,aAAa,UAAU,KAAK;AACrD,MAAI,kBAAiC;AACrC,MAAI,UAA+B,CAAC;AAEpC,QAAM,cAAc,OAAO,UAA6B,QAA2B;AACjF,QAAI,gBAAiB;AACrB,sBAAkB;AAClB,QAAI,YAAY;AAChB,YAAQ,QAAQ,CAAC,MAAO,EAAE,WAAW,IAAK;AAE1C,QAAI;AACF,YAAM,OAAO,gBAAgB,QAAQ;AACrC,kBAAY;AAAA,IACd,SAAS,GAAQ;AACf,YAAM,QAAQ,aAAa,QAAQ,IAAI,IAAI,MAAM,OAAO,CAAC,CAAC;AAC1D,gBAAU,KAAK;AAAA,IACjB,UAAE;AACA,wBAAkB;AAClB,oBAAc,SAAS;AAAA,IACzB;AAAA,EACF;AAEA,MAAI,YAAiC,CAAC;AAEtC,WAAS,cAAc,cAAmC;AACxD,cAAU,YAAY;AACtB,cAAU,CAAC;AAGX,QAAI,CAAC,SAAS,eAAe,mBAAmB,GAAG;AACjD,YAAM,QAAQ,SAAS,cAAc,OAAO;AAC5C,YAAM,KAAK;AACX,YAAM,cAAc;AACpB,eAAS,KAAK,YAAY,KAAK;AAAA,IACjC;AAEA,UAAM,UAAU,SAAS,cAAc,KAAK;AAC5C,YAAQ,MAAM,UAAU;AACxB,YAAQ,MAAM,MAAM,GAAG,WAAW;AAElC,QAAI,SAAS;AACX,cAAQ,MAAM,gBAAgB;AAC9B,cAAQ,MAAM,WAAW;AACzB,cAAQ,MAAM,iBAAiB;AAAA,IACjC,OAAO;AACL,cAAQ,MAAM,gBAAgB;AAAA,IAChC;AAEA,eAAW,YAAY,cAAc;AACnC,YAAM,SAAS,8BAAgB,QAAQ,KAAK,EAAE,IAAI,QAAQ,MAAM,OAAO;AACvE,YAAM,cAAc,qCAAuB,QAAQ,KAAK;AACxD,YAAM,aAAS,oCAAwB,QAAQ;AAC/C,YAAM,UAAU,OAAO,QACpB,QAAQ,eAAe,UAAU,gBAAgB,GAAG,EACpD,QAAQ,gBAAgB,WAAW,gBAAgB,GAAG;AACzD,YAAM,cAAc,OAAO,GAAG,YAAY,MAAM;AAEhD,YAAM,MAAM,SAAS,cAAc,QAAQ;AAC3C,UAAI,aAAa,cAAc,gBAAgB,WAAW,EAAE;AAC5D,UAAI,MAAM,UAAU;AACpB,UAAI,MAAM,aAAa;AACvB,UAAI,MAAM,iBAAiB;AAC3B,UAAI,MAAM,SAAS,cAAc,sBAAsB;AACvD,UAAI,MAAM,SAAS;AACnB,UAAI,MAAM,kBAAkB,OAAO;AACnC,UAAI,MAAM,QAAQ,OAAO;AACzB,UAAI,MAAM,eAAe,GAAG,YAAY;AACxC,UAAI,MAAM,aAAa;AACvB,UAAI,MAAM,aAAa;AAEvB,UAAI,SAAS;AACX,YAAI,MAAM,QAAQ,GAAG,IAAI;AACzB,YAAI,MAAM,SAAS,GAAG,IAAI;AAC1B,YAAI,MAAM,UAAU;AACpB,YAAI,YAAY,iDAAiD,OAAO;AAAA,MAC1E,OAAO;AACL,YAAI,MAAM,QAAQ;AAClB,YAAI,MAAM,SAAS,GAAG,MAAM;AAC5B,YAAI,MAAM,MAAM;AAChB,YAAI,MAAM,cAAc;AACxB,YAAI,MAAM,eAAe;AACzB,cAAM,cAAc,SAAS,QAAQ,KAAK,iBAAiB,WAAW;AACtE,YAAI,YAAY,+DAA+D,OAAO,0EAA0E,WAAW;AAAA,MAC7K;AAEA,UAAI,iBAAiB,SAAS,MAAM,YAAY,UAAU,GAAG,CAAC;AAC9D,UAAI,iBAAiB,cAAc,MAAO,IAAI,MAAM,UAAU,MAAO;AACrE,UAAI,iBAAiB,cAAc,MAAO,IAAI,MAAM,UAAU,GAAI;AAElE,cAAQ,KAAK,GAAG;AAChB,cAAQ,YAAY,GAAG;AAAA,IACzB;AAEA,cAAU,YAAY,OAAO;AAAA,EAC/B;AAGA,SAAO,aAAa,EAAE,KAAK,CAAC,MAA2B;AACrD,gBAAY;AACZ,QAAI,UAAU,SAAS,GAAG;AACxB,oBAAc,SAAS;AAAA,IACzB;AAAA,EACF,CAAC;AAGD,SAAO,MAAM;AACX,cAAU,YAAY;AACtB,cAAU,CAAC;AAAA,EACb;AACF;","names":["import_js"]}

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@authon/svelte",
-  "version": "0.3.0",
+  "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",

package/src/components/SignIn.svelte ADDED Viewed

@@ -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 ADDED Viewed

@@ -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>