better-auth-ui-svelte 0.2.3 → 0.3.6

package/README.md

@@ -14,6 +14,12 @@ This is a **complete Svelte 5 port** of the [Better Auth UI React library](https
 
 > **Important:** This library is in early stage development. While we have achieved full feature parity with the React version and all components have been ported, the library has not been battle-tested in production environments yet. Issues may arise. **Use at your own risk until we reach v1.0 stable.**
 
+## About This Port
+
+This Svelte port was primarily built to support my own projects including [stacksee.com](https://stacksee.com) and [textatlas.com](https://textatlas.com). While it currently maintains full feature parity with the original React library, **this port may evolve independently over time**. I may add new features, make different architectural decisions, or implement functionality specifically tailored to my project needs that diverge from the original library.
+
+If you're looking for a library that strictly mirrors the React version, please be aware that this port's API and features may change to better serve the needs of my projects and the Svelte ecosystem.
+
 ## Why Choose Better Auth UI?
 
 - **Easy** – Plug & play authentication components
@@ -34,12 +40,16 @@ This is a **complete Svelte 5 port** of the [Better Auth UI React library](https
 
 ## Installation
 
-> **Note:** The package is not yet published to NPM. For now, you can clone the repository and link it locally.
+Ensure you have Better Auth and shadcn set up in your project first.
 
-Once published, install the package using your preferred package manager:
+Them install the package:
 
 ```bash
-pnpm install better-auth-ui-svelte better-auth zod svelte-sonner
+pnpm add better-auth-ui-svelte
+
+## bun add better-auth-ui-svelte
+## npm install better-auth-ui-svelte
+## yarn add better-auth-ui-svelte
 ```
 
 ### Peer Dependencies
@@ -345,7 +355,18 @@ interface AuthUIProviderProps {
 	};
 
 	// Additional auth methods
-	magicLink?: boolean;
+	magicLink?:
+		| boolean
+		| {
+				resendCooldown?: number;
+				redirectToSentPage?: boolean;
+		  };
+	emailVerification?:
+		| boolean
+		| {
+				resendCooldown?: number;
+				redirectToVerifyPage?: boolean;
+		  };
 	passkey?: boolean;
 
 	// Two-factor authentication

package/dist/auth-client.d.ts

@@ -0,0 +1,8 @@
+import { createAuthClient, type InferSessionFromClient } from 'better-auth/svelte';
+import type { Atom } from 'nanostores';
+/**
+ * Better Auth Svelte client
+ * This provides reactive stores for authentication state
+ */
+export declare const authClient: ReturnType<typeof createAuthClient>;
+export declare const useSession: () => Atom<InferSessionFromClient<typeof authClient>>;

package/dist/auth-client.js

@@ -1,5 +1,6 @@
 import { createAuthClient } from 'better-auth/svelte';
-import { organizationClient, apiKeyClient, twoFactorClient, usernameClient, magicLinkClient, emailOTPClient, lastLoginMethodClient, oneTapClient, genericOAuthClient, anonymousClient, multiSessionClient, passkeyClient } from 'better-auth/client/plugins';
+import { organizationClient, apiKeyClient, twoFactorClient, usernameClient, magicLinkClient, emailOTPClient, lastLoginMethodClient, oneTapClient, genericOAuthClient, anonymousClient, multiSessionClient } from 'better-auth/client/plugins';
+import { passkeyClient } from '@better-auth/passkey/client';
 /**
  * Better Auth Svelte client
  * This provides reactive stores for authentication state
@@ -23,4 +24,4 @@ export const authClient = createAuthClient({
     ]
 });
 // Export convenience methods
-export const { useSession } = authClient;
+export const useSession = authClient.useSession;

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

@@ -34,7 +34,7 @@
 	import { Label } from '../ui/label/index.js';
 	import { Menu } from '@lucide/svelte';
 
-	interface Props extends AccountViewProps {}
+	type Props = AccountViewProps;
 
 	let {
 		className,
@@ -101,9 +101,7 @@
 {#if !accountOptions}
 	<!-- Return nothing if account options not configured -->
 {:else}
-	<div
-		class={cn('flex w-full grow flex-col gap-4 md:flex-row md:gap-12', className, classNames?.base)}
-	>
+	<div class={cn('flex w-full flex-col gap-4 md:flex-row md:gap-12', className, classNames?.base)}>
 		{#if !hideNav}
 			<!-- Mobile Navigation (Drawer) -->
 			<div class="flex justify-between gap-2 md:hidden">
@@ -113,9 +111,11 @@
 
 				<Drawer.Root bind:open={drawerOpen}>
 					<Drawer.Trigger>
-						<Button variant="outline">
-							<Menu />
-						</Button>
+						{#snippet child({ props })}
+							<Button {...props} variant="outline">
+								<Menu />
+							</Button>
+						{/snippet}
 					</Drawer.Trigger>
 					<Drawer.Content>
 						<Drawer.Header>
@@ -180,7 +180,7 @@
 		{:else if view === 'SECURITY'}
 			<SecuritySettingsCards {classNames} {localization} />
 		{:else if view === 'API_KEYS'}
-			<ApiKeysCard classNames={classNames?.card} {localization} /> -->
+			<ApiKeysCard classNames={classNames?.card} {localization} />
 		{:else if view === 'ORGANIZATIONS' && organization}
 			<div class="grid w-full gap-4 md:gap-6">
 				<OrganizationsCard classNames={classNames?.card} {localization} />

package/dist/components/account/account-view.svelte.d.ts

@@ -22,8 +22,6 @@ export interface AccountViewProps {
     view?: AccountViewPath;
     hideNav?: boolean;
 }
-interface Props extends AccountViewProps {
-}
-declare const AccountView: import("svelte").Component<Props, {}, "">;
+declare const AccountView: import("svelte").Component<AccountViewProps, {}, "">;
 type AccountView = ReturnType<typeof AccountView>;
 export default AccountView;

package/dist/components/auth/auth-form.svelte

@@ -64,15 +64,12 @@
 	const config = getAuthUIConfig();
 
 	const {
-		basePath,
 		credentials,
 		localization: contextLocalization,
 		magicLink,
 		emailOTP,
 		signUp,
-		twoFactor: twoFactorEnabled,
-		viewPaths,
-		replace
+		viewPaths
 	} = config;
 
 	const signUpEnabled = !!signUp;

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

@@ -17,6 +17,8 @@
 	import OneTap from './one-tap.svelte';
 	import AuthCallback from './auth-callback.svelte';
 	import SignOut from './sign-out.svelte';
+	import VerifyEmail from './verify-email.svelte';
+	import MagicLinkSent from './magic-link-sent.svelte';
 	import type { AuthViewPath } from '../../utils/view-paths.js';
 	import type { AuthLocalization } from '../../localization/auth-localization.js';
 	import AcceptInvitationCard from '../organization/accept-invitation-card.svelte';
@@ -128,6 +130,10 @@
 	<AuthCallback {redirectTo} />
 {:else if view === 'SIGN_OUT'}
 	<SignOut />
+{:else if view === 'VERIFY_EMAIL'}
+	<VerifyEmail {className} {classNames} {localization} />
+{:else if view === 'MAGIC_LINK_SENT'}
+	<MagicLinkSent {className} {classNames} {localization} />
 {:else if view === 'ACCEPT_INVITATION'}
 	<AcceptInvitationCard {localization} />
 {:else}
@@ -201,7 +207,7 @@
 								socialLayout === 'grid' && 'grid grid-cols-2'
 							)}
 						>
-							{#each social?.providers || [] as providerName}
+							{#each social?.providers || [] as providerName (providerName)}
 								{@const provider = socialProviders.find((p) => p.provider === providerName)}
 								{#if provider}
 									<ProviderButton
@@ -217,7 +223,7 @@
 								{/if}
 							{/each}
 
-							{#each genericOAuth?.providers || [] as provider}
+							{#each genericOAuth?.providers || [] as provider (provider.providerId)}
 								<ProviderButton
 									{classNames}
 									{callbackURL}

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

@@ -17,7 +17,6 @@
 	interface Props {
 		className?: string;
 		classNames?: AuthFormClassNames;
-		callbackURL?: string;
 		isSubmitting?: boolean;
 		localization?: Partial<AuthLocalization>;
 		otpSeparators?: 0 | 1 | 2;
@@ -28,7 +27,6 @@
 	let {
 		className,
 		classNames,
-		callbackURL,
 		isSubmitting: isSubmittingProp,
 		localization: localizationProp,
 		otpSeparators = 0,

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

@@ -3,7 +3,6 @@ import type { AuthFormClassNames } from '../auth-form.svelte';
 interface Props {
     className?: string;
     classNames?: AuthFormClassNames;
-    callbackURL?: string;
     isSubmitting?: boolean;
     localization?: Partial<AuthLocalization>;
     otpSeparators?: 0 | 1 | 2;

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

@@ -45,7 +45,7 @@
 	const captchaHook = $derived(useCaptcha({ localization }));
 
 	// Local state for captcha binding
-	let captchaRef = $state<any>(null);
+	let captchaRef = $state<unknown>(null);
 
 	// Sync captchaRef with the hook
 	$effect(() => {
@@ -75,7 +75,7 @@
 			const basePath = config.basePath || '/auth';
 			const resetPasswordPath = config.viewPaths.RESET_PASSWORD || 'reset-password';
 
-			const fetchOptions: any = {
+			const fetchOptions: Record<string, unknown> = {
 				throw: true,
 				headers: await captchaHook.getCaptchaHeaders('/forget-password')
 			};

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

@@ -5,7 +5,7 @@
 	import { createForm } from '@tanstack/svelte-form';
 	import { useCaptcha } from '../../../hooks/use-captcha.svelte';
 	import { useIsHydrated } from '../../../hooks/use-hydrated.svelte';
-	import { getAuthUIConfig, getLocalization } from '../../../context/auth-ui-config.svelte';
+	import { getAuthUIConfig } from '../../../context/auth-ui-config.svelte';
 	import { cn, getLocalizedError, getSearchParam, getFieldError } from '../../../utils/utils.js';
 	import type { AuthLocalization } from '../../../localization/auth-localization.js';
 	import Captcha from '../../captcha/captcha.svelte';
@@ -41,7 +41,7 @@
 	const { getCaptchaHeaders, resetCaptcha } = captchaHook;
 
 	// Local state for captcha binding
-	let captchaRef = $state<any>(null);
+	let captchaRef = $state<unknown>(null);
 
 	// Sync captchaRef with the hook
 	$effect(() => {
@@ -57,7 +57,9 @@
 		localization: contextLocalization,
 		redirectTo: contextRedirectTo,
 		viewPaths,
-		toast
+		toast,
+		navigate,
+		magicLink: magicLinkConfig
 	} = config;
 
 	const localization = $derived({ ...contextLocalization, ...localizationProp });
@@ -105,7 +107,18 @@
 					fetchOptions
 				});
 
-				toast.success(localization.MAGIC_LINK_EMAIL || 'Magic link sent to your email');
+				// Check if we should redirect to the sent page
+				const shouldRedirect =
+					typeof magicLinkConfig === 'object' && magicLinkConfig.redirectToSentPage;
+
+				if (shouldRedirect) {
+					// Navigate to the magic-link-sent page with the email as a query param
+					const magicLinkSentPath = `${basePath}/${viewPaths.MAGIC_LINK_SENT}`;
+					navigate(`${magicLinkSentPath}?email=${encodeURIComponent(value.email)}`);
+				} else {
+					// Show toast notification (original behavior)
+					toast.success(localization.MAGIC_LINK_EMAIL || 'Magic link sent to your email');
+				}
 
 				// Reset form
 				form.reset();

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

@@ -6,7 +6,7 @@
 	import { useCaptcha } from '../../../hooks/use-captcha.svelte';
 	import { useIsHydrated } from '../../../hooks/use-hydrated.svelte';
 	import { useOnSuccessTransition } from '../../../hooks/use-success-transition.svelte';
-	import { getAuthUIConfig, getLocalization } from '../../../context/auth-ui-config.svelte';
+	import { getAuthUIConfig } from '../../../context/auth-ui-config.svelte';
 	import {
 		cn,
 		getLocalizedError,
@@ -51,7 +51,7 @@
 	const { getCaptchaHeaders, resetCaptcha } = captchaHook;
 
 	// Local state for captcha binding
-	let captchaRef = $state<any>(null);
+	let captchaRef = $state<unknown>(null);
 
 	// Sync captchaRef with the hook
 	$effect(() => {

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

@@ -66,6 +66,7 @@
 	const basePath = config.basePath;
 	const baseURL = config.baseURL;
 	const credentials = config.credentials;
+	const emailVerification = config.emailVerification;
 	const nameRequired = config.nameRequired;
 	const persistClient = config.persistClient;
 	const contextRedirectTo = config.redirectTo;
@@ -89,7 +90,7 @@
 	const { getCaptchaHeaders, resetCaptcha } = captchaHook;
 
 	// Local state for captcha binding
-	let captchaRef = $state<any>(null);
+	let captchaRef = $state<unknown>(null);
 
 	// Sync captchaRef with the hook
 	$effect(() => {
@@ -277,8 +278,7 @@
 
 	// Sign up function
 	async function signUp(values: z.infer<typeof formSchema>) {
-		const { email, password, name, username, confirmPassword, image, ...additionalFieldValues } =
-			values;
+		const { email, password, name, username, image, ...additionalFieldValues } = values;
 
 		try {
 			// Validate additional fields with custom validators if provided
@@ -287,7 +287,7 @@
 				if (!additionalField?.validate) continue;
 
 				if (typeof value === 'string' && !(await additionalField.validate(value))) {
-					form.setFieldMeta(field as any, (prev) => ({
+					form.setFieldMeta(field as never, (prev) => ({
 						...prev,
 						errorMap: {
 							...prev.errorMap,
@@ -299,7 +299,7 @@
 			}
 
 			// Prepare fetch options with captcha headers
-			const fetchOptions: any = {
+			const fetchOptions: Record<string, unknown> = {
 				throw: true,
 				headers: await getCaptchaHeaders('/sign-up/email')
 			};
@@ -314,13 +314,22 @@
 				additionalParams.image = image;
 			}
 
+			// Determine the callback URL for email verification
+			// If redirectToVerifyPage is true, redirect to verify-email page after verification
+			let signUpCallbackURL = getCallbackURL();
+			if (emailVerification?.redirectToVerifyPage) {
+				const origin = baseURL || (typeof window !== 'undefined' ? window.location.origin : '');
+				const verifyEmailPath = `${basePath}/${viewPaths.VERIFY_EMAIL}`;
+				signUpCallbackURL = `${origin}${verifyEmailPath}?verified=true&email=${encodeURIComponent(email as string)}`;
+			}
+
 			const data = await authClient.signUp.email({
 				email: email as string,
 				password: password as string,
 				name: (name as string) || '',
 				...additionalParams,
 				...additionalFieldValues,
-				callbackURL: getCallbackURL(),
+				callbackURL: signUpCallbackURL,
 				fetchOptions
 			});
 
@@ -329,9 +338,14 @@
 				// User is signed in immediately
 				await onSuccess();
 			} else {
-				// Email verification required
-				navigate(`${basePath}/${viewPaths.SIGN_IN}${window.location.search}`);
-				toast.success(localization.SIGN_UP_EMAIL!);
+				// Email verification required - redirect to verify-email view
+				// Note: This handles token-based email verification (default).
+				// If the server uses emailOTP with overrideDefaultEmailVerification,
+				// users receive OTP codes via email instead of verification links.
+				const url = new URL(window.location.href);
+				url.searchParams.set('email', email as string); // URLSearchParams handles encoding automatically
+				navigate(`${basePath}/${viewPaths.VERIFY_EMAIL}?${url.searchParams.toString()}`);
+				// Don't show a toast here since the verify-email view will show all needed info
 			}
 		} catch (error) {
 			toast.error(getLocalizedError({ error, localization }));
@@ -368,7 +382,7 @@
 
 	// Create validators for additional fields dynamically
 	function getAdditionalFieldValidator(field: string) {
-		return (formSchema.shape as any)[field];
+		return (formSchema.shape as Record<string, z.ZodTypeAny>)[field];
 	}
 
 	// Combine isSubmitting states
@@ -416,18 +430,29 @@
 					<div class="flex items-center gap-4">
 						<DropdownMenu.Root>
 							<DropdownMenu.Trigger class="size-fit rounded-full">
-								<UserAvatar
-									isPending={uploadingAvatar}
-									className="size-16"
-									user={avatarImage
-										? {
-												name: form.getFieldValue('name') as string,
-												email: form.getFieldValue('email') as string,
-												image: avatarImage
-											}
-										: null}
-									{localization}
-								/>
+								{#snippet child({ props })}
+									<Button
+										{...props}
+										class="size-fit rounded-full"
+										size="icon"
+										type="button"
+										variant="ghost"
+										disabled={uploadingAvatar}
+									>
+										<UserAvatar
+											isPending={uploadingAvatar}
+											className="size-16"
+											user={avatarImage
+												? {
+														name: form.getFieldValue('name') as string,
+														email: form.getFieldValue('email') as string,
+														image: avatarImage
+													}
+												: null}
+											{localization}
+										/>
+									</Button>
+								{/snippet}
 							</DropdownMenu.Trigger>
 
 							<DropdownMenu.Content align="start">
@@ -607,11 +632,11 @@
 
 	<!-- Additional Fields -->
 	{#if signUpFields}
-		{#each signUpFields.filter((field) => field !== 'name' && field !== 'image') as field}
+		{#each signUpFields.filter((field) => field !== 'name' && field !== 'image') as field (field)}
 			{@const additionalField = additionalFields?.[field]}
 			{#if additionalField}
 				<form.Field
-					name={field as any}
+					name={field as never}
 					validators={{ onChange: getAdditionalFieldValidator(field) }}
 				>
 					{#snippet children(fieldState)}
@@ -623,7 +648,7 @@
 										id={field}
 										checked={fieldState.state.value as boolean}
 										onCheckedChange={(checked) => {
-											fieldState.handleChange(checked as any);
+											fieldState.handleChange(checked as never);
 										}}
 										disabled={isSubmitting}
 									/>

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

@@ -6,11 +6,7 @@
 	import SendIcon from '@lucide/svelte/icons/send';
 	import { useIsHydrated } from '../../../hooks/use-hydrated.svelte';
 	import { useOnSuccessTransition } from '../../../hooks/use-success-transition.svelte';
-	import {
-		getAuthUIConfig,
-		getAuthClient,
-		getLocalization
-	} from '../../../context/auth-ui-config.svelte';
+	import { getAuthUIConfig, getAuthClient } from '../../../context/auth-ui-config.svelte';
 	import { cn, getLocalizedError, getSearchParam, getFieldError } from '../../../utils/utils.js';
 	import type { AuthLocalization } from '../../../localization/auth-localization.js';
 	import type { User } from '../../../types/index.js';

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

@@ -45,6 +45,6 @@
 	{:else}
 		<Mail class={classNames?.form?.icon} />
 	{/if}
-	{localization.SIGN_IN_WITH}{' '}
+	{localization.SIGN_IN_WITH}
 	{view === 'MAGIC_LINK' ? localization.PASSWORD : localization.MAGIC_LINK}
 </Button>