better-auth-ui-svelte 0.6.2 → 0.7.0

package/dist/components/admin/admin-view.svelte

@@ -24,7 +24,8 @@
 		pathname,
 		view: viewProp,
 		hideNav,
-		organizationCustomActions
+		organizationCustomActions,
+		fetchOrganizations
 	}: Props = $props();
 
 	const { localization: contextLocalization, Link, adminBasePath } = getAuthUIConfig();
@@ -76,7 +77,7 @@
 		{:else if view === 'USERS'}
 			<UsersAdminTable syncWithUrl={true} />
 		{:else if view === 'ORGANIZATIONS'}
-			<OrganizationsAdminTable syncWithUrl={true} customActions={organizationCustomActions} />
+			<OrganizationsAdminTable syncWithUrl={true} customActions={organizationCustomActions} {fetchOrganizations} />
 		{/if}
 	</div>
 </div>

package/dist/components/admin/organizations-admin-table.svelte

@@ -17,7 +17,7 @@
 		SortingState
 	} from '@tanstack/table-core';
 	import { getCoreRowModel, getPaginationRowModel, getSortedRowModel } from '@tanstack/table-core';
-	import type { Organization, AdminTableAction } from '../../types/admin.js';
+	import type { Organization, AdminTableAction, FetchOrganizationsResponse } from '../../types/admin.js';
 	import { createRawSnippet } from 'svelte';
 	import {
 		getAuthClient,
@@ -46,13 +46,24 @@
 		initialPageSize = 10,
 		syncWithUrl = false,
 		onViewMembers,
-		customActions = []
+		customActions = [],
+		fetchOrganizations: fetchOrganizationsProp
 	}: {
 		initialPageSize?: number;
 		syncWithUrl?: boolean;
 		onViewMembers?: (organizationId: string) => void | Promise<void>;
 		/** Custom actions to add to the dropdown menu */
 		customActions?: AdminTableAction<Organization>[];
+		/**
+		 * Custom function to fetch organizations. Use this to provide admin-level
+		 * access to all organizations (e.g., via a custom API route that queries
+		 * the database directly), since Better Auth's `organization.list()` only
+		 * returns organizations the current user belongs to.
+		 */
+		fetchOrganizations?: (params: {
+			limit: number;
+			offset: number;
+		}) => Promise<FetchOrganizationsResponse>;
 	} = $props();
 
 	// Get Better Auth client and config
@@ -95,34 +106,51 @@
 		}
 	});
 
-	// Fetch organizations from Better Auth
+	// Fetch organizations
 	async function fetchOrganizations() {
 		isLoading = true;
 		try {
-			const { data: response, error } = await authClient.organization.list({});
-
-			if (error) {
-				toast.error(error.message ?? 'Failed to fetch organizations');
-				return;
-			}
+			if (fetchOrganizationsProp) {
+				// Use custom fetch function (recommended for admin access to all orgs)
+				const response = await fetchOrganizationsProp({
+					limit: pagination.pageSize,
+					offset: pagination.pageIndex * pagination.pageSize
+				});
 
-			if (response) {
-				// Better Auth organization.list doesn't support pagination params yet
-				// so we'll do client-side pagination for now
-				const allOrgs = (response as any[]).map((org) => ({
+				data = response.organizations.map((org) => ({
 					id: org.id,
 					name: org.name,
 					slug: org.slug,
 					logo: org.logo,
-					createdAt: org.createdAt ? new Date(org.createdAt) : null,
+					createdAt: org.createdAt ? new Date(org.createdAt as string) : null,
 					metadata: org.metadata
 				}));
+				pageCount = Math.ceil(response.total / pagination.pageSize);
+			} else {
+				// Fallback: Better Auth organization.list only returns orgs the user belongs to
+				const { data: response, error } = await authClient.organization.list({});
 
-				// Client-side pagination
-				const start = pagination.pageIndex * pagination.pageSize;
-				const end = start + pagination.pageSize;
-				data = allOrgs.slice(start, end);
-				pageCount = Math.ceil(allOrgs.length / pagination.pageSize);
+				if (error) {
+					toast.error(error.message ?? 'Failed to fetch organizations');
+					return;
+				}
+
+				if (response) {
+					const allOrgs = (response as any[]).map((org) => ({
+						id: org.id,
+						name: org.name,
+						slug: org.slug,
+						logo: org.logo,
+						createdAt: org.createdAt ? new Date(org.createdAt) : null,
+						metadata: org.metadata
+					}));
+
+					// Client-side pagination (organization.list doesn't support pagination)
+					const start = pagination.pageIndex * pagination.pageSize;
+					const end = start + pagination.pageSize;
+					data = allOrgs.slice(start, end);
+					pageCount = Math.ceil(allOrgs.length / pagination.pageSize);
+				}
 			}
 		} catch (err) {
 			toast.error('Failed to fetch organizations');

package/dist/components/admin/organizations-admin-table.svelte.d.ts

@@ -1,10 +1,20 @@
-import type { Organization, AdminTableAction } from '../../types/admin.js';
+import type { Organization, AdminTableAction, FetchOrganizationsResponse } from '../../types/admin.js';
 type $$ComponentProps = {
     initialPageSize?: number;
     syncWithUrl?: boolean;
     onViewMembers?: (organizationId: string) => void | Promise<void>;
     /** Custom actions to add to the dropdown menu */
     customActions?: AdminTableAction<Organization>[];
+    /**
+     * Custom function to fetch organizations. Use this to provide admin-level
+     * access to all organizations (e.g., via a custom API route that queries
+     * the database directly), since Better Auth's `organization.list()` only
+     * returns organizations the current user belongs to.
+     */
+    fetchOrganizations?: (params: {
+        limit: number;
+        offset: number;
+    }) => Promise<FetchOrganizationsResponse>;
 };
 declare const OrganizationsAdminTable: import("svelte").Component<$$ComponentProps, {}, "">;
 type OrganizationsAdminTable = ReturnType<typeof OrganizationsAdminTable>;

package/dist/components/organization/organization-name-form.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import type { Organization } from 'better-auth/plugins/organization';
+	import { untrack } from 'svelte';
 	import { createForm } from '@tanstack/svelte-form';
 	import { getAuthUIConfig } from '../../context/auth-ui-config.svelte.js';
 	import { cn, getLocalizedError } from '../../utils/utils.js';
@@ -92,9 +93,12 @@
 	const isSubmitting = $derived(form.state.isSubmitting);
 
 	// Update form values when organization changes
+	// Use untrack to prevent infinite loop from form state updates
 	$effect(() => {
 		if (organization?.name !== undefined) {
-			form.setFieldValue('name', organization.name || '');
+			untrack(() => {
+				form.setFieldValue('name', organization.name || '');
+			});
 		}
 	});
 </script>

package/dist/components/settings/security/change-email-card.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { untrack } from 'svelte';
 	import { createForm } from '@tanstack/svelte-form';
 	import * as z from 'zod';
 	import { getAuthUIConfig } from '../../../context/auth-ui-config.svelte.js';
@@ -113,9 +114,12 @@
 	}));
 
 	// Update form values when session data changes
+	// Use untrack to prevent infinite loop from form state updates
 	$effect(() => {
 		if (sessionData?.user.email !== undefined) {
-			form.setFieldValue('email', sessionData.user.email || '');
+			untrack(() => {
+				form.setFieldValue('email', sessionData.user.email || '');
+			});
 		}
 	});
 </script>

package/dist/index.d.ts

@@ -98,7 +98,7 @@ export * from './utils/get-paths.js';
 export { getAuthUIConfig, getAuthClient, getLocalization } from './context/auth-ui-config.svelte.js';
 export { authLocalization } from './localization/auth-localization.js';
 export type { AuthUIConfig, User, Session, AuthLocalization } from './types/index.js';
-export type { UserWithRole, Organization, OrganizationMember, OrganizationWithMembers, OrganizationInvitation, AdminTableAction, UsersAdminTableProps, OrganizationsAdminTableProps, OrganizationMembersDetailProps, BanUserDialogProps, UpdateRoleDialogProps, ImpersonateUserDialogProps, AdminViewProps } from './types/admin.js';
+export type { UserWithRole, Organization, OrganizationMember, OrganizationWithMembers, OrganizationInvitation, AdminTableAction, UsersAdminTableProps, OrganizationsAdminTableProps, FetchOrganizationsResponse, OrganizationMembersDetailProps, BanUserDialogProps, UpdateRoleDialogProps, ImpersonateUserDialogProps, AdminViewProps } from './types/admin.js';
 import AuthFormComponent from './components/auth/auth-form.svelte';
 import UserButtonComponent from './components/user-button.svelte';
 import UserViewComponent from './components/user-view.svelte';
@@ -137,3 +137,4 @@ export type UserInvitationsCardProps = ComponentProps<typeof UserInvitationsCard
 export type SettingsCardClassNames = ComponentProps<typeof SettingsCardComponent>;
 export * from './types/auth-hooks.js';
 export * from './types/auth-mutators.js';
+export { fromStore } from './utils/store-to-rune.svelte.js';

package/dist/index.js

@@ -136,3 +136,4 @@ import UserInvitationsCardComponent from './components/organization/user-invitat
 import SettingsCardComponent from './components/settings/shared/settings-card.svelte';
 export * from './types/auth-hooks.js';
 export * from './types/auth-mutators.js';
+export { fromStore } from './utils/store-to-rune.svelte.js';

package/dist/types/admin.d.ts

@@ -107,6 +107,13 @@ export interface UsersAdminTableProps {
     onResetPassword?: (userId: string) => void | Promise<void>;
     onRevokeSessions?: (userId: string) => void | Promise<void>;
 }
+/**
+ * Response type for the fetchOrganizations callback
+ */
+export interface FetchOrganizationsResponse {
+    organizations: Organization[];
+    total: number;
+}
 /**
  * Props for organizations admin table
  */
@@ -122,6 +129,16 @@ export interface OrganizationsAdminTableProps {
     onDeleteOrganization?: (organizationId: string) => void | Promise<void>;
     /** Custom actions to add to the dropdown menu */
     customActions?: AdminTableAction<Organization>[];
+    /**
+     * Custom function to fetch organizations. Use this to provide admin-level
+     * access to all organizations (e.g., via a custom API route that queries
+     * the database directly), since Better Auth's `organization.list()` only
+     * returns organizations the current user belongs to.
+     */
+    fetchOrganizations?: (params: {
+        limit: number;
+        offset: number;
+    }) => Promise<FetchOrganizationsResponse>;
 }
 /**
  * Props for organization members detail dialog
@@ -184,4 +201,14 @@ export interface AdminViewProps {
     hideNav?: boolean;
     /** Custom actions for organizations table */
     organizationCustomActions?: AdminTableAction<Organization>[];
+    /**
+     * Custom function to fetch organizations. Use this to provide admin-level
+     * access to all organizations (e.g., via a custom API route that queries
+     * the database directly), since Better Auth's `organization.list()` only
+     * returns organizations the current user belongs to.
+     */
+    fetchOrganizations?: (params: {
+        limit: number;
+        offset: number;
+    }) => Promise<FetchOrganizationsResponse>;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "better-auth-ui-svelte",
-  "version": "0.6.2",
+  "version": "0.7.0",
   "description": "Pre-built authentication UI components for Better Auth in Svelte 5",
   "files": [
     "dist",