📬 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","label",[172,173,67],"frontend","components","pulls","branches","forks","envVars",{"_181":26,"_183":26},"connections",{"_181":26,"_182":26},"count","unfilledCount","emptyCount",{"_32":291,"_13":283,"_65":278,"_42":-5,"_34":35,"_165":39,"_166":88,"_36":292,"_38":26,"_68":247,"_168":-5,"_70":24,"_170":-5,"_204":293,"_17":294},{"_32":284,"_13":285,"_65":286,"_42":278,"_34":35,"_165":39,"_166":88,"_36":287,"_38":26,"_68":69,"_168":288,"_70":24,"_170":-5,"_204":289,"_17":290},{"_32":275,"_13":276,"_65":277,"_42":278,"_34":35,"_165":39,"_166":88,"_36":279,"_38":26,"_68":69,"_168":280,"_70":24,"_170":-5,"_204":281,"_17":282},{"_32":271,"_13":172,"_65":217,"_42":-5,"_34":35,"_165":39,"_166":88,"_36":272,"_38":26,"_68":247,"_168":-5,"_70":24,"_170":-5,"_204":273,"_17":274},{"_32":267,"_13":173,"_65":164,"_42":217,"_34":35,"_165":39,"_166":88,"_36":268,"_38":26,"_68":247,"_168":-5,"_70":24,"_170":-5,"_204":269,"_17":270},{"_32":260,"_13":261,"_65":262,"_42":164,"_34":35,"_165":39,"_166":88,"_36":263,"_38":26,"_68":69,"_168":264,"_70":24,"_170":-5,"_204":265,"_17":266},{"_32":253,"_13":254,"_65":255,"_42":164,"_34":35,"_165":39,"_166":88,"_36":256,"_38":26,"_68":69,"_168":257,"_70":24,"_170":-5,"_204":258,"_17":259},{"_32":163,"_13":67,"_65":66,"_42":164,"_34":35,"_165":39,"_166":88,"_36":250,"_38":26,"_68":69,"_168":169,"_70":24,"_170":-5,"_204":251,"_17":252},{"_32":245,"_13":244,"_65":239,"_42":217,"_34":35,"_165":39,"_166":88,"_36":246,"_38":26,"_68":247,"_168":-5,"_70":24,"_170":-5,"_204":248,"_17":249},{"_32":236,"_13":237,"_65":238,"_42":239,"_34":35,"_165":39,"_166":88,"_36":240,"_38":26,"_68":69,"_168":241,"_70":24,"_170":-5,"_204":242,"_17":243},{"_32":229,"_13":230,"_65":231,"_42":217,"_34":35,"_165":39,"_166":88,"_36":232,"_38":26,"_68":21,"_168":233,"_70":24,"_170":-5,"_204":234,"_17":235},{"_32":222,"_13":223,"_65":224,"_42":217,"_34":35,"_165":39,"_166":88,"_36":225,"_38":26,"_68":21,"_168":226,"_70":24,"_170":-5,"_204":227,"_17":228},{"_32":214,"_13":215,"_65":216,"_42":217,"_34":35,"_165":39,"_166":88,"_36":218,"_38":26,"_68":69,"_168":219,"_70":24,"_170":-5,"_204":220,"_17":221},{"_32":207,"_13":208,"_65":209,"_42":-5,"_34":35,"_165":39,"_166":88,"_36":210,"_38":26,"_68":21,"_168":211,"_70":24,"_170":-5,"_204":212,"_17":213},{"_32":199,"_13":200,"_65":86,"_42":-5,"_34":35,"_165":39,"_166":88,"_36":201,"_38":26,"_68":202,"_168":203,"_70":24,"_170":-5,"_204":205,"_17":206},"a785c209-d4fb-47bb-8486-4d1690d26a1e","index.ts",["D",1788268206383],"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",[],[200],"d3ef480f-3b78-4222-ad61-aea90f39dd56","README.md","01a05d17-5993-7099-bcbf-9bf17f980669",["D",1788268206383],"# 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\nuser/session database and [Val Town Email](https://docs.val.town/std/email/) to\nsend the magic links. **Sending magic links to anyone other than yourself\nrequires [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 `/api/auth/magic-link/verify?token=…`.\n Better Auth validates the token, creates a row in `session`, sets a secure\n 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 [plugin ecosystem](https://better-auth.com/docs/plugins).\nCommon 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 random string from\n [`generate-random-signing-key.val.run`](https://generate-random-signing-key.val.run/).\n- [ ] Narrow `baseURL.allowedHosts` in `backend/auth.ts` to the exact hosts you\n serve from (e.g. `[\"myapp.com\", \"*.web.val.run\"]`).\n- [ ] Make sure your Val Town account is on [Pro](https://www.val.town/pricing)\n so emails can be sent to addresses 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 an\n `@libsql/client` Client, so we hand it straight to `LibsqlDialect`. Zero\n database setup.",[],[208],"477b791d-3a5f-45b8-9b91-cdb8f58f6783","index.tsx","01a05d17-5993-7099-bcbf-91ac0b26ee35","01a05d17-5993-7099-bcbf-95f56b304f46",["D",1788268206383],"/** @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();",[],[172,215],"914b9c49-8667-4852-b6d7-5300d3d5fa40","index.html","01a05d17-5993-7099-bcbf-8f8b865778ab",["D",1788268206383],"\n\n \n \n \n Better Auth Starter\n \n \n \n \n

\n \n \n \n",[],[172,223],"f14a8e13-7979-4bdc-a001-1fcc6229d0ce","favicon.svg","01a05d17-5993-7099-bcbf-8a2b4fd31616",["D",1788268206383],"\n",[],[172,230],"60f1daa4-fb0c-4b41-8eb8-1e01be091461","auth-client.ts","01a05d17-5992-76ee-9d9a-78ee0b49cea7","01a05d17-5992-76ee-9d9a-7e255990091f",["D",1788268206383],"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",[],[172,244,237],"lib","88a62ad9-86ae-4379-94c2-3846d22dc3e0",["D",1788268206383],"directory",[193],[172,244],["D",1788268206383],[],[172,173,67],"1536834f-bfdc-45b4-ab0e-19ae814f1e7f","Dashboard.tsx","01a05d17-5992-76ee-9d9a-6c7ab3cda0b7",["D",1788268206383],"/** @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",[],[172,173,254],"657371e4-b29f-46a4-bfd8-1fad9d11c092","App.tsx","01a05d17-5992-76ee-9d9a-6952427634a9",["D",1788268206383],"/** @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",[],[172,173,261],"1806f8c0-3c4c-42bc-a245-f3ecf3e8b506",["D",1788268206383],[189,190,191],[172,173],"81198799-52fd-4bb4-ac28-35dc0cc82cc4",["D",1788268206383],[188,192,194,195,196],[172],"18325672-c612-4ca0-9cba-0ed6f256c558","schema.ts","01a05d17-5992-76ee-9d9a-631330ce87dd","01a05d17-5992-76ee-9d9a-65843d6f9573",["D",1788268206383],"import { sqlite } from \"https://esm.town/v/std/sqlite/main.ts\";\n\n// Better Auth's standard SQLite schema for core auth + magic link.\n// Magic link uses the `verification` table — no extra plugin tables needed.\n//\n// We run this on startup so the template works with zero setup.\n// Better Auth manages all reads/writes via Kysely; we just ensure the tables exist.\nexport async function ensureSchema() {\n await sqlite.batch([\n `CREATE TABLE IF NOT EXISTS user (\n id TEXT PRIMARY KEY,\n name TEXT NOT NULL,\n email TEXT NOT NULL UNIQUE,\n emailVerified INTEGER NOT NULL DEFAULT 0,\n image TEXT,\n createdAt INTEGER NOT NULL,\n updatedAt INTEGER NOT NULL\n )`,\n `CREATE TABLE IF NOT EXISTS session (\n id TEXT PRIMARY KEY,\n userId TEXT NOT NULL REFERENCES user(id) ON DELETE CASCADE,\n token TEXT NOT NULL UNIQUE,\n expiresAt INTEGER NOT NULL,\n ipAddress TEXT,\n userAgent TEXT,\n createdAt INTEGER NOT NULL,\n updatedAt INTEGER NOT NULL\n )`,\n `CREATE TABLE IF NOT EXISTS account (\n id TEXT PRIMARY KEY,\n userId TEXT NOT NULL REFERENCES user(id) ON DELETE CASCADE,\n accountId TEXT NOT NULL,\n providerId TEXT NOT NULL,\n accessToken TEXT,\n refreshToken TEXT,\n accessTokenExpiresAt INTEGER,\n refreshTokenExpiresAt INTEGER,\n scope TEXT,\n idToken TEXT,\n password TEXT,\n createdAt INTEGER NOT NULL,\n updatedAt INTEGER NOT NULL\n )`,\n `CREATE TABLE IF NOT EXISTS verification (\n id TEXT PRIMARY KEY,\n identifier TEXT NOT NULL,\n value TEXT NOT NULL,\n expiresAt INTEGER NOT NULL,\n createdAt INTEGER NOT NULL,\n updatedAt INTEGER NOT NULL\n )`,\n ]);\n}\n",[],[283,276],"backend","7e951b13-5a91-47ac-9baa-486b60e136d1","auth.ts","01a05d17-5992-76ee-9d9a-5c6a81b5245c",["D",1788268206383],"import { sqlite } from \"https://esm.town/v/std/sqlite/main.ts\";\nimport { email as sendEmail } from \"https://esm.town/v/std/email\";\nimport { httpEndpoint, parseVal } from \"https://esm.town/v/std/utils/index.ts\";\nimport { betterAuth } from \"npm:better-auth\";\nimport { magicLink } from \"npm:better-auth/plugins\";\nimport { LibsqlDialect } from \"npm:@libsql/kysely-libsql\";\n\n// Vals can be reached from multiple URLs (the *.web.val.run preview URL,\n// custom domains, branch deploys, etc). Better Auth's dynamic baseURL form\n// derives the URL from each incoming request and validates it against\n// allowedHosts. The fallback is used when running outside an HTTP context\n// (e.g. cron jobs, scripts).\nconst fallback = await httpEndpoint();\n\n// A secret is required to sign session tokens. We default to a per-val auto\n// secret so the template works with zero setup — but for production you should\n// set BETTER_AUTH_SECRET so sessions survive code edits across val versions.\nconst { username, name } = parseVal();\nconst secret =\n Deno.env.get(\"BETTER_AUTH_SECRET\") ?? `val-town-default-${username}-${name}`;\n\n// Val Town's `std/sqlite` is already an `@libsql/client` Client,\n// so we can hand it straight to Better Auth's Kysely libsql dialect.\n// Zero database setup required.\nexport const auth = betterAuth({\n baseURL: {\n // Accept any host so this works on the *.web.val.run preview URL,\n // custom domains, and any future deployment URL. For production you\n // should narrow this to the specific hosts you serve from, e.g.\n // [\"myapp.com\", \"*.web.val.run\"].\n allowedHosts: [\"*\"],\n protocol: \"auto\",\n fallback,\n },\n secret,\n database: {\n dialect: new LibsqlDialect({ client: sqlite }),\n type: \"sqlite\",\n },\n // Disable email+password — this template is magic link only.\n emailAndPassword: { enabled: false },\n plugins: [\n magicLink({\n sendMagicLink: async ({ email, url }) => {\n // Val Town's built-in email. Sending to addresses other than your own\n // requires a Pro account: https://www.val.town/pricing\n await sendEmail({\n to: email,\n subject: \"Your sign-in link\",\n text: `Click to sign in: ${url}\\n\\nThis link expires in 5 minutes.`,\n html:\n `

Click to sign in:

` +\n `

${url}

` +\n `

This link expires in 5 minutes.

`,\n });\n },\n }),\n ],\n});\n",[],[283,285],"8f7bc018-1d5c-41b3-9881-ecb64d068a9a",["D",1788268206383],[185,186],[283],["D",1788268206383],["D",1789656671332],{"_11":12,"_129":73},{"_11":12,"_124":125,"_72":73,"_30":71,"_126":127,"_128":24},{"_38":39,"_13":16,"_32":35,"_114":75,"_115":62,"_116":63,"_117":79,"_118":119,"_120":121,"_122":14,"_123":12},"ctx",{"_51":-5,"_150":333,"_334":335,"_336":337,"_338":24,"_339":24,"_340":24,"_341":88,"_342":-5,"_343":-7,"_344":-7,"_345":26,"_346":24,"_347":24,"_348":-5,"_349":24,"_350":24,"_351":24,"_352":-5},"ENV",{"_304":305,"_306":307,"_308":16,"_309":310,"_311":312,"_313":314,"_315":316,"_317":318,"_319":320,"_321":322,"_323":324,"_325":326,"_327":328,"_329":330,"_331":332},"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 · SignIn.tsx