@vibesdotdev/auth 0.0.0-stage → 1.0.0-rc.4

package/dist/svelte/components/RequireAuth.svelte

@@ -0,0 +1,59 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import { getRuntimeSvelteContext } from '@vibesdotdev/surface-sveltekit/svelte/state';
+	import { getAuthComponentLogger } from '../component-logging.js';
+	import { authState } from '../state.svelte.js';
+	import { navigateAuth, type AuthNavigate } from '../navigation-effect.js';
+
+	/**
+	 * RequireAuth — render-guard. When the shared `authState` reports no user,
+	 * either renders the `fallback` snippet (if provided) or redirects to
+	 * `signInHref`. Always renders `children` when the user is present.
+	 *
+	 * Pair with `<SessionWatcher />` so `authState.initialized` is true before
+	 * the guard makes a decision. Without it, the loading snippet is rendered.
+	 */
+	type Props = {
+		signInHref: string;
+		children: Snippet;
+		fallback?: Snippet;
+		loading?: Snippet;
+		/** Disable the auto-redirect; render `fallback` (if any) without navigating. */
+		disableRedirect?: boolean;
+		/** Host-owned browser navigation effect. Defaults to a full-page navigation. */
+		navigate?: AuthNavigate;
+	};
+
+	let props: Props = $props();
+	const runtimeStore = getRuntimeSvelteContext();
+
+	const logger = () => getAuthComponentLogger('auth.require', runtimeStore);
+
+	let redirected = $state(false);
+
+	const user = $derived(authState.session?.user ?? null);
+	const ready = $derived(authState.initialized);
+
+	$effect(() => {
+		if (!ready) return;
+		if (user) {
+			redirected = false;
+			return;
+		}
+		if (props.disableRedirect) return;
+		if (redirected) return;
+		if (!navigateAuth(props.navigate, props.signInHref)) return;
+		redirected = true;
+		logger().info('Redirecting unauthenticated user to sign-in');
+	});
+</script>
+
+{#if !ready}
+	{#if props.loading}
+		{@render props.loading()}
+	{/if}
+{:else if user}
+	{@render props.children()}
+{:else if props.fallback}
+	{@render props.fallback()}
+{/if}

package/dist/svelte/components/RequireAuth.svelte.d.ts

@@ -0,0 +1,24 @@
+import type { Snippet } from 'svelte';
+import { type AuthNavigate } from '../navigation-effect.ts';
+/**
+ * RequireAuth — render-guard. When the shared `authState` reports no user,
+ * either renders the `fallback` snippet (if provided) or redirects to
+ * `signInHref`. Always renders `children` when the user is present.
+ *
+ * Pair with `<SessionWatcher />` so `authState.initialized` is true before
+ * the guard makes a decision. Without it, the loading snippet is rendered.
+ */
+type Props = {
+    signInHref: string;
+    children: Snippet;
+    fallback?: Snippet;
+    loading?: Snippet;
+    /** Disable the auto-redirect; render `fallback` (if any) without navigating. */
+    disableRedirect?: boolean;
+    /** Host-owned browser navigation effect. Defaults to a full-page navigation. */
+    navigate?: AuthNavigate;
+};
+declare const RequireAuth: import("svelte").Component<Props, {}, "">;
+type RequireAuth = ReturnType<typeof RequireAuth>;
+export default RequireAuth;
+//# sourceMappingURL=RequireAuth.svelte.d.ts.map

package/dist/svelte/components/RequireAuth.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RequireAuth.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/RequireAuth.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAItC,OAAO,EAAgB,KAAK,YAAY,EAAE,MAAM,yBAAyB,CAAC;AAGzE;;;;;;;GAOG;AACH,KAAK,KAAK,GAAG;IACZ,UAAU,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,gFAAgF;IAChF,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,gFAAgF;IAChF,QAAQ,CAAC,EAAE,YAAY,CAAC;CACxB,CAAC;AA6CH,QAAA,MAAM,WAAW,2CAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}

package/dist/svelte/components/SessionTimer.svelte

@@ -0,0 +1,116 @@
+<script lang="ts">
+	import { onMount } from 'svelte';
+	import type { Snippet } from 'svelte';
+	import { loadAuthComponentLogger } from '../component-logging.js';
+	import { authState } from '../state.svelte.js';
+	import { attempt, failureLabel } from '../outcome.js';
+	import { getRuntimeSvelteContext } from '@vibesdotdev/surface-sveltekit/svelte/state';
+
+	/**
+	 * SessionTimer — visual countdown until the active session expires.
+	 *
+	 * Pair with `<SessionWatcher />`: the watcher keeps `authState.session`
+	 * fresh on a polling interval; the timer reads `authState.msUntilExpiry`
+	 * every second and triggers `authState.refresh()` when the remaining time
+	 * crosses `refreshThresholdSeconds` (default 120s).
+	 *
+	 * The default render is a minimal "{mm:ss} until sign-out" line; consumers
+	 * can override with the `children` snippet to compose richer UIs (banner
+	 * pills, header chips, modal dialogs).
+	 *
+	 * Renders nothing when no session is loaded or when `msUntilExpiry` is null
+	 * (i.e. the server didn't surface an expiry).
+	 */
+	type Props = {
+		/** When remaining time drops below this many seconds, the timer calls `authState.refresh()`. Default 120. */
+		refreshThresholdSeconds?: number;
+		/** Tick interval in milliseconds. Default 1000. */
+		tickMs?: number;
+		/** When true, do NOT auto-refresh; render countdown only. */
+		passive?: boolean;
+		/** Custom renderer; receives the remaining ms (clamped to >= 0) + a `expired` flag. */
+		children?: Snippet<[{ remainingMs: number; expired: boolean; formatted: string }]>;
+		/** Optional CSS class for the default render. */
+		class?: string;
+	};
+
+	// Captured at component init (context is only readable during init); resolved via load().
+	const runtimeStore = getRuntimeSvelteContext();
+
+	let props: Props = $props();
+
+	const refreshThresholdMs = $derived((props.refreshThresholdSeconds ?? 120) * 1000);
+	const tickInterval = $derived(Math.max(250, props.tickMs ?? 1000));
+	const passive = $derived(Boolean(props.passive));
+	const classValue = $derived(props.class ?? '');
+
+	const logger = () => loadAuthComponentLogger('auth.session-timer', runtimeStore);
+
+	// Local tick state so the derived `remaining` recomputes on every interval.
+	let now = $state(Date.now());
+
+	const remainingMs = $derived(
+		(() => {
+			const ms = authState.msUntilExpiry;
+			if (ms === null) return null;
+			// Subtract the drift since the last tick so the display ticks down even
+			// when the underlying session object hasn't changed.
+			// (now is read so this $derived recomputes each tick.)
+			void now;
+			return Math.max(0, ms);
+		})()
+	);
+
+	const expired = $derived(remainingMs !== null && remainingMs <= 0);
+
+	const formatted = $derived(formatRemaining(remainingMs));
+
+	let refreshing = $state(false);
+
+	function formatRemaining(ms: number | null): string {
+		if (ms === null) return '';
+		const totalSeconds = Math.max(0, Math.floor(ms / 1000));
+		const hours = Math.floor(totalSeconds / 3600);
+		const minutes = Math.floor((totalSeconds % 3600) / 60);
+		const seconds = totalSeconds % 60;
+		const pad = (n: number) => String(n).padStart(2, '0');
+		if (hours > 0) return `${hours}:${pad(minutes)}:${pad(seconds)}`;
+		return `${pad(minutes)}:${pad(seconds)}`;
+	}
+
+	onMount(() => {
+		now = Date.now();
+		const handle = setInterval(() => {
+			now = Date.now();
+			if (passive) return;
+			const ms = authState.msUntilExpiry;
+			if (ms === null) return;
+			if (ms <= refreshThresholdMs && !refreshing) {
+				refreshing = true;
+				void (async () => {
+					(await logger()).info('Session near expiry; refreshing', { remainingMs: ms });
+					const refreshed = await attempt(async () => authState.refresh(await runtimeStore.load()));
+					if (!refreshed.ok) {
+						(await logger()).warn('Session refresh failed', { failure: failureLabel(refreshed.failure) });
+					}
+					refreshing = false;
+				})();
+			}
+		}, tickInterval);
+		return () => clearInterval(handle);
+	});
+</script>
+
+{#if authState.isAuthenticated && remainingMs !== null}
+	{#if props.children}
+		{@render props.children({ remainingMs, expired, formatted })}
+	{:else}
+		<span class={classValue} role="timer" aria-live="polite" aria-atomic="true" data-expired={expired}>
+			{#if expired}
+				Session expired
+			{:else}
+				{formatted} until sign-out
+			{/if}
+		</span>
+	{/if}
+{/if}

package/dist/svelte/components/SessionTimer.svelte.d.ts

@@ -0,0 +1,36 @@
+import type { Snippet } from 'svelte';
+/**
+ * SessionTimer — visual countdown until the active session expires.
+ *
+ * Pair with `<SessionWatcher />`: the watcher keeps `authState.session`
+ * fresh on a polling interval; the timer reads `authState.msUntilExpiry`
+ * every second and triggers `authState.refresh()` when the remaining time
+ * crosses `refreshThresholdSeconds` (default 120s).
+ *
+ * The default render is a minimal "{mm:ss} until sign-out" line; consumers
+ * can override with the `children` snippet to compose richer UIs (banner
+ * pills, header chips, modal dialogs).
+ *
+ * Renders nothing when no session is loaded or when `msUntilExpiry` is null
+ * (i.e. the server didn't surface an expiry).
+ */
+type Props = {
+    /** When remaining time drops below this many seconds, the timer calls `authState.refresh()`. Default 120. */
+    refreshThresholdSeconds?: number;
+    /** Tick interval in milliseconds. Default 1000. */
+    tickMs?: number;
+    /** When true, do NOT auto-refresh; render countdown only. */
+    passive?: boolean;
+    /** Custom renderer; receives the remaining ms (clamped to >= 0) + a `expired` flag. */
+    children?: Snippet<[{
+        remainingMs: number;
+        expired: boolean;
+        formatted: string;
+    }]>;
+    /** Optional CSS class for the default render. */
+    class?: string;
+};
+declare const SessionTimer: import("svelte").Component<Props, {}, "">;
+type SessionTimer = ReturnType<typeof SessionTimer>;
+export default SessionTimer;
+//# sourceMappingURL=SessionTimer.svelte.d.ts.map

package/dist/svelte/components/SessionTimer.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SessionTimer.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/SessionTimer.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAOrC;;;;;;;;;;;;;;GAcG;AACH,KAAK,KAAK,GAAG;IACZ,6GAA6G;IAC7G,uBAAuB,CAAC,EAAE,MAAM,CAAC;IACjC,mDAAmD;IACnD,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,6DAA6D;IAC7D,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,uFAAuF;IACvF,QAAQ,CAAC,EAAE,OAAO,CAAC,CAAC;QAAE,WAAW,EAAE,MAAM,CAAC;QAAC,OAAO,EAAE,OAAO,CAAC;QAAC,SAAS,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC,CAAC;IACnF,iDAAiD;IACjD,KAAK,CAAC,EAAE,MAAM,CAAC;CACf,CAAC;AA0FH,QAAA,MAAM,YAAY,2CAAwC,CAAC;AAC3D,KAAK,YAAY,GAAG,UAAU,CAAC,OAAO,YAAY,CAAC,CAAC;AACpD,eAAe,YAAY,CAAC"}

package/dist/svelte/components/SessionWatcher.svelte

@@ -0,0 +1,70 @@
+<script lang="ts">
+	import { onMount } from 'svelte';
+	import { loadAuthComponentLogger } from '../component-logging.js';
+	import { getVibesClient } from '@vibesdotdev/kernel/client';
+	import { getRuntimeSvelteContext } from '@vibesdotdev/surface-sveltekit/svelte/state';
+	import type { AuthApiClient } from '@vibesdotdev/auth/api';
+	import { authState } from '../state.svelte.js';
+	import { failureMessage } from '@vibesdotdev/auth/api';
+	import { attempt, failureLabel } from '../outcome.js';
+
+	/**
+	 * SessionWatcher — non-visual. Loads the current session into the shared
+	 * `authState` store and refreshes it on an interval. Mirror NotificationsLoader.
+	 *
+	 * Mount once at layout level. The canonical `AuthApiClient` is resolved
+	 * via `getVibesClient('auth', runtime)`; tests can inject one via the `client` prop.
+	 *
+	 * NEVER logs the session contents — only `userId`, status, and timing metadata.
+	 */
+	type Props = {
+		client?: AuthApiClient;
+		/** Refresh interval in seconds. Default 60. Set 0 to disable polling. */
+		intervalSeconds?: number;
+	};
+
+	// Captured at component init (context is only readable during init); resolved via load().
+	const runtimeStore = getRuntimeSvelteContext();
+
+	let props: Props = $props();
+
+	const intervalSecondsValue = $derived(props.intervalSeconds ?? 60);
+
+	const logger = () => loadAuthComponentLogger('auth.session-watcher', runtimeStore);
+
+	async function resolveClient(): Promise<AuthApiClient> {
+		if (props.client) return props.client;
+		const client = await getVibesClient<AuthApiClient>('auth', await runtimeStore.load());
+		await client.ensureLoaded();
+		return client;
+	}
+
+	async function refresh() {
+		authState.loading = true;
+		const refreshed = await attempt(async () => {
+			const client = await resolveClient();
+			const session = await client.getSession();
+			authState.session = session;
+			authState.initialized = true;
+			authState.error = null;
+			(await logger()).debug('Session refreshed', {
+				userId: session.user?.id ?? null,
+				hasSession: Boolean(session.session)
+			});
+		});
+		if (!refreshed.ok) {
+			authState.error = failureMessage(refreshed.failure, 'Failed to refresh session');
+			(await logger()).warn('Failed to refresh session', { failure: failureLabel(refreshed.failure) });
+		}
+		authState.loading = false;
+	}
+
+	onMount(() => {
+		void refresh();
+		if (intervalSecondsValue <= 0) return;
+		const handle = setInterval(() => {
+			void refresh();
+		}, intervalSecondsValue * 1000);
+		return () => clearInterval(handle);
+	});
+</script>

package/dist/svelte/components/SessionWatcher.svelte.d.ts

@@ -0,0 +1,19 @@
+import type { AuthApiClient } from '@vibesdotdev/auth/api';
+/**
+ * SessionWatcher — non-visual. Loads the current session into the shared
+ * `authState` store and refreshes it on an interval. Mirror NotificationsLoader.
+ *
+ * Mount once at layout level. The canonical `AuthApiClient` is resolved
+ * via `getVibesClient('auth', runtime)`; tests can inject one via the `client` prop.
+ *
+ * NEVER logs the session contents — only `userId`, status, and timing metadata.
+ */
+type Props = {
+    client?: AuthApiClient;
+    /** Refresh interval in seconds. Default 60. Set 0 to disable polling. */
+    intervalSeconds?: number;
+};
+declare const SessionWatcher: import("svelte").Component<Props, {}, "">;
+type SessionWatcher = ReturnType<typeof SessionWatcher>;
+export default SessionWatcher;
+//# sourceMappingURL=SessionWatcher.svelte.d.ts.map

package/dist/svelte/components/SessionWatcher.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SessionWatcher.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/SessionWatcher.svelte.ts"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AAM1D;;;;;;;;GAQG;AACH,KAAK,KAAK,GAAG;IACZ,MAAM,CAAC,EAAE,aAAa,CAAC;IACvB,yEAAyE;IACzE,eAAe,CAAC,EAAE,MAAM,CAAC;CACzB,CAAC;AA4DH,QAAA,MAAM,cAAc,2CAAwC,CAAC;AAC7D,KAAK,cAAc,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AACxD,eAAe,cAAc,CAAC"}