better-auth-ui-svelte 0.12.3 → 0.12.5

package/dist/components/auth/forms/email-otp-form.svelte

@@ -45,9 +45,8 @@
 	let verifiedEmail = $state<string | undefined>(undefined);
 
 	// Transition for OTP verification success
-	const { onSuccess, isPending: transitionPending } = useOnSuccessTransition({
-		redirectTo
-	});
+	const transition = useOnSuccessTransition({ redirectTo });
+	const { onSuccess } = transition;
 
 	// Reactive validation schemas
 	const emailFormSchema = $derived(
@@ -106,10 +105,13 @@
 		}
 	}));
 
+	const emailFormIsSubmitting = emailForm.useStore((s) => s.isSubmitting);
+	const otpFormIsSubmitting = otpForm.useStore((s) => s.isSubmitting);
+
 	// Computed submitting states
-	const emailFormSubmitting = $derived(isSubmittingProp || emailForm.state.isSubmitting);
+	const emailFormSubmitting = $derived(isSubmittingProp || emailFormIsSubmitting.current);
 	const otpFormSubmitting = $derived(
-		isSubmittingProp || otpForm.state.isSubmitting || transitionPending
+		isSubmittingProp || otpFormIsSubmitting.current || transition.isPending
 	);
 
 	// Handle email form submission with error handling
@@ -137,7 +139,7 @@
 	// Update parent isSubmitting state
 	$effect(() => {
 		setIsSubmitting?.(
-			emailForm.state.isSubmitting || otpForm.state.isSubmitting || transitionPending
+			emailFormIsSubmitting.current || otpFormIsSubmitting.current || transition.isPending
 		);
 	});
 

package/dist/components/auth/forms/forgot-password-form.svelte

@@ -103,10 +103,12 @@
 		}
 	}));
 
+	const formIsSubmitting = form.useStore((s) => s.isSubmitting);
+
 	// Sync isSubmitting state
 	$effect(() => {
-		isSubmitting = form.state.isSubmitting;
-		setIsSubmitting?.(form.state.isSubmitting);
+		isSubmitting = formIsSubmitting.current;
+		setIsSubmitting?.(formIsSubmitting.current);
 	});
 </script>
 
@@ -130,7 +132,7 @@
 					value={field.state.value}
 					oninput={(e) => field.handleChange(e.currentTarget.value)}
 					onblur={field.handleBlur}
-					disabled={form.state.isSubmitting}
+					disabled={formIsSubmitting.current}
 					class={classNames?.input}
 				/>
 
@@ -147,10 +149,10 @@
 
 	<Button
 		type="submit"
-		disabled={form.state.isSubmitting}
+		disabled={formIsSubmitting.current}
 		class={cn('w-full', classNames?.button, classNames?.primaryButton)}
 	>
-		{#if form.state.isSubmitting}
+		{#if formIsSubmitting.current}
 			<Loader2 class="animate-spin" />
 		{:else}
 			{localization.FORGOT_PASSWORD_ACTION}

package/dist/components/auth/forms/magic-link-form.svelte

@@ -129,11 +129,12 @@
 		}
 	}));
 
-	const isSubmitting = $derived(isSubmittingProp || form.state.isSubmitting);
+	const formIsSubmitting = form.useStore((s) => s.isSubmitting);
+	const isSubmitting = $derived(isSubmittingProp || formIsSubmitting.current);
 
 	// Update parent isSubmitting state
 	$effect(() => {
-		setIsSubmitting?.(form.state.isSubmitting);
+		setIsSubmitting?.(formIsSubmitting.current);
 	});
 </script>
 

package/dist/components/auth/forms/recover-account-form.svelte

@@ -41,9 +41,8 @@
 	// Merge localization from context and props
 	const localization = { ...contextLocalization, ...localizationProp };
 
-	const { onSuccess, isPending: transitionPending } = useOnSuccessTransition({
-		redirectTo
-	});
+	const transition = useOnSuccessTransition({ redirectTo });
+	const { onSuccess } = transition;
 
 	const schema = z.object({
 		code: z.string().min(1, { message: localization.BACKUP_CODE_REQUIRED })
@@ -71,11 +70,12 @@
 	}));
 
 	// Compute final isSubmitting state
-	const isSubmitting = $derived(isSubmittingProp ?? (form.state.isSubmitting || transitionPending));
+	const formIsSubmitting = form.useStore((s) => s.isSubmitting);
+	const isSubmitting = $derived(isSubmittingProp ?? (formIsSubmitting.current || transition.isPending));
 
 	// Sync isSubmitting state
 	$effect(() => {
-		setIsSubmitting?.(form.state.isSubmitting || transitionPending);
+		setIsSubmitting?.(formIsSubmitting.current || transition.isPending);
 	});
 </script>
 

package/dist/components/auth/forms/reset-password-form.svelte

@@ -125,6 +125,8 @@
 			}
 		}
 	}));
+
+	const formIsSubmitting = form.useStore((s) => s.isSubmitting);
 </script>
 
 <form
@@ -147,7 +149,7 @@
 					value={field.state.value}
 					oninput={(e) => field.handleChange(e.currentTarget.value)}
 					onblur={field.handleBlur}
-					disabled={form.state.isSubmitting}
+					disabled={formIsSubmitting.current}
 					class={classNames?.input}
 				/>
 				{#if field.state.meta.errors.length > 0}
@@ -183,7 +185,7 @@
 						value={field.state.value}
 						oninput={(e) => field.handleChange(e.currentTarget.value)}
 						onblur={field.handleBlur}
-						disabled={form.state.isSubmitting}
+						disabled={formIsSubmitting.current}
 						class={classNames?.input}
 					/>
 					{#if field.state.meta.errors.length > 0}
@@ -198,10 +200,10 @@
 
 	<Button
 		type="submit"
-		disabled={form.state.isSubmitting}
+		disabled={formIsSubmitting.current}
 		class={cn('w-full', classNames?.button, classNames?.primaryButton)}
 	>
-		{#if form.state.isSubmitting}
+		{#if formIsSubmitting.current}
 			<Loader2 class="animate-spin" />
 		{:else}
 			{loc.RESET_PASSWORD_ACTION}

package/dist/components/auth/forms/sign-in-form.svelte

@@ -79,9 +79,8 @@
 		captchaHook.captchaRef = captchaRef;
 	});
 
-	const { onSuccess, isPending: transitionPending } = useOnSuccessTransition({
-		redirectTo
-	});
+	const transition = useOnSuccessTransition({ redirectTo });
+	const { onSuccess } = transition;
 
 	// Form schema
 	const formSchema = $derived(
@@ -162,11 +161,12 @@
 		}
 	}));
 
-	const isSubmitting = $derived(isSubmittingProp || form.state.isSubmitting || transitionPending);
+	const formIsSubmitting = form.useStore((s) => s.isSubmitting);
+	const isSubmitting = $derived(isSubmittingProp || formIsSubmitting.current || transition.isPending);
 
 	// Update parent isSubmitting state
 	$effect(() => {
-		setIsSubmitting?.(form.state.isSubmitting || transitionPending);
+		setIsSubmitting?.(formIsSubmitting.current || transition.isPending);
 	});
 </script>
 

package/dist/components/auth/forms/sign-up-form.svelte

@@ -98,9 +98,8 @@
 	});
 
 	// Success transition for navigation
-	const { onSuccess, isPending: transitionPending } = useOnSuccessTransition({
-		redirectTo
-	});
+	const transition = useOnSuccessTransition({ redirectTo });
+	const { onSuccess } = transition;
 
 	// Helper functions
 	function getRedirectTo() {
@@ -391,7 +390,8 @@
 	}
 
 	// Combine isSubmitting states
-	const isSubmitting = $derived(form.state.isSubmitting || transitionPending);
+	const formIsSubmitting = form.useStore((s) => s.isSubmitting);
+	const isSubmitting = $derived(formIsSubmitting.current || transition.isPending);
 
 	// Sync external isSubmitting
 	$effect(() => {

package/dist/components/auth/forms/two-factor-form.svelte

@@ -56,9 +56,8 @@
 
 	const localization = $derived({ ...contextLocalization, ...localizationProp });
 
-	const { onSuccess, isPending: transitionPending } = useOnSuccessTransition({
-		redirectTo
-	});
+	const transition = useOnSuccessTransition({ redirectTo });
+	const { onSuccess } = transition;
 
 	// Get session data to check if 2FA is being enabled
 	const sessionQuery = hooks?.useSession?.();
@@ -128,12 +127,13 @@
 		}
 	}));
 
-	const isSubmitting = $derived(isSubmittingProp || form.state.isSubmitting || transitionPending);
+	const formIsSubmitting = form.useStore((s) => s.isSubmitting);
+	const isSubmitting = $derived(isSubmittingProp || formIsSubmitting.current || transition.isPending);
 
 	// Update parent isSubmitting state
 	$effect(() => {
 		if (setIsSubmitting) {
-			setIsSubmitting(form.state.isSubmitting || transitionPending);
+			setIsSubmitting(formIsSubmitting.current || transition.isPending);
 		}
 	});
 

package/dist/components/auth/magic-link-sent.svelte

@@ -5,6 +5,7 @@
 	import * as Card from '../ui/card/index.js';
 	import { Button } from '../ui/button/index.js';
 	import type { AuthLocalization } from '../../localization/auth-localization.js';
+	import Loader2 from '@lucide/svelte/icons/loader-2';
 	import MailOpen from '@lucide/svelte/icons/mail-open';
 
 	interface Props {
@@ -186,10 +187,10 @@
 				onclick={handleResendMagicLink}
 				class="w-full"
 			>
-				{#if countdown > 0}
+				{#if isResending}
+					<Loader2 class="animate-spin" />
+				{:else if countdown > 0}
 					{localization.RESEND_MAGIC_LINK} ({countdown}s)
-				{:else if isResending}
-					{localization.RESEND_MAGIC_LINK}...
 				{:else}
 					{localization.RESEND_MAGIC_LINK}
 				{/if}

package/dist/components/auth/passkey-button.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import Fingerprint from '@lucide/svelte/icons/fingerprint';
+	import Loader2 from '@lucide/svelte/icons/loader-2';
 	import {
 		getAuthClient,
 		getAuthUIConfig,
@@ -31,8 +32,11 @@
 
 	const { onSuccess } = useOnSuccessTransition({ redirectTo });
 
+	let isPending = $state(false);
+
 	async function signInPasskey() {
 		setIsSubmitting?.(true);
+		isPending = true;
 
 		try {
 			const response = await authClient.signIn.passkey({
@@ -48,6 +52,7 @@
 				);
 
 				setIsSubmitting?.(false);
+				isPending = false;
 			} else {
 				await onSuccess();
 			}
@@ -55,6 +60,7 @@
 			config.toast.error(getLocalizedError({ error, localization: loc }));
 
 			setIsSubmitting?.(false);
+			isPending = false;
 		}
 	}
 </script>
@@ -67,7 +73,11 @@
 	variant="secondary"
 	onclick={signInPasskey}
 >
-	<Fingerprint class={classNames?.form?.icon} />
-	{loc.SIGN_IN_WITH}
-	{loc.PASSKEY}
+	{#if isPending}
+		<Loader2 class="animate-spin" />
+	{:else}
+		<Fingerprint class={classNames?.form?.icon} />
+		{loc.SIGN_IN_WITH}
+		{loc.PASSKEY}
+	{/if}
 </Button>

package/dist/components/auth/provider-button.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import Loader2 from '@lucide/svelte/icons/loader-2';
 	import { Button } from '../ui/button/index.js';
 	import { getAuthClient, getAuthUIConfig } from '../../context/auth-ui-config.svelte';
 	import { cn } from '../../utils/ui.js';
@@ -37,6 +38,8 @@
 	const authClient = getAuthClient();
 	const config = getAuthUIConfig();
 
+	let isPending = $state(false);
+
 	function getRedirectTo() {
 		return redirectToProp || getSearchParam('redirectTo') || config.redirectTo;
 	}
@@ -53,6 +56,7 @@
 
 	async function doSignInSocial() {
 		setIsSubmitting(true);
+		isPending = true;
 
 		try {
 			if (other) {
@@ -94,6 +98,7 @@
 			config.toast.error(getLocalizedError({ error, localization }));
 
 			setIsSubmitting(false);
+			isPending = false;
 		}
 	}
 </script>
@@ -110,14 +115,18 @@
 	variant="outline"
 	onclick={doSignInSocial}
 >
-	{#if provider.icon}
-		<provider.icon class={classNames?.form?.icon} />
-	{/if}
+	{#if isPending}
+		<Loader2 class="animate-spin" />
+	{:else}
+		{#if provider.icon}
+			<provider.icon class={classNames?.form?.icon} />
+		{/if}
 
-	{#if socialLayout === 'grid'}
-		{provider.name}
-	{/if}
-	{#if socialLayout === 'vertical'}
-		{localization.SIGN_IN_WITH} {provider.name}
+		{#if socialLayout === 'grid'}
+			{provider.name}
+		{/if}
+		{#if socialLayout === 'vertical'}
+			{localization.SIGN_IN_WITH} {provider.name}
+		{/if}
 	{/if}
 </Button>

package/dist/components/auth/verify-email.svelte

@@ -5,6 +5,7 @@
 	import * as Card from '../ui/card/index.js';
 	import { Button } from '../ui/button/index.js';
 	import type { AuthLocalization } from '../../localization/auth-localization.js';
+	import Loader2 from '@lucide/svelte/icons/loader-2';
 	import MailOpen from '@lucide/svelte/icons/mail-open';
 	import CheckCircle from '@lucide/svelte/icons/check-circle';
 
@@ -274,7 +275,7 @@
 
 			<Button onclick={handleVerifyEmail} disabled={isVerifying} class="w-full">
 				{#if isVerifying}
-					{localization.VERIFYING || 'Verifying'}...
+					<Loader2 class="animate-spin" />
 				{:else}
 					{localization.VERIFY_EMAIL_BUTTON || 'Verify Email'}
 				{/if}
@@ -299,10 +300,10 @@
 					onclick={handleResendEmail}
 					class="w-full"
 				>
-					{#if countdown > 0}
+					{#if isResending}
+						<Loader2 class="animate-spin" />
+					{:else if countdown > 0}
 						{localization.RESEND_VERIFICATION_EMAIL} ({countdown}s)
-					{:else if isResending}
-						{localization.RESEND_VERIFICATION_EMAIL}...
 					{:else}
 						{localization.RESEND_VERIFICATION_EMAIL}
 					{/if}

package/dist/components/organization/organization-switcher.svelte

@@ -157,11 +157,11 @@
 	const organizationRefetching = $derived(currentOrgResult.isRefetching);
 	const organizationRefetch = currentOrgResult.refetch;
 
-t// Whether there are any non-active orgs or personal account rendered above additionalOrganizations
-tconst hasItemsAboveAdditional = $derived(
-tt(!hidePersonal && !!activeOrganization) ||
-tt(organizations ?? []).some((o) => o.id !== activeOrganization?.id)
-t);
+	// Whether there are any non-active orgs or personal account rendered above additionalOrganizations
+	const hasItemsAboveAdditional = $derived(
+		(!hidePersonal && !!activeOrganization) ||
+		(organizations ?? []).some((o) => o.id !== activeOrganization?.id)
+	);
 
 	// Smarter pending logic: Only show loading if we're truly waiting for data
 	// If we have organizations list, we can show the UI even if active org is still loading

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "better-auth-ui-svelte",
-	"version": "0.12.3",
+	"version": "0.12.5",
 	"description": "Pre-built authentication UI components for Better Auth in Svelte 5",
 	"scripts": {
 		"dev": "vite dev",