+
+
+ );
+ }
+
+ if (session?.user) {
+ return (
+
+
+ );
+ }
+
+ const handleSubmit = async (e: React.FormEvent) => {
+ e.preventDefault();
+ setError("");
+ setLoading(true);
+
+ try {
+ if (isSignUp) {
+ const result = await authClient.signUp.email({
+ email,
+ password,
+ name,
+ });
+ if (result.error) {
+ setError(result.error.message || "Sign up failed");
+ }
+ } else {
+ const result = await authClient.signIn.email({
+ email,
+ password,
+ });
+ if (result.error) {
+ setError(result.error.message || "Sign in failed");
+ }
+ }
+ } catch (err) {
+ setError("An unexpected error occurred");
+ } finally {
+ setLoading(false);
+ }
+ };
+
+ return (
+
+
+
+
+
+ + Welcome back +
++ You're signed in as {session.user.email} +
+
+ {session.user.image ? (
+ 
+ ) : (
+
+
+
+
+
+
+ {session.user.name?.charAt(0).toUpperCase() || "U"}
+
+
+ )}
+
+
+ + {session.user.name} +
++ {session.user.email} +
++ Built with{" "} + + BETTER-AUTH + + . +
+
+
+ );
+}
diff --git a/src/routes/demo/form.address.tsx b/src/routes/demo/form.address.tsx
new file mode 100644
index 0000000..13c5b0e
--- /dev/null
+++ b/src/routes/demo/form.address.tsx
@@ -0,0 +1,200 @@
+import { createFileRoute } from '@tanstack/react-router'
+
+import { useAppForm } from '#/hooks/demo.form'
+
+export const Route = createFileRoute('/demo/form/address')({
+ component: AddressForm,
+})
+
+function AddressForm() {
+ const form = useAppForm({
+ defaultValues: {
+ fullName: '',
+ email: '',
+ address: {
+ street: '',
+ city: '',
+ state: '',
+ zipCode: '',
+ country: '',
+ },
+ phone: '',
+ },
+ validators: {
+ onBlur: ({ value }) => {
+ const errors = {
+ fields: {},
+ } as {
+ fields: Record
+
+ + {isSignUp ? "Create an account" : "Sign in"} +
++ {isSignUp + ? "Enter your information to create an account" + : "Enter your email below to login to your account"} +
+ + + +
+
+
+
+ + Built with{" "} + + BETTER-AUTH + + . +
+
+
+ )
+}
diff --git a/src/routes/demo/form.simple.tsx b/src/routes/demo/form.simple.tsx
new file mode 100644
index 0000000..63fc272
--- /dev/null
+++ b/src/routes/demo/form.simple.tsx
@@ -0,0 +1,65 @@
+import { createFileRoute } from '@tanstack/react-router'
+import { z } from 'zod'
+
+import { useAppForm } from '#/hooks/demo.form'
+
+export const Route = createFileRoute('/demo/form/simple')({
+ component: SimpleForm,
+})
+
+const schema = z.object({
+ title: z.string().min(1, 'Title is required'),
+ description: z.string().min(1, 'Description is required'),
+})
+
+function SimpleForm() {
+ const form = useAppForm({
+ defaultValues: {
+ title: '',
+ description: '',
+ },
+ validators: {
+ onBlur: schema,
+ },
+ onSubmit: ({ value }) => {
+ console.log(value)
+ // Show success message
+ alert('Form submitted successfully!')
+ },
+ })
+
+ return (
+
+
+
+
+
+ )
+}
diff --git a/src/routes/demo/prisma.tsx b/src/routes/demo/prisma.tsx
new file mode 100644
index 0000000..6402aea
--- /dev/null
+++ b/src/routes/demo/prisma.tsx
@@ -0,0 +1,186 @@
+import { createFileRoute, useRouter } from '@tanstack/react-router'
+import { createServerFn } from '@tanstack/react-start'
+import { prisma } from '#/db'
+
+const getTodos = createServerFn({
+ method: 'GET',
+}).handler(async () => {
+ return await prisma.todo.findMany({
+ orderBy: { createdAt: 'desc' },
+ })
+})
+
+const createTodo = createServerFn({
+ method: 'POST',
+})
+ .inputValidator((data: { title: string }) => data)
+ .handler(async ({ data }) => {
+ return await prisma.todo.create({
+ data,
+ })
+ })
+
+export const Route = createFileRoute('/demo/prisma')({
+ component: DemoPrisma,
+ loader: async () => await getTodos(),
+})
+
+function DemoPrisma() {
+ const router = useRouter()
+ const todos = Route.useLoaderData()
+
+ const handleSubmit = async (e: React.FormEvent
+
+
+
+
+ )
+}
diff --git a/src/routes/demo/store.tsx b/src/routes/demo/store.tsx
new file mode 100644
index 0000000..042dc9e
--- /dev/null
+++ b/src/routes/demo/store.tsx
@@ -0,0 +1,64 @@
+import { createFileRoute } from '@tanstack/react-router'
+import { useStore } from '@tanstack/react-store'
+
+import { fullName, store } from '#/lib/demo-store'
+
+export const Route = createFileRoute('/demo/store')({
+ component: DemoStore,
+})
+
+function FirstName() {
+ const firstName = useStore(store, (state) => state.firstName)
+ return (
+
+ store.setState((state) => ({ ...state, firstName: e.target.value }))
+ }
+ className="bg-white/10 rounded-lg px-4 py-2 outline-none border border-white/20 hover:border-white/40 focus:border-white/60 transition-colors duration-200 placeholder-white/40"
+ />
+ )
+}
+
+function LastName() {
+ const lastName = useStore(store, (state) => state.lastName)
+ return (
+
+ store.setState((state) => ({ ...state, lastName: e.target.value }))
+ }
+ className="bg-white/10 rounded-lg px-4 py-2 outline-none border border-white/20 hover:border-white/40 focus:border-white/60 transition-colors duration-200 placeholder-white/40"
+ />
+ )
+}
+
+function FullName() {
+ const fName = useStore(fullName, (state) => state)
+ return (
+
+
+
+
+
+
+
+
+
+ 
+
+
+ + Prisma Database Demo +
+Todos
+ +-
+ {todos.map((todo) => (
+
-
+ + + {todo.title} + + #{todo.id} ++
+ ))}
+ {todos.length === 0 && (
+
- + No todos yet. Create one below! + + )} +
+
+ + Powered by Prisma ORM +
++ Next-generation ORM for Node.js & TypeScript with PostgreSQL +
+
+
+ Setup Instructions:
+-
+
-
+ Configure your{' '}
+
+ DATABASE_URL +{' '} + in .env.local +
+ -
+ Run:{' '}
+
+ npx -y prisma generate ++
+ -
+ Run:{' '}
+
+ npx -y prisma db push ++
+ -
+ Optional:{' '}
+
+ npx -y prisma studio ++
+
+ {fName}
+
+ )
+}
+
+function DemoStore() {
+ return (
+
+
+ )
+}
diff --git a/src/routes/demo/table.tsx b/src/routes/demo/table.tsx
new file mode 100644
index 0000000..09cf5ae
--- /dev/null
+++ b/src/routes/demo/table.tsx
@@ -0,0 +1,361 @@
+import React from 'react'
+import { createFileRoute } from '@tanstack/react-router'
+import {
+ flexRender,
+ getCoreRowModel,
+ getFilteredRowModel,
+ getPaginationRowModel,
+ getSortedRowModel,
+ sortingFns,
+ useReactTable,
+} from '@tanstack/react-table'
+import { compareItems, rankItem } from '@tanstack/match-sorter-utils'
+
+import { makeData } from '#/data/demo-table-data'
+
+import type {
+ Column,
+ ColumnDef,
+ ColumnFiltersState,
+ FilterFn,
+ SortingFn,
+} from '@tanstack/react-table'
+import type { RankingInfo } from '@tanstack/match-sorter-utils'
+
+import type { Person } from '#/data/demo-table-data'
+
+export const Route = createFileRoute('/demo/table')({
+ component: TableDemo,
+})
+
+declare module '@tanstack/react-table' {
+ interface FilterFns {
+ fuzzy: FilterFn
+
+ Store Example
+
+
+ )
+}
+
+function Filter({ column }: { column: Column
+ setGlobalFilter(String(value))}
+ className="w-full p-3 bg-gray-800 text-white rounded-lg border border-gray-700 focus:ring-2 focus:ring-blue-500 focus:border-transparent outline-none"
+ placeholder="Search all columns..."
+ />
+
+
+
+
+
+ {table.getHeaderGroups().map((headerGroup) => (
+
+
+
+ |
+ {header.isPlaceholder ? null : (
+ <>
+
+ {flexRender(
+ header.column.columnDef.header,
+ header.getContext(),
+ )}
+ {{
+ asc: ' 🔼',
+ desc: ' 🔽',
+ }[header.column.getIsSorted() as string] ?? null}
+
+ {header.column.getCanFilter() ? (
+
+
+ ) : null}
+
+ )}
+ |
+ )
+ })}
+
|---|
| + {flexRender( + cell.column.columnDef.cell, + cell.getContext(), + )} + | + ) + })} +
+
+
+
+
+
+
+ Page
+
+ {table.getState().pagination.pageIndex + 1} of{' '}
+ {table.getPageCount()}
+
+
+
+ | Go to page:
+ {
+ const page = e.target.value ? Number(e.target.value) - 1 : 0
+ table.setPageIndex(page)
+ }}
+ className="w-16 px-2 py-1 bg-gray-800 rounded-md border border-gray-700 focus:ring-2 focus:ring-blue-500 focus:border-transparent outline-none"
+ />
+
+
+
+ {table.getPrePaginationRowModel().rows.length} Rows
+
+
+
+
+
+
+ {JSON.stringify(
+ {
+ columnFilters: table.getState().columnFilters,
+ globalFilter: table.getState().globalFilter,
+ },
+ null,
+ 2,
+ )}
+
+
+
+ );
+}
diff --git a/src/routes/index.tsx b/src/routes/index.tsx
new file mode 100644
index 0000000..ed19c59
--- /dev/null
+++ b/src/routes/index.tsx
@@ -0,0 +1,13 @@
+import { createFileRoute } from "@tanstack/react-router";
+
+export const Route = createFileRoute("/")({ component: App });
+
+function App() {
+ return (
+
+
+ + TanStack Query Simple Promise Handling +
+-
+ {data.map((todo) => (
+
- + {todo.name} + + ))} +