chore(example): fix SvelteKit example (#1742)

* refactor: upgrade Svelte, Vite and related packages

* refactor: replace no longer supported `body.callbackURL` with `onSuccess`

* fix: add missing `svelte-kit sync` on `prepare`

* fix: add missing `import`s

* chore(svelte-kit-example): show message & redirect to index after sign up

* chore: add npm script to migrate database

* doc: add more commands to set up

* chore: explicitly disable verification email on sign up

The example does not work if you set `sendOnSignUp: true` without setting up the email server.

* refactor(svelte-kit-example): add type for hooks

* chore(svelte-kit-example): redirect to sign in page if users open dashboard without log in

* chore: diable some rules for svelte-kit-example due to Biome's limited Svelte support

* style: fix format

* chore: update pnpm-lock.yaml

* chore: fix lock file

---------

Co-authored-by: Bereket Engida <Bekacru@gmail.com>

biome.json

@@ -27,6 +27,18 @@
 			}
 		}
 	},
+	"overrides": [
+		{
+			"include": ["examples/svelte-kit-example/**"],
+			"linter": {
+				"rules": {
+					"correctness": {
+						"noUnusedImports": "off"
+					}
+				}
+			}
+		}
+	],
 	"files": {
 		"ignore": [
 			"dist",

examples/svelte-kit-example/.gitignore

@@ -19,3 +19,8 @@ Thumbs.db
 # Vite
 vite.config.js.timestamp-*
 vite.config.ts.timestamp-*
+
+# You cannot create root page under (protected)/ route
+# because it is not protected by authwall.
+./src/routes/(protected)/+page.*
+./src/routes/(protected)/+server.*

examples/svelte-kit-example/README.md

@@ -12,7 +12,11 @@ Email & Password . <u>Social Sign-in with Google</u> . Passkeys . Email Verifica
 2. Move .env.example to .env and provide necessary variables
 3. Run the following commands
    ```bash
+   cd /path/to/better-auth/ # Project root of this better-auth repo, not the root of this example
    pnpm install
+   pnpm build
+   cd ./examples/svelte-kit-example/ # The root of this example project
+   pnpm migrate
    pnpm dev
    ```
 4. Open the browser and navigate to `http://localhost:3000`

examples/svelte-kit-example/package.json

@@ -5,21 +5,24 @@
 	"scripts": {
 		"dev": "vite dev --port 3000",
 		"build": "vite build",
+		"migrate": "pnpx @better-auth/cli migrate",
 		"preview": "vite preview",
 		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
-		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch"
+		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
+		"prepare": "svelte-kit sync"
 	},
 	"devDependencies": {
-		"@sveltejs/adapter-auto": "^3.3.1",
+		"@better-auth/cli": "workspace:*",
+		"@sveltejs/adapter-auto": "^4.0.0",
 		"@sveltejs/kit": "^2.9.0",
-		"@sveltejs/vite-plugin-svelte": "^3.1.2",
+		"@sveltejs/vite-plugin-svelte": "^5.0.3",
 		"@tailwindcss/typography": "^0.5.15",
 		"autoprefixer": "^10.4.20",
-		"svelte": "^4.2.19",
+		"svelte": "^5.22.5",
 		"svelte-check": "^4.1.1",
 		"tailwindcss": "^3.4.16",
 		"typescript": "^5.7.2",
-		"vite": "^5.4.19"
+		"vite": "^6.3.0"
 	},
 	"type": "module",
 	"dependencies": {
@@ -34,7 +37,7 @@
 		"formsnap": "^1.0.1",
 		"mode-watcher": "^0.4.1",
 		"paneforge": "^0.0.6",
-		"svelte-radix": "^1.1.1",
+		"svelte-radix": "^2.0.1",
 		"svelte-sonner": "^0.3.28",
 		"sveltekit-superforms": "^2.21.1",
 		"tailwind-merge": "^2.5.5",

examples/svelte-kit-example/src/app.d.ts

@@ -2,8 +2,11 @@
 // for information about these interfaces
 declare global {
 	namespace App {
+		interface Locals {
+			session?: Session;
+			user?: User;
+		}
 		// interface Error {}
-		// interface Locals {}
 		// interface PageData {}
 		// interface PageState {}
 		// interface Platform {}

examples/svelte-kit-example/src/hooks.server.ts

@@ -1,6 +1,22 @@
 import { auth } from "$lib/auth";
+import { redirect, type Handle } from "@sveltejs/kit";
 import { svelteKitHandler } from "better-auth/svelte-kit";
 
-export async function handle({ event, resolve }) {
+export const handle: Handle = async ({ event, resolve }) => {
+	if (event.route.id?.startsWith("/(protected)/")) {
+		const session = await auth.api.getSession({
+			headers: event.request.headers,
+		});
+
+		if (session) {
+			event.locals.session = session?.session;
+			event.locals.user = session?.user;
+
 			return svelteKitHandler({ event, resolve, auth });
-}
+		} else {
+			redirect(307, "/sign-in");
+		}
+	} else {
+		return svelteKitHandler({ event, resolve, auth });
+	}
+};

examples/svelte-kit-example/src/lib/auth.ts

@@ -16,4 +16,10 @@ export const auth = betterAuth({
 			console.log("Reset password url:", url);
 		},
 	},
+	emailVerification: {
+		sendOnSignUp: false, // TODO enable this option to send email to the user on sign up
+		// sendVerificationEmail: async ({ user, url, token }, request) => {
+		// 	// TODO add function(s) to send verification email.
+		// },
+	},
 });

examples/svelte-kit-example/src/lib/components/ui/alert-dialog/alert-dialog-cancel.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 import { AlertDialog as AlertDialogPrimitive } from "bits-ui";
+import { cn } from "$lib/utils.js";
 
 type $$Props = AlertDialogPrimitive.CancelProps;
 type $$Events = AlertDialogPrimitive.CancelEvents;

examples/svelte-kit-example/src/lib/components/ui/alert-dialog/alert-dialog-content.svelte

@@ -1,6 +1,8 @@
 <script lang="ts">
 import { AlertDialog as AlertDialogPrimitive } from "bits-ui";
-import { flyAndScale } from "$lib/utils.js";
+import { cn, flyAndScale } from "$lib/utils.js";
+import AlertDialogOverlay from "./alert-dialog-overlay.svelte";
+import AlertDialogPortal from "./alert-dialog-portal.svelte";
 
 type $$Props = AlertDialogPrimitive.ContentProps;
 
@@ -10,8 +12,8 @@ export let transitionConfig: $$Props["transitionConfig"] = undefined;
 export { className as class };
 </script>
 
-<AlertDialog.Portal>
+<AlertDialogPortal>
-	<AlertDialog.Overlay />
+	<AlertDialogOverlay />
 	<AlertDialogPrimitive.Content
 		{transition}
 		{transitionConfig}
@@ -23,4 +25,4 @@ export { className as class };
 	>
 		<slot />
 	</AlertDialogPrimitive.Content>
-</AlertDialog.Portal>
+</AlertDialogPortal>

examples/svelte-kit-example/src/lib/components/ui/avatar/avatar-fallback.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 import { Avatar as AvatarPrimitive } from "bits-ui";
+import { cn } from "$lib/utils.js";
 
 type $$Props = AvatarPrimitive.FallbackProps;
 

examples/svelte-kit-example/src/lib/components/ui/avatar/avatar-image.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 import { Avatar as AvatarPrimitive } from "bits-ui";
+import { cn } from "$lib/utils.js";
 
 type $$Props = AvatarPrimitive.ImageProps;
 

examples/svelte-kit-example/src/lib/components/ui/avatar/avatar.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 import { Avatar as AvatarPrimitive } from "bits-ui";
+import { cn } from "$lib/utils.js";
 
 type $$Props = AvatarPrimitive.Props;
 

examples/svelte-kit-example/src/lib/components/ui/button/button.svelte

@@ -1,5 +1,7 @@
 <script lang="ts">
-import { type Events, type Props } from "./index.js";
+import { Button as ButtonPrimitive } from "bits-ui";
+import { buttonVariants, type Events, type Props } from "./index.js";
+import { cn } from "$lib/utils.js";
 
 type $$Props = Props;
 type $$Events = Events;

examples/svelte-kit-example/src/lib/components/ui/calendar/calendar-next-button.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 import { Calendar as CalendarPrimitive } from "bits-ui";
+import { cn } from "$lib/utils.js";
 
 type $$Props = CalendarPrimitive.NextButtonProps;
 type $$Events = CalendarPrimitive.NextButtonEvents;

examples/svelte-kit-example/src/lib/components/ui/calendar/calendar-prev-button.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 import { Calendar as CalendarPrimitive } from "bits-ui";
+import { cn } from "$lib/utils.js";
 
 type $$Props = CalendarPrimitive.PrevButtonProps;
 type $$Events = CalendarPrimitive.PrevButtonEvents;

examples/svelte-kit-example/src/lib/components/ui/calendar/calendar.svelte

@@ -1,5 +1,18 @@
 <script lang="ts">
 import { Calendar as CalendarPrimitive } from "bits-ui";
+import { cn } from "$lib/utils.js";
+import CalendarCell from "./calendar-cell.svelte";
+import CalendarDay from "./calendar-day.svelte";
+import CalendarGridBody from "./calendar-grid-body.svelte";
+import CalendarGridHead from "./calendar-grid-head.svelte";
+import CalendarGridRow from "./calendar-grid-row.svelte";
+import CalendarGrid from "./calendar-grid.svelte";
+import CalendarHeadCell from "./calendar-head-cell.svelte";
+import CalendarHeader from "./calendar-header.svelte";
+import CalendarHeading from "./calendar-heading.svelte";
+import CalendarMonths from "./calendar-months.svelte";
+import CalendarNextButton from "./calendar-next-button.svelte";
+import CalendarPrevButton from "./calendar-prev-button.svelte";
 
 type $$Props = CalendarPrimitive.Props;
 type $$Events = CalendarPrimitive.Events;
@@ -22,35 +35,35 @@ export { className as class };
 	let:months
 	let:weekdays
 >
-	<Calendar.Header>
+	<CalendarHeader>
-		<Calendar.PrevButton />
+		<CalendarPrevButton />
-		<Calendar.Heading />
+		<CalendarHeading />
-		<Calendar.NextButton />
+		<CalendarNextButton />
-	</Calendar.Header>
+	</CalendarHeader>
-	<Calendar.Months>
+	<CalendarMonths>
 		{#each months as month}
-			<Calendar.Grid>
+			<CalendarGrid>
-				<Calendar.GridHead>
+				<CalendarGridHead>
-					<Calendar.GridRow class="flex">
+					<CalendarGridRow class="flex">
 						{#each weekdays as weekday}
-							<Calendar.HeadCell>
+							<CalendarHeadCell>
 								{weekday.slice(0, 2)}
-							</Calendar.HeadCell>
+							</CalendarHeadCell>
 						{/each}
-					</Calendar.GridRow>
+					</CalendarGridRow>
-				</Calendar.GridHead>
+				</CalendarGridHead>
-				<Calendar.GridBody>
+				<CalendarGridBody>
 					{#each month.weeks as weekDates}
-						<Calendar.GridRow class="mt-2 w-full">
+						<CalendarGridRow class="mt-2 w-full">
 							{#each weekDates as date}
-								<Calendar.Cell {date}>
+								<CalendarCell {date}>
-									<Calendar.Day {date} month={month.value} />
+									<CalendarDay {date} month={month.value} />
-								</Calendar.Cell>
+								</CalendarCell>
 							{/each}
-						</Calendar.GridRow>
+						</CalendarGridRow>
 					{/each}
-				</Calendar.GridBody>
+				</CalendarGridBody>
-			</Calendar.Grid>
+			</CalendarGrid>
 		{/each}
-	</Calendar.Months>
+	</CalendarMonths>
 </CalendarPrimitive.Root>

examples/svelte-kit-example/src/lib/components/ui/card/card-content.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+import { cn } from "$lib/utils.js";
 import type { HTMLAttributes } from "svelte/elements";
 
 type $$Props = HTMLAttributes<HTMLDivElement>;

examples/svelte-kit-example/src/lib/components/ui/card/card-description.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+import { cn } from "$lib/utils.js";
 import type { HTMLAttributes } from "svelte/elements";
 
 type $$Props = HTMLAttributes<HTMLParagraphElement>;

examples/svelte-kit-example/src/lib/components/ui/card/card-footer.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+import { cn } from "$lib/utils.js";
 import type { HTMLAttributes } from "svelte/elements";
 
 type $$Props = HTMLAttributes<HTMLDivElement>;

examples/svelte-kit-example/src/lib/components/ui/card/card-header.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+import { cn } from "$lib/utils.js";
 import type { HTMLAttributes } from "svelte/elements";
 
 type $$Props = HTMLAttributes<HTMLDivElement>;

examples/svelte-kit-example/src/lib/components/ui/card/card-title.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+import { cn } from "$lib/utils.js";
 import type { HTMLAttributes } from "svelte/elements";
 import type { HeadingLevel } from "./index.js";
 

examples/svelte-kit-example/src/lib/components/ui/card/card.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+import { cn } from "$lib/utils.js";
 import type { HTMLAttributes } from "svelte/elements";
 
 type $$Props = HTMLAttributes<HTMLDivElement>;

examples/svelte-kit-example/src/lib/components/ui/context-menu/context-menu-checkbox-item.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 import { ContextMenu as ContextMenuPrimitive } from "bits-ui";
+import { cn } from "$lib/utils.js";
 
 type $$Props = ContextMenuPrimitive.CheckboxItemProps;
 type $$Events = ContextMenuPrimitive.CheckboxItemEvents;

examples/svelte-kit-example/src/lib/components/ui/context-menu/context-menu-content.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 import { ContextMenu as ContextMenuPrimitive } from "bits-ui";
-import { flyAndScale } from "$lib/utils.js";
+import { cn, flyAndScale } from "$lib/utils.js";
 
 type $$Props = ContextMenuPrimitive.ContentProps;
 

examples/svelte-kit-example/src/lib/components/ui/context-menu/context-menu-sub-content.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 import { ContextMenu as ContextMenuPrimitive } from "bits-ui";
-import { flyAndScale } from "$lib/utils.js";
+import { cn, flyAndScale } from "$lib/utils.js";
 
 type $$Props = ContextMenuPrimitive.SubContentProps;
 

examples/svelte-kit-example/src/lib/components/ui/dialog/dialog-content.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 import { Dialog as DialogPrimitive } from "bits-ui";
-import { flyAndScale } from "$lib/utils.js";
+import { cn, flyAndScale } from "$lib/utils.js";
 
 type $$Props = DialogPrimitive.ContentProps;
 

examples/svelte-kit-example/src/lib/components/ui/dropdown-menu/dropdown-menu-content.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
-import { flyAndScale } from "$lib/utils.js";
+import { cn, flyAndScale } from "$lib/utils.js";
 
 type $$Props = DropdownMenuPrimitive.ContentProps;
 

examples/svelte-kit-example/src/lib/components/ui/dropdown-menu/dropdown-menu-sub-content.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
-import { flyAndScale } from "$lib/utils.js";
+import { cn, flyAndScale } from "$lib/utils.js";
 
 type $$Props = DropdownMenuPrimitive.SubContentProps;
 

examples/svelte-kit-example/src/lib/components/ui/hover-card/hover-card-content.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 import { LinkPreview as HoverCardPrimitive } from "bits-ui";
-import { flyAndScale } from "$lib/utils.js";
+import { cn, flyAndScale } from "$lib/utils.js";
 
 type $$Props = HoverCardPrimitive.ContentProps;
 

examples/svelte-kit-example/src/lib/components/ui/input/input.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+import { cn } from "$lib/utils.js";
 import type { HTMLInputAttributes } from "svelte/elements";
 import type { InputEvents } from "./index.js";
 

examples/svelte-kit-example/src/lib/components/ui/label/label.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 import { Label as LabelPrimitive } from "bits-ui";
+import { cn } from "$lib/utils.js";
 
 type $$Props = LabelPrimitive.Props;
 

examples/svelte-kit-example/src/lib/components/ui/menubar/menubar-checkbox-item.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 import { Menubar as MenubarPrimitive } from "bits-ui";
+import { cn } from "$lib/utils.js";
 
 type $$Props = MenubarPrimitive.CheckboxItemProps;
 let className: $$Props["class"] = undefined;

examples/svelte-kit-example/src/lib/components/ui/menubar/menubar-content.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 import { Menubar as MenubarPrimitive } from "bits-ui";
-import { flyAndScale } from "$lib/utils.js";
+import { cn, flyAndScale } from "$lib/utils.js";
 
 type $$Props = MenubarPrimitive.ContentProps;
 let className: $$Props["class"] = undefined;

examples/svelte-kit-example/src/lib/components/ui/menubar/menubar-item.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 import { Menubar as MenubarPrimitive } from "bits-ui";
+import { cn } from "$lib/utils.js";
 
 type $$Props = MenubarPrimitive.ItemProps & {
 	inset?: boolean;

examples/svelte-kit-example/src/lib/components/ui/menubar/menubar-label.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 import { Menubar as MenubarPrimitive } from "bits-ui";
+import { cn } from "$lib/utils.js";
 
 type $$Props = MenubarPrimitive.LabelProps & {
 	inset?: boolean;

examples/svelte-kit-example/src/lib/components/ui/menubar/menubar-radio-item.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 import { Menubar as MenubarPrimitive } from "bits-ui";
+import { cn } from "$lib/utils.js";
 
 type $$Props = MenubarPrimitive.RadioItemProps;
 type $$Events = MenubarPrimitive.RadioItemEvents;

examples/svelte-kit-example/src/lib/components/ui/menubar/menubar-separator.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 import { Menubar as MenubarPrimitive } from "bits-ui";
+import { cn } from "$lib/utils.js";
 
 type $$Props = MenubarPrimitive.SeparatorProps;
 let className: $$Props["class"] = undefined;

examples/svelte-kit-example/src/lib/components/ui/menubar/menubar-shortcut.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+import { cn } from "$lib/utils.js";
 import type { HTMLAttributes } from "svelte/elements";
 
 type $$Props = HTMLAttributes<HTMLSpanElement>;

examples/svelte-kit-example/src/lib/components/ui/menubar/menubar-sub-content.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 import { Menubar as MenubarPrimitive } from "bits-ui";
-import { flyAndScale } from "$lib/utils.js";
+import { cn, flyAndScale } from "$lib/utils.js";
 
 type $$Props = MenubarPrimitive.SubContentProps;
 let className: $$Props["class"] = undefined;

examples/svelte-kit-example/src/lib/components/ui/menubar/menubar-sub-trigger.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 import { Menubar as MenubarPrimitive } from "bits-ui";
+import { cn } from "$lib/utils.js";
 
 type $$Props = MenubarPrimitive.SubTriggerProps & {
 	inset?: boolean;

examples/svelte-kit-example/src/lib/components/ui/menubar/menubar-trigger.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 import { Menubar as MenubarPrimitive } from "bits-ui";
+import { cn } from "$lib/utils.js";
 
 type $$Props = MenubarPrimitive.TriggerProps;
 type $$Events = MenubarPrimitive.TriggerEvents;

examples/svelte-kit-example/src/lib/components/ui/menubar/menubar.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 import { Menubar as MenubarPrimitive } from "bits-ui";
+import { cn } from "$lib/utils.js";
 
 type $$Props = MenubarPrimitive.Props;
 

examples/svelte-kit-example/src/lib/components/ui/pagination/pagination-content.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+import { cn } from "$lib/utils.js";
 import type { HTMLAttributes } from "svelte/elements";
 
 type $$Props = HTMLAttributes<HTMLUListElement>;

examples/svelte-kit-example/src/lib/components/ui/pagination/pagination-ellipsis.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+import { cn } from "$lib/utils.js";
 import type { HTMLAttributes } from "svelte/elements";
 
 type $$Props = HTMLAttributes<HTMLSpanElement>;

examples/svelte-kit-example/src/lib/components/ui/pagination/pagination-item.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+import { cn } from "$lib/utils.js";
 import type { HTMLAttributes } from "svelte/elements";
 
 type $$Props = HTMLAttributes<HTMLLIElement>;

examples/svelte-kit-example/src/lib/components/ui/pagination/pagination-link.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 import { Pagination as PaginationPrimitive } from "bits-ui";
+import { cn } from "$lib/utils.js";
 import { type Props } from "$lib/components/ui/button/index.js";
 
 type $$Props = PaginationPrimitive.PageProps &

examples/svelte-kit-example/src/lib/components/ui/pagination/pagination.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 import { Pagination as PaginationPrimitive } from "bits-ui";
+import { cn } from "$lib/utils.js";
 
 type $$Props = PaginationPrimitive.Props;
 type $$Events = PaginationPrimitive.Events;

examples/svelte-kit-example/src/lib/components/ui/popover/popover-content.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 import { Popover as PopoverPrimitive } from "bits-ui";
-import { flyAndScale } from "$lib/utils.js";
+import { cn, flyAndScale } from "$lib/utils.js";
 
 type $$Props = PopoverPrimitive.ContentProps;
 

examples/svelte-kit-example/src/lib/components/ui/progress/progress.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 import { Progress as ProgressPrimitive } from "bits-ui";
+import { cn } from "$lib/utils.js";
 
 type $$Props = ProgressPrimitive.Props;
 

examples/svelte-kit-example/src/lib/components/ui/radio-group/radio-group-item.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 import { RadioGroup as RadioGroupPrimitive } from "bits-ui";
+import { cn } from "$lib/utils.js";
 
 type $$Props = RadioGroupPrimitive.ItemProps & {
 	value: string;

examples/svelte-kit-example/src/lib/components/ui/radio-group/radio-group.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 import { RadioGroup as RadioGroupPrimitive } from "bits-ui";
+import { cn } from "$lib/utils.js";
 
 type $$Props = RadioGroupPrimitive.Props;
 

examples/svelte-kit-example/src/lib/components/ui/range-calendar/range-calendar-cell.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 import { RangeCalendar as RangeCalendarPrimitive } from "bits-ui";
+import { cn } from "$lib/utils.js";
 
 type $$Props = RangeCalendarPrimitive.CellProps;
 

examples/svelte-kit-example/src/lib/components/ui/range-calendar/range-calendar-day.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 import { RangeCalendar as RangeCalendarPrimitive } from "bits-ui";
+import { cn } from "$lib/utils.js";
 
 type $$Props = RangeCalendarPrimitive.DayProps;
 type $$Events = RangeCalendarPrimitive.DayEvents;

examples/svelte-kit-example/src/lib/components/ui/range-calendar/range-calendar-grid-body.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 import { RangeCalendar as RangeCalendarPrimitive } from "bits-ui";
+import { cn } from "$lib/utils.js";
 
 type $$Props = RangeCalendarPrimitive.GridBodyProps;
 

examples/svelte-kit-example/src/lib/components/ui/range-calendar/range-calendar-grid-head.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 import { RangeCalendar as RangeCalendarPrimitive } from "bits-ui";
+import { cn } from "$lib/utils.js";
 
 type $$Props = RangeCalendarPrimitive.GridHeadProps;
 

examples/svelte-kit-example/src/lib/components/ui/range-calendar/range-calendar-grid-row.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 import { RangeCalendar as RangeCalendarPrimitive } from "bits-ui";
+import { cn } from "$lib/utils.js";
 
 type $$Props = RangeCalendarPrimitive.GridRowProps;
 

examples/svelte-kit-example/src/lib/components/ui/range-calendar/range-calendar-grid.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 import { RangeCalendar as RangeCalendarPrimitive } from "bits-ui";
+import { cn } from "$lib/utils.js";
 
 type $$Props = RangeCalendarPrimitive.GridProps;
 

examples/svelte-kit-example/src/lib/components/ui/range-calendar/range-calendar-head-cell.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 import { RangeCalendar as RangeCalendarPrimitive } from "bits-ui";
+import { cn } from "$lib/utils.js";
 
 type $$Props = RangeCalendarPrimitive.HeadCellProps;
 

examples/svelte-kit-example/src/lib/components/ui/range-calendar/range-calendar-header.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 import { RangeCalendar as RangeCalendarPrimitive } from "bits-ui";
+import { cn } from "$lib/utils.js";
 
 type $$Props = RangeCalendarPrimitive.HeaderProps;
 

examples/svelte-kit-example/src/lib/components/ui/range-calendar/range-calendar-heading.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 import { RangeCalendar as RangeCalendarPrimitive } from "bits-ui";
+import { cn } from "$lib/utils.js";
 
 type $$Props = RangeCalendarPrimitive.HeadingProps;
 

examples/svelte-kit-example/src/lib/components/ui/range-calendar/range-calendar-months.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 import type { HTMLAttributes } from "svelte/elements";
+import { cn } from "$lib/utils.js";
 
 type $$Props = HTMLAttributes<HTMLDivElement>;
 

examples/svelte-kit-example/src/lib/components/ui/range-calendar/range-calendar-next-button.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 import { RangeCalendar as RangeCalendarPrimitive } from "bits-ui";
+import { cn } from "$lib/utils.js";
 
 type $$Props = RangeCalendarPrimitive.NextButtonProps;
 type $$Events = RangeCalendarPrimitive.NextButtonEvents;

examples/svelte-kit-example/src/lib/components/ui/range-calendar/range-calendar-prev-button.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 import { RangeCalendar as RangeCalendarPrimitive } from "bits-ui";
+import { cn } from "$lib/utils.js";
 
 type $$Props = RangeCalendarPrimitive.PrevButtonProps;
 type $$Events = RangeCalendarPrimitive.PrevButtonEvents;

examples/svelte-kit-example/src/lib/components/ui/range-calendar/range-calendar.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 import { RangeCalendar as RangeCalendarPrimitive } from "bits-ui";
+import { cn } from "$lib/utils.js";
 
 type $$Props = RangeCalendarPrimitive.Props;
 type $$Events = RangeCalendarPrimitive.Events;

examples/svelte-kit-example/src/lib/components/ui/select/select-content.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 import { Select as SelectPrimitive } from "bits-ui";
 import { scale } from "svelte/transition";
-import { flyAndScale } from "$lib/utils.js";
+import { cn, flyAndScale } from "$lib/utils.js";
 
 type $$Props = SelectPrimitive.ContentProps;
 

examples/svelte-kit-example/src/lib/components/ui/tooltip/tooltip-content.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 import { Tooltip as TooltipPrimitive } from "bits-ui";
-import { flyAndScale } from "$lib/utils.js";
+import { cn, flyAndScale } from "$lib/utils.js";
 
 type $$Props = TooltipPrimitive.ContentProps;
 

examples/svelte-kit-example/src/routes/(protected)/dashboard/+page.svelte

@@ -1,7 +1,15 @@
 <script>
+import { goto } from "$app/navigation";
 import { client } from "$lib/auth-client";
+import * as Avatar from "$lib/components/ui/avatar";
+import { Button } from "$lib/components/ui/button";
+import * as Card from "$lib/components/ui/card";
 
 const session = client.useSession();
+
+if (!session) {
+	goto("/sign-in");
+}
 </script>
 
 <Card.Root class="w-[350px]">
@@ -33,9 +41,7 @@ const session = client.useSession();
       on:click={() => {
         client.signOut({
           fetchOptions: {
-            body: {
+            onSuccess: () => goto("/auth"),
-              callbackURL: "/",
-            },
           },
         });
       }}>Sign Out</Button

examples/svelte-kit-example/src/routes/+page.svelte

@@ -1,5 +1,7 @@
 <script>
 import { client } from "$lib/auth-client";
+import Button from "$lib/components/ui/button/button.svelte";
+
 const features = [
 	"social sign-in",
 	"email and password",

examples/svelte-kit-example/src/routes/forget-password/+page.svelte

@@ -1,5 +1,10 @@
 <script lang="ts">
 import { writable } from "svelte/store";
+import { client } from "$lib/auth-client.js";
+import { Button } from "$lib/components/ui/button";
+import * as Card from "$lib/components/ui/card";
+import { Input } from "$lib/components/ui/input";
+import { Label } from "$lib/components/ui/label";
 
 const email = writable("");
 </script>

examples/svelte-kit-example/src/routes/reset-password/+page.svelte

@@ -1,5 +1,10 @@
 <script>
 import { writable } from "svelte/store";
+import { client } from "$lib/auth-client.js";
+import { Button } from "$lib/components/ui/button";
+import * as Card from "$lib/components/ui/card";
+import { Input } from "$lib/components/ui/input";
+import { Label } from "$lib/components/ui/label";
 
 const confirmPassword = writable("");
 const password = writable("");

examples/svelte-kit-example/src/routes/sign-in/+page.svelte

@@ -1,6 +1,10 @@
 <script lang="ts">
 import { signIn } from "$lib/auth-client";
 import { writable } from "svelte/store";
+import { Button } from "$lib/components/ui/button";
+import * as Card from "$lib/components/ui/card";
+import { Input } from "$lib/components/ui/input";
+import { Label } from "$lib/components/ui/label";
 
 const email = writable("");
 const password = writable("");

examples/svelte-kit-example/src/routes/sign-up/+page.svelte

@@ -1,6 +1,11 @@
 <script lang="ts">
+import { goto } from "$app/navigation";
 import { signUp } from "$lib/auth-client";
 import { writable } from "svelte/store";
+import { Button } from "$lib/components/ui/button";
+import * as Card from "$lib/components/ui/card";
+import { Input } from "$lib/components/ui/input";
+import { Label } from "$lib/components/ui/label";
 
 // Create writable stores for form fields
 const firstName = writable("");
@@ -22,6 +27,10 @@ const handleSignUp = async () => {
 		name: `${user.firstName} ${user.lastName}`,
 		callbackURL: "/",
 		fetchOptions: {
+			onSuccess() {
+				alert("Your account has been created.");
+				goto("/dashboard");
+			},
 			onError(context) {
 				alert(context.error.message);
 			},