Click to sign in:

` +\n `

This link expires in 5 minutes.

`,\n });\n },\n }),\n ],\n});\n",[18,85],"pulls","branches","forks","envVars",{"_81":26,"_203":26},"connections",{"_81":26,"_202":26},"unfilledCount","emptyCount",{"_33":178,"_13":18,"_72":86,"_43":-5,"_35":36,"_179":40,"_180":24,"_37":307,"_39":26,"_75":87,"_182":-5,"_77":30,"_183":-5,"_224":308,"_17":309},{"_33":191,"_13":85,"_72":84,"_43":86,"_35":36,"_179":40,"_180":24,"_37":304,"_39":26,"_75":76,"_182":193,"_77":30,"_183":-5,"_224":305,"_17":306},{"_33":187,"_13":74,"_72":73,"_43":86,"_35":36,"_179":40,"_180":24,"_37":301,"_39":26,"_75":76,"_182":189,"_77":30,"_183":-5,"_224":302,"_17":303},{"_33":297,"_13":242,"_72":237,"_43":-5,"_35":36,"_179":40,"_180":24,"_37":298,"_39":26,"_75":87,"_182":-5,"_77":30,"_183":-5,"_224":299,"_17":300},{"_33":293,"_13":278,"_72":273,"_43":237,"_35":36,"_179":40,"_180":24,"_37":294,"_39":26,"_75":87,"_182":-5,"_77":30,"_183":-5,"_224":295,"_17":296},{"_33":286,"_13":287,"_72":288,"_43":273,"_35":36,"_179":40,"_180":24,"_37":289,"_39":26,"_75":76,"_182":290,"_77":30,"_183":-5,"_224":291,"_17":292},{"_33":279,"_13":280,"_72":281,"_43":273,"_35":36,"_179":40,"_180":24,"_37":282,"_39":26,"_75":76,"_182":283,"_77":30,"_183":-5,"_224":284,"_17":285},{"_33":270,"_13":271,"_72":272,"_43":273,"_35":36,"_179":40,"_180":24,"_37":274,"_39":26,"_75":76,"_182":275,"_77":30,"_183":-5,"_224":276,"_17":277},{"_33":266,"_13":265,"_72":260,"_43":237,"_35":36,"_179":40,"_180":24,"_37":267,"_39":26,"_75":87,"_182":-5,"_77":30,"_183":-5,"_224":268,"_17":269},{"_33":257,"_13":258,"_72":259,"_43":260,"_35":36,"_179":40,"_180":24,"_37":261,"_39":26,"_75":76,"_182":262,"_77":30,"_183":-5,"_224":263,"_17":264},{"_33":250,"_13":251,"_72":252,"_43":237,"_35":36,"_179":40,"_180":24,"_37":253,"_39":26,"_75":21,"_182":254,"_77":30,"_183":-5,"_224":255,"_17":256},{"_33":243,"_13":244,"_72":245,"_43":237,"_35":36,"_179":40,"_180":24,"_37":246,"_39":26,"_75":21,"_182":247,"_77":30,"_183":-5,"_224":248,"_17":249},{"_33":234,"_13":235,"_72":236,"_43":237,"_35":36,"_179":40,"_180":24,"_37":238,"_39":26,"_75":76,"_182":239,"_77":30,"_183":-5,"_224":240,"_17":241},{"_33":227,"_13":228,"_72":229,"_43":-5,"_35":36,"_179":40,"_180":24,"_37":230,"_39":26,"_75":21,"_182":231,"_77":30,"_183":-5,"_224":232,"_17":233},{"_33":219,"_13":220,"_72":100,"_43":-5,"_35":36,"_179":40,"_180":24,"_37":221,"_39":26,"_75":222,"_182":223,"_77":30,"_183":-5,"_224":225,"_17":226},"67e8202a-4983-11f1-bee4-42b51c65c3df","index.ts",["D",1778096415603],"http","import { parseVal, serveFile } from \"https://esm.town/v/std/utils/index.ts\";\nimport { Hono } from \"npm:hono\";\nimport { auth } from \"./backend/auth.ts\";\nimport { ensureSchema } from \"./backend/schema.ts\";\n\n// Create Better Auth's tables on first run. Idempotent (CREATE TABLE IF NOT EXISTS).\nawait ensureSchema();\n\nconst app = new Hono<{\n Variables: {\n user: typeof auth.$Infer.Session.user | null;\n session: typeof auth.$Infer.Session.session | null;\n };\n}>();\n\n// Mount Better Auth — handles /api/auth/sign-in/magic-link, /api/auth/get-session, etc.\napp.on([\"GET\", \"POST\"], \"/api/auth/*\", (c) => auth.handler(c.req.raw));\n\n// Make the session available to downstream routes via c.get(\"user\") / c.get(\"session\").\napp.use(\"*\", async (c, next) => {\n const session = await auth.api.getSession({ headers: c.req.raw.headers });\n c.set(\"user\", session?.user ?? null);\n c.set(\"session\", session?.session ?? null);\n await next();\n});\n\n// Example protected route — fetch from the frontend to get the current user.\napp.get(\"/api/me\", (c) => {\n const user = c.get(\"user\");\n if (!user) return c.json({ error: \"Not authenticated\" }, 401);\n return c.json({ user });\n});\n\n// Serve the frontend\napp.get(\"/\", () => serveFile(\"/frontend/index.html\"));\napp.get(\"/frontend/**/*\", (c) => serveFile(c.req.path));\n\n// View source redirect\napp.get(\"/source\", (c) => c.redirect(parseVal().links.self.val));\n\n// Unwrap and rethrow Hono errors as the original error so we get real stack traces.\napp.onError((err) => Promise.reject(err));\n\nexport default app.fetch;\n","children",[],[220],"67e7f94c-4983-11f1-bee4-42b51c65c3df","README.md","019dfece-2417-709e-80d8-c5ad6ce93eb5",["D",1778096415603],"# Better Auth Starter\n\nMagic-link authentication for Val Town, powered by\n[Better Auth](https://better-auth.com). Click **Remix** and you have a working\nauth-protected app — no setup required.\n\nIt uses [Val Town SQLite](https://docs.val.town/std/sqlite/) for the user/session\ndatabase and [Val Town Email](https://docs.val.town/std/email/) to send the\nmagic links. **Sending magic links to anyone other than yourself requires\n[Val Town Pro](https://www.val.town/pricing).**\n\n## Architecture\n\n```mermaid\ngraph LR\n Browser -->|\"GET /\"| Hono[\"index.ts
(Hono server)\"]\n Browser -->|\"/api/auth/*\"| BA[\"Better Auth
handler\"]\n Hono -->|serves| HTML[\"index.html\"]\n HTML -->|loads| Entry[\"index.tsx\"]\n Entry -->|renders| App[\"App.tsx\"]\n App -->|useSession| Client[\"auth-client.ts\"]\n Client -->|fetch| BA\n BA -->|reads/writes| SQLite[(\"std/sqlite\")]\n BA -->|sends magic link| Email[\"std/email\"]\n```\n\n## File structure\n\n```\nindex.ts ← Hono entrypoint; mounts Better Auth at /api/auth/*\nbackend/\n auth.ts ← Better Auth instance (server)\n schema.ts ← Creates the user/session/account/verification tables\nfrontend/\n index.html ← HTML shell (loads Twind + React)\n index.tsx ← React entrypoint (mounts )\n lib/\n auth-client.ts ← Better Auth React client (useSession, signIn, signOut)\n components/\n App.tsx ← Root: shows or based on session\n SignIn.tsx ← Email form that calls signIn.magicLink\n Dashboard.tsx ← Signed-in view with sign-out button\n```\n\n## How auth works\n\n1. User enters their email and submits the form. The client calls\n `authClient.signIn.magicLink({ email })`, which `POST`s to\n `/api/auth/sign-in/magic-link`.\n2. Better Auth generates a token, stores it in the `verification` table, and\n calls our `sendMagicLink` callback in `backend/auth.ts`. The callback uses\n `std/email` to send the link.\n3. User clicks the link, which opens\n `/api/auth/magic-link/verify?token=…`. Better Auth validates the token,\n creates a row in `session`, sets a secure cookie, and redirects to `/`.\n4. Back in React, `useSession()` re-fetches `/api/auth/get-session`, the user\n object becomes available, and `` renders ``.\n\n## Adding more auth methods\n\nBetter Auth has a rich\n[plugin ecosystem](https://better-auth.com/docs/plugins). Common next steps:\n\n- **Email + password** — flip `emailAndPassword.enabled` to `true` in\n `backend/auth.ts`. No plugin needed.\n- **Social login (Google, GitHub, …)** — add `socialProviders` to your auth\n config and store the client IDs/secrets as env vars. See the\n [social providers docs](https://better-auth.com/docs/concepts/social-providers).\n- **Passkeys, 2FA, organizations** — add the relevant plugin on the server and\n the matching client plugin in `frontend/lib/auth-client.ts`.\n\nAfter enabling new methods, you may need new database columns. See the\n[database concepts](https://better-auth.com/docs/concepts/database) page — for\nSQLite you'll add the columns directly to `backend/schema.ts`.\n\n## Production checklist\n\n- [ ] Set the **`BETTER_AUTH_SECRET`** env var to a long random string\n (`openssl rand -base64 32`). Without it, sessions are signed with a\n val-derived default that's predictable.\n- [ ] Narrow `baseURL.allowedHosts` in `backend/auth.ts` to the exact hosts\n you serve from (e.g. `[\"myapp.com\", \"*.web.val.run\"]`).\n- [ ] Make sure your Val Town account is on\n [Pro](https://www.val.town/pricing) so emails can be sent to addresses\n other than your own.\n\n## Notes\n\n- The session cookie defaults to 7 days and refreshes itself.\n- Magic-link tokens expire after 5 minutes and are single-use by default.\n- Better Auth uses Kysely under the hood — Val Town's `std/sqlite` is already\n an `@libsql/client` Client, so we hand it straight to `LibsqlDialect`.\n Zero database setup.\n",[],[228],"67e7ebc8-4983-11f1-bee4-42b51c65c3df","index.tsx","019dfece-2417-709e-80d8-bfd446cee7af","019dfece-2417-709e-80d8-c38fb5a19704",["D",1778096415603],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client\";\nimport { App } from \"./components/App.tsx\";\n\nconst root = document.getElementById(\"root\");\nif (!root) {\n throw new Error(\"No root element found\");\n}\n\ncreateRoot(root).render();",[],[242,235],"frontend","67e7e0c4-4983-11f1-bee4-42b51c65c3df","index.html","019dfece-2416-7478-8cf9-8ccd606079e1",["D",1778096415603],"\n\n \n \n \n Better Auth Starter\n \n \n \n \n

\n \n \n \n",[],[242,244],"67e7db06-4983-11f1-bee4-42b51c65c3df","favicon.svg","019dfece-2416-7478-8cf9-8945c5fb13fd",["D",1778096415603],"\n",[],[242,251],"67e7d11a-4983-11f1-bee4-42b51c65c3df","auth-client.ts","019dfece-2416-7478-8cf9-81117de1ca41","019dfece-2416-7478-8cf9-859d97bb5da4",["D",1778096415603],"import { createAuthClient } from \"https://esm.sh/better-auth@1.6.9/react?deps=react@18.2.0,react-dom@18.2.0\";\nimport { magicLinkClient } from \"https://esm.sh/better-auth@1.6.9/client/plugins?deps=react@18.2.0,react-dom@18.2.0\";\n\n// Base URL is the same origin as the page, so we don't need to set it.\n// Plugins must mirror the server-side plugins enabled in backend/auth.ts.\nexport const authClient = createAuthClient({\n plugins: [magicLinkClient()],\n});\n\nexport const { useSession, signIn, signOut } = authClient;\n",[],[242,265,258],"lib","67e7d750-4983-11f1-bee4-42b51c65c3df",["D",1778096415603],[213],[242,265],"67e7b996-4983-11f1-bee4-42b51c65c3df","SignIn.tsx","019dfece-2416-7478-8cf9-7be1054cda53","019dfece-2416-7478-8cf9-7e205f50d783",["D",1778096415603],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useState } from \"https://esm.sh/react@18.2.0\";\nimport { signIn } from \"../lib/auth-client.ts\";\n\nexport function SignIn() {\n const [email, setEmail] = useState(\"\");\n const [status, setStatus] = useState<\"idle\" | \"sending\" | \"sent\" | \"error\">(\n \"idle\",\n );\n const [errorMsg, setErrorMsg] = useState(\"\");\n\n async function handleSubmit(e: React.FormEvent) {\n e.preventDefault();\n setStatus(\"sending\");\n setErrorMsg(\"\");\n const { error } = await signIn.magicLink({\n email,\n callbackURL: \"/\",\n });\n if (error) {\n setStatus(\"error\");\n setErrorMsg(error.message ?? \"Failed to send magic link\");\n } else {\n setStatus(\"sent\");\n }\n }\n\n if (status === \"sent\") {\n return (\n

📬 Check your email

\n We sent a sign-in link to {email}.\n

\n );\n }\n\n return (\n

\n \n Email\n setEmail((e.target as HTMLInputElement).value)}\n placeholder=\"you@example.com\"\n class=\"mt-1 block w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none\"\n disabled={status === \"sending\"}\n />\n \n \n {status === \"sending\" ? \"Sending…\" : \"Send magic link\"}\n \n {status === \"error\" && (\n

{errorMsg}

\n )}\n \n );\n}\n",[],[242,278,271],"components","67e7b112-4983-11f1-bee4-42b51c65c3df","Dashboard.tsx","019dfece-2416-7478-8cf9-7776ae0a4dfc",["D",1778096415603],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { signOut } from \"../lib/auth-client.ts\";\n\ntype User = {\n id: string;\n email: string;\n name: string;\n image?: string | null;\n};\n\nexport function Dashboard({ user }: { user: User }) {\n return (\n

Signed in as

{user.email}

\n {user.name && user.name !== user.email && (\n

Name: {user.name}

\n )}\n

id: {user.id}

\n signOut().then(() => location.reload())}\n class=\"w-full bg-gray-100 hover:bg-gray-200 text-gray-800 font-medium px-4 py-2 rounded-lg transition-colors cursor-pointer\"\n >\n Sign out\n \n

\n );\n}\n",[],[242,278,280],"67e7aa1e-4983-11f1-bee4-42b51c65c3df","App.tsx","019dfece-2416-7478-8cf9-704c0f59d569",["D",1778096415603],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useSession } from \"../lib/auth-client.ts\";\nimport { SignIn } from \"./SignIn.tsx\";\nimport { Dashboard } from \"./Dashboard.tsx\";\n\nexport function App() {\n // Reactive session — updates automatically on sign in / sign out.\n const { data: session, isPending } = useSession();\n\n return (\n

Better Auth Starter

\n Magic-link auth on Val Town, powered by{\" \"}\n \n Better Auth\n .\n

\n\n {isPending\n ?

Loading…

\n : session?.user\n ? \n : }\n\n

\n View source\n

\n );\n}\n",[],[242,278,287],"67e7cdaa-4983-11f1-bee4-42b51c65c3df",["D",1778096415603],[209,210,211],[242,278],"67e7f78a-4983-11f1-bee4-42b51c65c3df",["D",1778096415603],[208,212,214,215,216],[242],["D",1778096415603],[],[18,74],["D",1778096415603],[],[18,85],["D",1778096415603],[205,206],[18],["D",1778096415603],["D",1789600245116],{"_11":12,"_143":80},{"_11":12,"_138":139,"_79":80,"_31":78,"_140":141,"_142":30},{"_39":40,"_13":16,"_33":36,"_127":89,"_128":69,"_129":130,"_131":93,"_132":133,"_134":135,"_136":14,"_137":12},"ctx",{"_52":-5,"_164":348,"_349":350,"_351":352,"_353":30,"_354":30,"_355":30,"_356":24,"_357":-5,"_358":-7,"_359":-7,"_360":26,"_361":30,"_362":30,"_363":-5,"_364":30,"_365":30,"_366":30,"_367":-5},"ENV",{"_319":320,"_321":322,"_323":16,"_324":325,"_326":327,"_328":329,"_330":331,"_332":333,"_334":335,"_336":337,"_338":339,"_340":341,"_342":343,"_344":345,"_346":347},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","a3e067d4463eea85f6334f8e583e8516ae58c4f6","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]

History · backend