@authrim/sveltekit 0.1.0 → 0.1.2

package/dist/components/AuthProvider.svelte

@@ -1,56 +1,56 @@
-<!--
-  AuthProvider Component
-
-  Responsibilities (strictly limited):
-  - Wire auth instance into Svelte context
-  - Sync initial session from SSR (synchronously to avoid hydration mismatch)
-
-  It must NOT implement business logic.
--->
-<script lang="ts">
-  import { onMount, onDestroy } from 'svelte';
-  import { setAuthContext } from '../utils/context.js';
-  import type { AuthrimClient } from '../types.js';
-  import type { Session, User } from '@authrim/core';
-
-  /** Authrim client instance */
-  export let auth: AuthrimClient;
-
-  /** Initial session from SSR (optional) */
-  export let initialSession: Session | null = null;
-
-  /** Initial user from SSR (optional) */
-  export let initialUser: User | null = null;
-
-  // Set auth context for child components
-  setAuthContext(auth);
-
-  // Sync initial session from SSR synchronously to avoid hydration mismatch
-  // This must happen before the first render
-  if (initialSession && initialUser) {
-    auth._syncFromSSR(initialSession, initialUser);
-  }
-
-  // Optionally validate session in the background after hydration
-  onMount(() => {
-    if (initialSession && initialUser) {
-      // Session already synced above, optionally revalidate in background
-      // This ensures the session is still valid on the server
-      auth.session.get().catch((error) => {
-        console.warn('[Authrim] Failed to revalidate session:', error);
-      });
-    } else if (!initialSession && !initialUser) {
-      // No SSR session provided, check if there's a session in storage
-      auth.session.get().catch((error) => {
-        console.warn('[Authrim] Failed to fetch session:', error);
-      });
-    }
-  });
-
-  // Cleanup on destroy
-  onDestroy(() => {
-    auth.destroy();
-  });
-</script>
-
-<slot />
+<!--
+  AuthProvider Component
+
+  Responsibilities (strictly limited):
+  - Wire auth instance into Svelte context
+  - Sync initial session from SSR (synchronously to avoid hydration mismatch)
+
+  It must NOT implement business logic.
+-->
+<script lang="ts">
+  import { onMount, onDestroy } from 'svelte';
+  import { setAuthContext } from '../utils/context.js';
+  import type { AuthrimClient } from '../types.js';
+  import type { Session, User } from '@authrim/core';
+
+  /** Authrim client instance */
+  export let auth: AuthrimClient;
+
+  /** Initial session from SSR (optional) */
+  export let initialSession: Session | null = null;
+
+  /** Initial user from SSR (optional) */
+  export let initialUser: User | null = null;
+
+  // Set auth context for child components
+  setAuthContext(auth);
+
+  // Sync initial session from SSR synchronously to avoid hydration mismatch
+  // This must happen before the first render
+  if (initialSession && initialUser) {
+    auth._syncFromSSR(initialSession, initialUser);
+  }
+
+  // Optionally validate session in the background after hydration
+  onMount(() => {
+    if (initialSession && initialUser) {
+      // Session already synced above, optionally revalidate in background
+      // This ensures the session is still valid on the server
+      auth.session.get().catch((error) => {
+        console.warn('[Authrim] Failed to revalidate session:', error);
+      });
+    } else if (!initialSession && !initialUser) {
+      // No SSR session provided, check if there's a session in storage
+      auth.session.get().catch((error) => {
+        console.warn('[Authrim] Failed to fetch session:', error);
+      });
+    }
+  });
+
+  // Cleanup on destroy
+  onDestroy(() => {
+    auth.destroy();
+  });
+</script>
+
+<slot />

package/dist/components/ProtectedRoute.svelte

@@ -1,71 +1,71 @@
-<!--
-  ProtectedRoute Component
-
-  Shows content only when user is authenticated.
-  Redirects or shows fallback when not authenticated.
--->
-<script lang="ts">
-  import { onMount, tick } from 'svelte';
-  import { goto } from '$app/navigation';
-  import { getAuthContext } from '../utils/context.js';
-
-  /** Redirect URL for unauthenticated users (if not provided, shows fallback) */
-  export let redirectTo: string | undefined = undefined;
-
-  /** Include current path in redirect URL */
-  export let includeReturnPath: boolean = true;
-
-  /** Return path parameter name */
-  export let returnPathParam: string = 'redirectTo';
-
-  /** Custom class */
-  let className: string = '';
-  export { className as class };
-
-  const auth = getAuthContext();
-  const { isAuthenticated, loadingState } = auth.stores;
-
-  // State machine: 'loading' -> 'ready'
-  // Prevents race condition where redirect happens before session check completes
-  let state: 'loading' | 'ready' = 'loading';
-
-  onMount(async () => {
-    try {
-      // Check session on mount
-      await auth.session.get();
-    } catch (error) {
-      console.warn('[Authrim] Failed to check session:', error);
-    } finally {
-      // Wait for stores to update before changing state
-      await tick();
-      state = 'ready';
-    }
-  });
-
-  // Only perform redirect when:
-  // 1. Component has finished initialization (state === 'ready')
-  // 2. User is not authenticated
-  // 3. No async operation is in progress (loadingState === 'idle')
-  // 4. A redirect URL is configured
-  $: if (state === 'ready' && !$isAuthenticated && $loadingState === 'idle' && redirectTo) {
-    const url = new URL(redirectTo, window.location.origin);
-    if (includeReturnPath) {
-      url.searchParams.set(returnPathParam, window.location.pathname + window.location.search);
-    }
-    goto(url.toString());
-  }
-</script>
-
-{#if state === 'loading' || $loadingState === 'initializing'}
-  <slot name="loading">
-    <div class={className} {...$$restProps}>Loading...</div>
-  </slot>
-{:else if $isAuthenticated}
-  <slot />
-{:else if !redirectTo}
-  <slot name="unauthenticated">
-    <div class={className} {...$$restProps}>
-      <p>You must be signed in to view this content.</p>
-    </div>
-  </slot>
-{/if}
+<!--
+  ProtectedRoute Component
+
+  Shows content only when user is authenticated.
+  Redirects or shows fallback when not authenticated.
+-->
+<script lang="ts">
+  import { onMount, tick } from 'svelte';
+  import { goto } from '$app/navigation';
+  import { getAuthContext } from '../utils/context.js';
+
+  /** Redirect URL for unauthenticated users (if not provided, shows fallback) */
+  export let redirectTo: string | undefined = undefined;
+
+  /** Include current path in redirect URL */
+  export let includeReturnPath: boolean = true;
+
+  /** Return path parameter name */
+  export let returnPathParam: string = 'redirectTo';
+
+  /** Custom class */
+  let className: string = '';
+  export { className as class };
+
+  const auth = getAuthContext();
+  const { isAuthenticated, loadingState } = auth.stores;
+
+  // State machine: 'loading' -> 'ready'
+  // Prevents race condition where redirect happens before session check completes
+  let state: 'loading' | 'ready' = 'loading';
+
+  onMount(async () => {
+    try {
+      // Check session on mount
+      await auth.session.get();
+    } catch (error) {
+      console.warn('[Authrim] Failed to check session:', error);
+    } finally {
+      // Wait for stores to update before changing state
+      await tick();
+      state = 'ready';
+    }
+  });
+
+  // Only perform redirect when:
+  // 1. Component has finished initialization (state === 'ready')
+  // 2. User is not authenticated
+  // 3. No async operation is in progress (loadingState === 'idle')
+  // 4. A redirect URL is configured
+  $: if (state === 'ready' && !$isAuthenticated && $loadingState === 'idle' && redirectTo) {
+    const url = new URL(redirectTo, window.location.origin);
+    if (includeReturnPath) {
+      url.searchParams.set(returnPathParam, window.location.pathname + window.location.search);
+    }
+    goto(url.toString());
+  }
+</script>
+
+{#if state === 'loading' || $loadingState === 'initializing'}
+  <slot name="loading">
+    <div class={className} {...$$restProps}>Loading...</div>
+  </slot>
+{:else if $isAuthenticated}
+  <slot />
+{:else if !redirectTo}
+  <slot name="unauthenticated">
+    <div class={className} {...$$restProps}>
+      <p>You must be signed in to view this content.</p>
+    </div>
+  </slot>
+{/if}

package/dist/components/SignInButton.svelte

@@ -1,93 +1,93 @@
-<!--
-  SignInButton Component
-
-  A thin wrapper that delegates all behavior to props/events.
-  Responsibilities: Call auth API and dispatch events.
--->
-<script lang="ts">
-  import { createEventDispatcher } from 'svelte';
-  import { getAuthContext } from '../utils/context.js';
-  import type { SocialProvider, Session, User, AuthLoadingState } from '../types.js';
-  import type { AuthError } from '../stores/auth.js';
-
-  /** Authentication method */
-  export let method: 'passkey' | 'social' = 'passkey';
-
-  /** Social provider (required when method is 'social') */
-  export let provider: SocialProvider | undefined = undefined;
-
-  /** Disabled state */
-  export let disabled: boolean = false;
-
-  /** Custom class */
-  let className: string = '';
-  export { className as class };
-
-  const auth = getAuthContext();
-  const dispatch = createEventDispatcher<{
-    success: { session: Session; user: User };
-    error: AuthError;
-    loading: AuthLoadingState;
-  }>();
-
-  let loading = false;
-
-  async function handleClick() {
-    if (disabled || loading) return;
-
-    loading = true;
-    dispatch('loading', 'authenticating');
-
-    try {
-      let result;
-
-      if (method === 'passkey') {
-        result = await auth.passkey.login();
-      } else if (method === 'social' && provider) {
-        result = await auth.social.loginWithPopup(provider);
-      } else {
-        throw new Error('Invalid method or missing provider');
-      }
-
-      if (result.data) {
-        dispatch('success', {
-          session: result.data.session,
-          user: result.data.user,
-        });
-      } else if (result.error) {
-        dispatch('error', {
-          code: result.error.code,
-          message: result.error.message,
-        });
-      }
-    } catch (error) {
-      dispatch('error', {
-        code: 'UNKNOWN_ERROR',
-        message: error instanceof Error ? error.message : 'Unknown error',
-      });
-    } finally {
-      loading = false;
-      dispatch('loading', 'idle');
-    }
-  }
-</script>
-
-<button
-  type="button"
-  on:click={handleClick}
-  disabled={disabled || loading}
-  class={className}
-  {...$$restProps}
->
-  <slot>
-    {#if loading}
-      Signing in...
-    {:else if method === 'passkey'}
-      Sign in with Passkey
-    {:else if method === 'social' && provider}
-      Sign in with {provider.charAt(0).toUpperCase() + provider.slice(1)}
-    {:else}
-      Sign In
-    {/if}
-  </slot>
-</button>
+<!--
+  SignInButton Component
+
+  A thin wrapper that delegates all behavior to props/events.
+  Responsibilities: Call auth API and dispatch events.
+-->
+<script lang="ts">
+  import { createEventDispatcher } from 'svelte';
+  import { getAuthContext } from '../utils/context.js';
+  import type { SocialProvider, Session, User, AuthLoadingState } from '../types.js';
+  import type { AuthError } from '../stores/auth.js';
+
+  /** Authentication method */
+  export let method: 'passkey' | 'social' = 'passkey';
+
+  /** Social provider (required when method is 'social') */
+  export let provider: SocialProvider | undefined = undefined;
+
+  /** Disabled state */
+  export let disabled: boolean = false;
+
+  /** Custom class */
+  let className: string = '';
+  export { className as class };
+
+  const auth = getAuthContext();
+  const dispatch = createEventDispatcher<{
+    success: { session: Session; user: User };
+    error: AuthError;
+    loading: AuthLoadingState;
+  }>();
+
+  let loading = false;
+
+  async function handleClick() {
+    if (disabled || loading) return;
+
+    loading = true;
+    dispatch('loading', 'authenticating');
+
+    try {
+      let result;
+
+      if (method === 'passkey') {
+        result = await auth.passkey.login();
+      } else if (method === 'social' && provider) {
+        result = await auth.social.loginWithPopup(provider);
+      } else {
+        throw new Error('Invalid method or missing provider');
+      }
+
+      if (result.data) {
+        dispatch('success', {
+          session: result.data.session,
+          user: result.data.user,
+        });
+      } else if (result.error) {
+        dispatch('error', {
+          code: result.error.code,
+          message: result.error.message,
+        });
+      }
+    } catch (error) {
+      dispatch('error', {
+        code: 'UNKNOWN_ERROR',
+        message: error instanceof Error ? error.message : 'Unknown error',
+      });
+    } finally {
+      loading = false;
+      dispatch('loading', 'idle');
+    }
+  }
+</script>
+
+<button
+  type="button"
+  on:click={handleClick}
+  disabled={disabled || loading}
+  class={className}
+  {...$$restProps}
+>
+  <slot>
+    {#if loading}
+      Signing in...
+    {:else if method === 'passkey'}
+      Sign in with Passkey
+    {:else if method === 'social' && provider}
+      Sign in with {provider.charAt(0).toUpperCase() + provider.slice(1)}
+    {:else}
+      Sign In
+    {/if}
+  </slot>
+</button>

package/dist/components/SignOutButton.svelte

@@ -1,72 +1,72 @@
-<!--
-  SignOutButton Component
-
-  A thin wrapper that delegates all behavior to props/events.
--->
-<script lang="ts">
-  import { createEventDispatcher } from 'svelte';
-  import { getAuthContext } from '../utils/context.js';
-  import type { AuthLoadingState } from '../types.js';
-  import type { AuthError } from '../stores/auth.js';
-
-  /** Redirect URI after sign out */
-  export let redirectUri: string | undefined = undefined;
-
-  /** Revoke tokens on sign out */
-  export let revokeTokens: boolean = false;
-
-  /** Disabled state */
-  export let disabled: boolean = false;
-
-  /** Custom class */
-  let className: string = '';
-  export { className as class };
-
-  const auth = getAuthContext();
-  const dispatch = createEventDispatcher<{
-    success: void;
-    error: AuthError;
-    loading: AuthLoadingState;
-  }>();
-
-  let loading = false;
-
-  async function handleClick() {
-    if (disabled || loading) return;
-
-    loading = true;
-    dispatch('loading', 'signing_out');
-
-    try {
-      await auth.signOut({
-        redirectUri,
-        revokeTokens,
-      });
-      dispatch('success');
-    } catch (error) {
-      dispatch('error', {
-        code: 'SIGN_OUT_ERROR',
-        message: error instanceof Error ? error.message : 'Sign out failed',
-      });
-    } finally {
-      loading = false;
-      dispatch('loading', 'idle');
-    }
-  }
-</script>
-
-<button
-  type="button"
-  on:click={handleClick}
-  disabled={disabled || loading}
-  class={className}
-  {...$$restProps}
->
-  <slot>
-    {#if loading}
-      Signing out...
-    {:else}
-      Sign Out
-    {/if}
-  </slot>
-</button>
+<!--
+  SignOutButton Component
+
+  A thin wrapper that delegates all behavior to props/events.
+-->
+<script lang="ts">
+  import { createEventDispatcher } from 'svelte';
+  import { getAuthContext } from '../utils/context.js';
+  import type { AuthLoadingState } from '../types.js';
+  import type { AuthError } from '../stores/auth.js';
+
+  /** Redirect URI after sign out */
+  export let redirectUri: string | undefined = undefined;
+
+  /** Revoke tokens on sign out */
+  export let revokeTokens: boolean = false;
+
+  /** Disabled state */
+  export let disabled: boolean = false;
+
+  /** Custom class */
+  let className: string = '';
+  export { className as class };
+
+  const auth = getAuthContext();
+  const dispatch = createEventDispatcher<{
+    success: void;
+    error: AuthError;
+    loading: AuthLoadingState;
+  }>();
+
+  let loading = false;
+
+  async function handleClick() {
+    if (disabled || loading) return;
+
+    loading = true;
+    dispatch('loading', 'signing_out');
+
+    try {
+      await auth.signOut({
+        redirectUri,
+        revokeTokens,
+      });
+      dispatch('success');
+    } catch (error) {
+      dispatch('error', {
+        code: 'SIGN_OUT_ERROR',
+        message: error instanceof Error ? error.message : 'Sign out failed',
+      });
+    } finally {
+      loading = false;
+      dispatch('loading', 'idle');
+    }
+  }
+</script>
+
+<button
+  type="button"
+  on:click={handleClick}
+  disabled={disabled || loading}
+  class={className}
+  {...$$restProps}
+>
+  <slot>
+    {#if loading}
+      Signing out...
+    {:else}
+      Sign Out
+    {/if}
+  </slot>
+</button>