Login to Lucia Demo

Click the button below to log in:

\n \n Log in\n \n

Or copy and paste this URL into your browser:

${magicLink}

This link will expire in 15 minutes.

\n `,\n });\n\n return true;\n } catch (error) {\n console.error(\"Error sending email:\", error);\n return false;\n }\n}\n\n// Validate a magic link token and create a session\nexport async function validateMagicLinkToken(token: string): Promise<{ valid: boolean; userId?: number }> {\n const now = Math.floor(Date.now() / 1000);\n const tokenHash = hashToken(token);\n\n // Get the token from the database using its hash\n const { rows } = await sqlite.execute(\n `SELECT email, expires_at FROM ${MAGIC_LINKS_TABLE} WHERE id = ?`,\n [tokenHash],\n );\n\n if (rows.length === 0) {\n console.log(\"Did not find magic link token in database\");\n return { valid: false };\n }\n\n const { email, expiresAt } = rows[0];\n\n // Check if the token has expired\n if (now > expiresAt) {\n console.log(\"Magic link token has expired\", expiresAt);\n // Delete expired token\n await sqlite.execute(`DELETE FROM ${MAGIC_LINKS_TABLE} WHERE id = ?`, [tokenHash]);\n return { valid: false };\n }\n\n console.log(\"Valid magic link token\");\n\n // Get or create the user\n const { rows: userRows } = await sqlite.execute(\n `SELECT id FROM ${USER_TABLE} WHERE email = ?`,\n [email],\n );\n\n let userId: number;\n\n if (userRows.length === 0) {\n console.log(\"Creating user\", email);\n // Create a new user\n const { lastInsertRowid } = await sqlite.execute(\n `INSERT INTO ${USER_TABLE} (email, created_at) VALUES (?, ?)`,\n [email, now],\n );\n userId = lastInsertRowid;\n } else {\n console.log(\"Found user\", email);\n userId = userRows[0][0];\n }\n\n // Delete the used token\n // TODO - investigate: I found that when I immediately delete the token (single use),\n // That it causes issues. It seems like somehow the token is getting used before it's getting used.\n // Maybe my browser or something is making a pre-flight request that's using it up? Maybe my email client?\n // await sqlite.execute(`DELETE FROM ${MAGIC_LINKS_TABLE} WHERE id = ?`, [tokenHash]);\n\n return { valid: true, userId };\n}",[],[160,178,186],{"_102":196,"_95":197,"_161":198,"_163":179,"_164":142,"_165":199,"_167":118,"_104":200,"_99":201,"_169":191,"_171":202,"_172":22,"_173":-5,"_174":203,"_98":204},"679fd746-2c0d-11f0-9b08-569c3dd06744","schema.ts","e4b880f2-2b7c-11f0-a53a-569c3dd06744",106,["D",1746709653307],9,"import { sqlite } from \"https://esm.town/v/stevekrouse/sqlite\";\n\nexport const USER_TABLE = \"lucia_demo_users\";\nexport const SESSIONS_TABLE = \"lucia_demo_sessions\";\nexport const MAGIC_LINKS_TABLE = \"lucia_demo_magic_links_v2\";\n\nasync function createTables() {\n await sqlite.execute(`\n CREATE TABLE IF NOT EXISTS ${USER_TABLE} (\n id INTEGER NOT NULL PRIMARY KEY AUTOINCREMENT,\n created_at INTEGER NOT NULL,\n email STRING UNIQUE,\n username STRING UNIQUE\n )\n `);\n await sqlite.execute(`\n CREATE TABLE IF NOT EXISTS ${SESSIONS_TABLE} (\n id TEXT NOT NULL PRIMARY KEY,\n user_id INTEGER NOT NULL REFERENCES ${USER_TABLE}(id),\n expires_at INTEGER NOT NULL\n )\n `);\n await sqlite.execute(`\n CREATE TABLE IF NOT EXISTS ${MAGIC_LINKS_TABLE} (\n id TEXT NOT NULL PRIMARY KEY,\n email TEXT NOT NULL,\n created_at INTEGER NOT NULL,\n expires_at INTEGER NOT NULL\n )\n `);\n}\n\nawait createTables();",[],[160,178,197],{"_102":206,"_95":207,"_161":208,"_163":179,"_164":142,"_165":209,"_167":118,"_104":210,"_99":211,"_169":191,"_171":212,"_172":22,"_173":-5,"_174":213,"_98":214},"54811a9e-2c17-11f0-85f0-569c3dd06744","sessions.ts","7d821622-2b7d-11f0-946f-569c3dd06744",154,["D",1746713916199],16,"import { sqlite } from \"https://esm.town/v/stevekrouse/sqlite\";\nimport { sha256 } from \"npm:@oslojs/crypto/sha2\";\nimport { encodeBase32LowerCaseNoPadding, encodeHexLowerCase } from \"npm:@oslojs/encoding\";\nimport { SESSIONS_TABLE, USER_TABLE } from \"./schema.ts\";\n\nexport function generateSessionToken(): string {\n const bytes = new Uint8Array(20);\n crypto.getRandomValues(bytes);\n const token = encodeBase32LowerCaseNoPadding(bytes);\n return token;\n}\n\nexport async function createSession(token: string, userId: number): Promise {\n const sessionId = encodeHexLowerCase(sha256(new TextEncoder().encode(token)));\n const session: Session = {\n id: sessionId,\n userId,\n expiresAt: new Date(Date.now() + 1000 * 60 * 60 * 24 * 30),\n };\n await sqlite.execute(\n `INSERT INTO ${SESSIONS_TABLE} (id, user_id, expires_at) VALUES (?, ?, ?)`,\n [session.id, session.userId, Math.floor(session.expiresAt.getTime() / 1000)],\n );\n return session;\n}\n\nexport async function validateSessionToken(token: string): Promise {\n const sessionId = encodeHexLowerCase(sha256(new TextEncoder().encode(token)));\n const { rows } = await sqlite.execute(\n `SELECT s.id, s.user_id, s.expires_at, u.id, u.email, u.username \n FROM ${SESSIONS_TABLE} s \n INNER JOIN ${USER_TABLE} u ON u.id = s.user_id \n WHERE s.id = ?`,\n [sessionId],\n );\n\n if (rows.length === 0) {\n return { session: null, user: null };\n }\n\n const row = rows[0];\n const session: Session = {\n id: row[0],\n userId: row[1],\n expiresAt: new Date(row[2] * 1000),\n };\n const user: User = {\n id: row[3],\n email: row[4],\n username: row[5],\n };\n\n if (Date.now() >= session.expiresAt.getTime()) {\n await sqlite.execute(`DELETE FROM ${SESSIONS_TABLE} WHERE id = ?`, [session.id]);\n return { session: null, user: null };\n }\n\n // If 50% of the session lifetime has passed (15 days out of 30), rotate the token\n if (Date.now() >= session.expiresAt.getTime() - 1000 * 60 * 60 * 24 * 15) {\n // Generate a new token\n const newToken = generateSessionToken();\n const newSessionId = encodeHexLowerCase(sha256(new TextEncoder().encode(newToken)));\n\n // Create a new session with the new token\n const newExpiresAt = new Date(Date.now() + 1000 * 60 * 60 * 24 * 30);\n\n // Insert the new session\n await sqlite.execute(\n `INSERT INTO ${SESSIONS_TABLE} (id, user_id, expires_at) VALUES (?, ?, ?)`,\n [newSessionId, session.userId, Math.floor(newExpiresAt.getTime() / 1000)],\n );\n\n // Delete the old session\n await sqlite.execute(`DELETE FROM ${SESSIONS_TABLE} WHERE id = ?`, [session.id]);\n\n // Return the new session and token\n const newSession: Session = {\n id: newSessionId,\n userId: session.userId,\n expiresAt: newExpiresAt,\n };\n\n return { session: newSession, user, newToken };\n }\n\n return { session, user };\n}\n\nexport async function invalidateSession(sessionId: string): Promise {\n await sqlite.execute(`DELETE FROM ${SESSIONS_TABLE} WHERE id = ?`, [sessionId]);\n}\n\nexport type SessionValidationResult =\n | { session: Session; user: User; newToken?: string }\n | { session: null; user: null };\n\nexport interface Session {\n id: string;\n userId: number;\n expiresAt: Date;\n}\n\nexport interface User {\n id: number;\n email?: string;\n username?: string;\n}",[],[160,178,207],[160,178],{"_102":217,"_95":218,"_161":219,"_163":162,"_164":142,"_165":141,"_167":118,"_104":220,"_99":221,"_169":191,"_171":222,"_172":22,"_173":-5,"_174":223,"_98":224},"a515583c-2c2e-11f0-b8b8-569c3dd06744","auth.ts","8e97d428-2b7e-11f0-a530-569c3dd06744",["D",1746723929814],58,"import { getCookie, setCookie } from \"npm:hono/cookie\";\nimport { createMiddleware } from \"npm:hono/factory\";\nimport { createMagicLinkToken, sendMagicLinkEmail, validateMagicLinkToken } from \"./database/magic-links.ts\";\nimport { createSession, generateSessionToken, invalidateSession, validateSessionToken } from \"./database/sessions.ts\";\n\nexport const authMiddleware = createMiddleware(async (c, next) => {\n const url = new URL(c.req.url);\n const path = url.pathname;\n const origin = c.req.header(\"Origin\");\n\n // CSRF Protection, more info: https://lucia-next.pages.dev/sessions/cookies/\n if (c.req.method !== \"GET\") {\n const host = new URL(c.req.url).hostname;\n if (origin === null || origin !== url.origin) {\n return c.text(\"CSRF Protection\", 401);\n }\n }\n\n // Handle magic link request\n if (path === \"/auth/magic-link\" && c.req.method === \"POST\") {\n try {\n const { email } = await c.req.json();\n\n if (!email || typeof email !== \"string\" || !email.includes(\"@\")) {\n return c.json({ success: false, error: \"Invalid email address\" }, 400);\n }\n\n // Create a magic link token\n const token = await createMagicLinkToken(email);\n\n // Send the magic link email\n const emailSent = await sendMagicLinkEmail(url.origin, email, token);\n\n if (!emailSent) {\n return c.json({\n success: false,\n error:\n \"Failed to send email. Val Town requires Pro subscription to send emails to addresses other than your own. See https://www.val.town/pricing\",\n }, 500);\n }\n\n return c.json({ success: true });\n } catch (error) {\n console.error(\"Error creating magic link:\", error);\n return c.json({ success: false, error: \"An unexpected error occurred\" }, 500);\n }\n }\n\n // Handle magic link validation\n if (path.startsWith(\"/auth/magic-link/\") && c.req.method === \"GET\") {\n const token = path.split(\"/\").pop();\n if (token) {\n const result = await validateMagicLinkToken(token);\n if (result.valid && result.userId) {\n // Create a new session\n const sessionToken = generateSessionToken();\n await createSession(sessionToken, result.userId);\n\n // Set the session cookie\n setCookie(c, \"session\", sessionToken, {\n httpOnly: true,\n secure: true,\n sameSite: \"Lax\",\n path: \"/\",\n maxAge: 60 * 60 * 24 * 30, // 30 days\n });\n\n // Redirect to the home page\n return c.redirect(\"/\");\n } else {\n // Invalid or expired token\n return c.redirect(\"/?error=invalid_token\");\n }\n }\n }\n\n // Regular session validation\n const token = getCookie(c, \"session\");\n if (token) {\n const { session, user, newToken } = await validateSessionToken(token);\n // If a new token was generated (session rotation), update the cookie\n if (newToken) {\n setCookie(c, \"session\", newToken, {\n httpOnly: true,\n secure: true,\n sameSite: \"Lax\",\n path: \"/\",\n maxAge: 60 * 60 * 24 * 30, // 30 days\n });\n }\n\n // Handle logout\n if (session && path === \"/auth/logout\") {\n await invalidateSession(session.id);\n\n setCookie(c, \"session\", \"\", {\n httpOnly: true,\n secure: true,\n sameSite: \"Lax\",\n path: \"/\",\n maxAge: 0,\n });\n\n return c.redirect(\"/\");\n }\n\n if (user) {\n c.set(\"user\", user);\n } else {\n // delete the session cookie\n setCookie(c, \"session\", \"\", {\n httpOnly: true,\n secure: true,\n sameSite: \"Lax\",\n path: \"/\",\n maxAge: 0,\n });\n }\n }\n\n // If you end up on the logout page when you weren't logged in, redirect to the home page\n if (path === \"/auth/logout\") {\n return c.redirect(\"/\");\n }\n\n await next();\n});",[],[160,218],{"_102":226,"_95":227,"_161":116,"_163":162,"_164":142,"_165":120,"_167":118,"_104":228,"_99":229,"_169":230,"_171":231,"_172":22,"_173":232,"_174":233,"_98":234},"190dc808-2c13-11f0-bb2a-569c3dd06744","index.ts",["D",1746712098471],13,"http","import { readFile, serveFile } from \"https://esm.town/v/std/utils@85-main/index.ts\";\nimport { sqlite } from \"https://esm.town/v/stevekrouse/sqlite\";\nimport { Hono } from \"npm:hono\";\nimport { authMiddleware } from \"./auth.ts\";\nimport { USER_TABLE } from \"./database/schema.ts\";\n\nconst app = new Hono();\n\n// Serve all /frontend files\napp.get(\"/frontend/**/*\", c => serveFile(c.req.path, import.meta.url));\n\napp.use(authMiddleware);\n\n// Serve index.html at the root / with bootstrapped data\napp.get(\"/\", async c => {\n let html = await readFile(\"/frontend/index.html\", import.meta.url);\n\n const user = c.get(\"user\");\n const dataScript = ``;\n\n // Insert the script right before the closing tag\n html = html.replace(\"\", `${dataScript}`);\n\n return c.html(html);\n});\n\n// API endpoint to update username\napp.post(\"/api/user/username\", async c => {\n const user = c.get(\"user\");\n\n if (!user) {\n return c.json({ success: false, error: \"Not authenticated\" }, 401);\n }\n\n try {\n const { username } = await c.req.json();\n\n if (!username || typeof username !== \"string\") {\n return c.json({ success: false, error: \"Invalid username\" }, 400);\n }\n\n // Validate username length (3-50 characters)\n if (username.length < 3 || username.length > 50) {\n return c.json({\n success: false,\n error: \"Username must be between 3 and 50 characters\",\n }, 400);\n }\n\n // Validate username contains only alphanumeric characters\n if (!/^[a-zA-Z0-9]+$/.test(username)) {\n return c.json({\n success: false,\n error: \"Username contains invalid characters\",\n }, 400);\n }\n\n // Update the username\n await sqlite.execute(\n `UPDATE ${USER_TABLE} SET username = ? WHERE id = ?`,\n [username, user.id],\n );\n\n return c.json({ success: true, username });\n } catch (error) {\n console.error(\"Error updating username:\", error);\n return c.json({ success: false, error: \"An unexpected error occurred\" }, 500);\n }\n});\n\n// Unwrap and rethrow Hono errors as the original error\n// If you delete this, all errors will be \"Internal Server Error\"\napp.onError((err, c) => {\n throw err;\n});\n\n// HTTP vals expect an exported \"fetch handler\"\n// This is how you \"run the server\" in Val Town with Hono\nexport default app.fetch;","lucia",[],[160,227],[160],{"_102":237,"_95":238,"_161":239,"_163":-5,"_164":142,"_165":166,"_167":118,"_104":240,"_99":32,"_169":170,"_171":-5,"_172":22,"_173":-5,"_174":241,"_98":296},"d588b4c6-2b7c-11f0-b025-569c3dd06744","frontend","e2fa51e9-9512-4c62-bb74-26b68500e8ce",["D",1746647560619],[242,277,287],{"_102":243,"_95":244,"_161":245,"_163":239,"_164":142,"_165":166,"_167":118,"_104":246,"_99":32,"_169":170,"_171":-5,"_172":22,"_173":-5,"_174":247,"_98":276},"d588ae2c-2b7c-11f0-b025-569c3dd06744","components","838fa396-65b9-424a-bedc-023d596f7fee",["D",1746647560619],[248,257,266],{"_102":249,"_95":250,"_161":251,"_163":245,"_164":142,"_165":252,"_167":118,"_104":253,"_99":180,"_169":191,"_171":254,"_172":22,"_173":-5,"_174":255,"_98":256},"7f68acb2-2c2c-11f0-a444-569c3dd06744","App.tsx","a338dd5e-2b84-11f0-962a-569c3dd06744",159,["D",1746723007609],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useEffect, useState } from \"https://esm.sh/react@18.2.0\";\nimport { LoginForm } from \"./LoginForm.tsx\";\nimport { UserProfile } from \"./UserProfile.tsx\";\n\ninterface User {\n id: number;\n email?: string;\n username?: string;\n}\n\ninterface InitialData {\n user: User | null;\n projectURL: string;\n error: string | null;\n}\n\nexport function App({ initialData }: { initialData: InitialData }) {\n const [user, setUser] = useState(initialData.user);\n const [error, setError] = useState(initialData.error);\n\n // Update user data after username change\n const updateUser = (updatedUser: User) => {\n setUser(updatedUser);\n };\n\n return (\n

Lucia Demo

\n\n {error && (\n

\n {error}\n setError(null)}\n >\n ×\n \n

\n )}\n\n

\n \n View Source Code\n \n

\n\n {user ? : }\n

\n );\n}",[],[238,244,250],{"_102":258,"_95":259,"_161":260,"_163":245,"_164":142,"_165":261,"_167":118,"_104":262,"_99":180,"_169":191,"_171":263,"_172":22,"_173":-5,"_174":264,"_98":265},"25a65b22-2c0c-11f0-8826-569c3dd06744","LoginForm.tsx","375416fe-2b83-11f0-a6d2-569c3dd06744",105,["D",1746709113129],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useState } from \"https://esm.sh/react@18.2.0\";\n\ninterface LoginFormProps {\n onError: (error: string) => void;\n}\n\nexport function LoginForm({ onError }: LoginFormProps) {\n const [email, setEmail] = useState(\"\");\n const [isSubmitting, setIsSubmitting] = useState(false);\n const [emailSent, setEmailSent] = useState(false);\n\n const handleSubmit = async (e: React.FormEvent) => {\n e.preventDefault();\n\n if (!email || !email.includes(\"@\")) {\n onError(\"Please enter a valid email address\");\n return;\n }\n\n setIsSubmitting(true);\n\n try {\n const response = await fetch(\"/auth/magic-link\", {\n method: \"POST\",\n headers: {\n \"Content-Type\": \"application/json\",\n },\n body: JSON.stringify({ email }),\n });\n\n const data = await response.json();\n\n if (!response.ok) {\n if (data.error) {\n onError(data.error);\n return;\n }\n throw new Error(data.error || \"Failed to send magic link\");\n }\n setEmailSent(true);\n } catch (err) {\n console.error(\"Error sending magic link:\", err);\n onError(err instanceof Error ? err.message : \"Failed to send magic link\");\n } finally {\n setIsSubmitting(false);\n }\n };\n\n if (emailSent) {\n return (\n

Check your email!

\n We've sent a magic link to {email}. Click the link in the email to log in.\n

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

\n \n

\n );\n}",[],[238,244,259],{"_102":267,"_95":268,"_161":269,"_163":245,"_164":142,"_165":270,"_167":118,"_104":271,"_99":272,"_169":191,"_171":273,"_172":22,"_173":-5,"_174":274,"_98":275},"8e299820-2c0d-11f0-ad7d-569c3dd06744","UserProfile.tsx","419564e2-2b83-11f0-b874-569c3dd06744",108,["D",1746709717965],6,"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useState } from \"https://esm.sh/react@18.2.0\";\n\ninterface User {\n id: number;\n email?: string;\n username?: string;\n}\n\ninterface UserProfileProps {\n user: User;\n onUpdate: (user: User) => void;\n}\n\nexport function UserProfile({ user, onUpdate }: UserProfileProps) {\n const [username, setUsername] = useState(user.username || \"\");\n const [isEditing, setIsEditing] = useState(false);\n const [isSubmitting, setIsSubmitting] = useState(false);\n const [error, setError] = useState(null);\n\n const handleSubmit = async (e: React.FormEvent) => {\n e.preventDefault();\n\n if (!username.trim()) {\n setError(\"Username cannot be empty\");\n return;\n }\n\n // Client-side validation to match server-side rules\n if (username.length < 3 || username.length > 50) {\n setError(\"Username must be between 3 and 50 characters\");\n return;\n }\n\n // Ensure username is only letters and numbers\n if (!/^[a-zA-Z0-9]+$/.test(username)) {\n setError(\"Username can only contain letters and numbers\");\n return;\n }\n\n setIsSubmitting(true);\n setError(null);\n\n try {\n const response = await fetch(\"/api/user/username\", {\n method: \"POST\",\n headers: {\n \"Content-Type\": \"application/json\",\n },\n body: JSON.stringify({ username }),\n });\n\n const data = await response.json();\n\n if (!response.ok) {\n throw new Error(data.error || \"Failed to update username\");\n }\n\n onUpdate({ ...user, username });\n setIsEditing(false);\n } catch (err) {\n console.error(\"Error updating username:\", err);\n setError(err instanceof Error ? err.message : \"Failed to update username\");\n } finally {\n setIsSubmitting(false);\n }\n };\n\n return (\n

Welcome!

\n Email: {user.email}\n

\n\n {error && (\n

\n {error}\n setError(null)}\n >\n ×\n \n

\n )}\n\n {isEditing\n ? (\n \n )\n : (\n

\n Username: {user.username\n ? {user.username}\n : Not set}\n

\n setIsEditing(true)}\n >\n {user.username ? \"Edit Username\" : \"Set Username\"}\n \n

\n )}\n\n

\n \n Logout\n \n

\n );\n}",[],[238,244,268],[238,244],{"_102":278,"_95":279,"_161":280,"_163":239,"_164":142,"_165":281,"_167":118,"_104":282,"_99":182,"_169":283,"_171":284,"_172":22,"_173":-5,"_174":285,"_98":286},"48d6c66a-2b83-11f0-8c17-569c3dd06744","index.html","8c6affca-1d04-4839-aec4-4f5b5aa8d076",51,["D",1746650331114],"file","\n\n \n \n \n Lucia Auth Demo\n \n \n \n

\n \n \n \n",[],[238,279],{"_102":288,"_95":289,"_161":290,"_163":239,"_164":142,"_165":291,"_167":118,"_104":292,"_99":122,"_169":191,"_171":293,"_172":22,"_173":-5,"_174":294,"_98":295},"94120fd6-2c2d-11f0-81ae-569c3dd06744","index.tsx","4625d407-4298-495d-97b2-f10a432ce363",163,["D",1746723471774],"/** @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 initialDataString = document.getElementById(\"initial-data\")!.textContent as string;\nlet initialData = JSON.parse(initialDataString);\n\nconst urlParams = new URLSearchParams(window.location.search);\nconst errorParam = urlParams.get(\"error\");\nif (errorParam === \"invalid_token\" && !initialData.user) {\n initialData.error = \"Invalid or expired magic link. Please request a new one.\";\n} else {\n initialData.error = errorParam;\n}\n\ncreateRoot(document.getElementById(\"root\")!).render();",[],[238,289],[238],{"_102":298,"_95":299,"_161":300,"_163":-5,"_164":142,"_165":301,"_167":118,"_104":302,"_99":303,"_169":283,"_171":304,"_172":22,"_173":-5,"_174":305,"_98":306},"01a9b380-2c1c-11f0-bf2a-569c3dd06744","README.md","6e471353-de97-4574-8a7d-04470346ac53",158,["D",1746715924697],18,"# Lucia Auth Starter\n\nA demonstration of [Lucia, the guide](https://lucia-next.pages.dev/), and magic link authentication using Val Town.\n\nThis uses [Val Town SQLite](https://docs.val.town/std/sqlite/) and [Val Town Email](https://docs.val.town/std/email/), so you can Remix & roll-your-own-auth in a single-click. Literally zero set up required.\n\nNote: Sending emails to users besides yourself requires [Val Town Pro](https://www.val.town/pricing).\n\n## Features\n\n- Magic link authentication\n- Server-side rendering with client-side hydration\n- User profile management (username editing)\n- Session management with secure cookies\n- Responsive UI with Tailwind CSS\n\n## Authentication Flow\n\n1. User enters their email address on the login page\n2. A magic link is sent to the user's email\n3. User clicks the magic link in their email\n4. The server validates the token, creates a session, and sets a secure cookie\n5. User is redirected to the authenticated home page\n\n## Technical Implementation\n\n- **Database**:[Val Town SQLite](https://docs.val.town/std/sqlite/) for storing users, sessions, and magic link tokens\n- **Frontend**: React with Tailwind CSS\n- **Backend**: Hono.js for API routes and middleware\n- **Authentication**: Built by following the [Lucia guide](https://lucia-next.pages.dev/)\n\n## API Endpoints\n\nProvided by the Auth Middleware in `backend/auth.ts`:\n\n- `POST /auth/magic-link` - Request a magic link\n- `GET /auth/magic-link/:token` - Validate a magic link token\n- `POST /auth/logout` - Log out the current user\n\nIn the app's API, in `backend/index.ts`:\n\n- `POST /api/user/username` - Update the user's username\n\n## Notes\n\n- Email sending requires Val Town Pro subscription for sending to addresses other than your own\n- Magic links expire after 15 minutes\n- Session tokens are automatically rotated when 50% of their lifetime remains (15 days)\n- Sessions expire after 30 days\n\n## Todos\n\n- When I tried to make the magic link token single-use, it caused issues. I think the best practice there is something a bit more complicated, ie a GET request to an HTML page that makes a POST request.\n- When I tried to make the SameSite=Strict, the cookie stopped working. It's currently Lax, which I think is OK, but it'd be nice to know Strict isn't working.",[],[299],"files",[158,176,184,195,205,216,225,236,242,248,257,266,277,287,297],"counts",{"_311":32,"_312":166,"_313":180,"_314":32},"pulls","branches","forks","envVars","contents",[317,320,323],{"_102":159,"_95":160,"_161":162,"_163":-5,"_164":142,"_165":166,"_167":118,"_104":318,"_99":32,"_169":170,"_171":-5,"_172":22,"_173":-5,"_98":319},["D",1746647560619],[160],{"_102":237,"_95":238,"_161":239,"_163":-5,"_164":142,"_165":166,"_167":118,"_104":321,"_99":32,"_169":170,"_171":-5,"_172":22,"_173":-5,"_98":322},["D",1746647560619],[238],{"_102":298,"_95":299,"_161":300,"_163":-5,"_164":142,"_165":301,"_167":118,"_104":324,"_99":303,"_169":283,"_171":304,"_172":22,"_173":-5,"_98":325},["D",1746715924697],[299],"upstreamProject",{"_102":150,"_95":328,"_110":329,"_112":-5,"_108":109,"_23":330},"reactHonoStarter","Starter template with client-side React & Hono server",{"_93":331,"_134":332},"std","https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvdXBsb2FkZWQvaW1nXzJVaVhpQ1BId3dscVpBbkdZVWlMNjJtcjkxWS5wbmcifQ","upstreamBranch",{"_102":145,"_104":335,"_336":337,"_95":43,"_143":150,"_99":338,"_144":-5,"_146":-5,"_339":340,"_106":-5,"_155":22,"_108":109,"_154":331,"_16":152,"_153":328},["D",1740674013689],"updatedAt",["D",1755284984205],72,"lockfileKey","1755284987385-esm.town_v_std_reactHonoStarter@72-main","emptyEnvVars","isNew","flags",[],"routes/_app.x.$handle.$name.compare.$branch",{"_93":94,"_95":96,"_97":43,"_100":347,"_352":353,"_354":355,"_356":357,"_468":118,"_469":351,"_470":471,"_474":-5},{"_102":103,"_95":96,"_104":348,"_106":-5,"_107":22,"_108":109,"_110":111,"_112":113,"_14":114,"_115":116,"_117":118,"_119":120,"_121":122,"_16":123,"_124":125,"_126":125,"_127":128,"_129":128,"_130":128,"_131":125,"_132":125,"_23":349,"_136":350,"_139":351,"_155":22},["D",1746647560619],{"_93":94,"_134":135},{"_93":94,"_138":135},{"_99":141,"_95":43,"_102":142,"_143":103,"_144":145,"_146":147,"_148":109,"_149":150,"_151":152,"_153":96,"_154":94},"ahead",168,"behind",33,"diff",{"_358":359,"_172":397,"_398":399},"added",[360,368,372,377,382,387,392],{"_98":361,"_362":-7,"_363":364},"backend/auth.ts","targetFile","sourceFile",{"_102":217,"_95":218,"_161":219,"_163":162,"_164":142,"_165":141,"_167":118,"_104":220,"_99":221,"_169":191,"_171":222,"_172":22,"_173":-5,"_174":-7,"_98":365,"_366":367},[160,218],"contentHash","1776318cf09d46784180d6be6cb09af8cc2eef6f9e5086b31bc8ca355444df23",{"_98":369,"_362":-7,"_363":370},"backend/database",{"_102":177,"_95":178,"_161":179,"_163":162,"_164":142,"_165":180,"_167":118,"_104":181,"_99":182,"_169":170,"_171":-5,"_172":22,"_173":-5,"_174":-7,"_98":371,"_366":-5},[160,178],{"_98":373,"_362":-7,"_363":374},"backend/database/magic-links.ts",{"_102":185,"_95":186,"_161":187,"_163":179,"_164":142,"_165":188,"_167":118,"_104":189,"_99":190,"_169":191,"_171":192,"_172":22,"_173":-5,"_174":-7,"_98":375,"_366":376},[160,178,186],"5cc07dbb121ed96b62399278d7b63a7c7121233eba41101b9542406865819f02",{"_98":378,"_362":-7,"_363":379},"backend/database/schema.ts",{"_102":196,"_95":197,"_161":198,"_163":179,"_164":142,"_165":199,"_167":118,"_104":200,"_99":201,"_169":191,"_171":202,"_172":22,"_173":-5,"_174":-7,"_98":380,"_366":381},[160,178,197],"3084c508074849d5afe7c2fe4d197573bc7636127916ff89d6d7847eef1996a3",{"_98":383,"_362":-7,"_363":384},"backend/database/sessions.ts",{"_102":206,"_95":207,"_161":208,"_163":179,"_164":142,"_165":209,"_167":118,"_104":210,"_99":211,"_169":191,"_171":212,"_172":22,"_173":-5,"_174":-7,"_98":385,"_366":386},[160,178,207],"08a3505cc9741f2cd449424768215fca1e31bc7bafd15f6b46b117e3000dddb0",{"_98":388,"_362":-7,"_363":389},"frontend/components/LoginForm.tsx",{"_102":258,"_95":259,"_161":260,"_163":245,"_164":142,"_165":261,"_167":118,"_104":262,"_99":180,"_169":191,"_171":263,"_172":22,"_173":-5,"_174":-7,"_98":390,"_366":391},[238,244,259],"1ad75388c6b00b11c085b592c180d23a82a142586fb264a19fa52d933eb5f6a0",{"_98":393,"_362":-7,"_363":394},"frontend/components/UserProfile.tsx",{"_102":267,"_95":268,"_161":269,"_163":245,"_164":142,"_165":270,"_167":118,"_104":271,"_99":272,"_169":191,"_171":273,"_172":22,"_173":-5,"_174":-7,"_98":395,"_366":396},[238,244,268],"7584f09170205109e5dc8be36e5ab111037aa3611e7aecb0f728b30ca7e35ac9",[],"modified",[400,412,426,440,454],{"_98":299,"_362":401,"_363":409},{"_102":402,"_95":299,"_161":403,"_163":-5,"_164":145,"_165":404,"_167":22,"_104":405,"_99":190,"_169":283,"_171":406,"_172":22,"_173":-5,"_174":-7,"_98":407,"_366":408},"1d794ef6-0019-11f0-8283-569c3dd06744","a50c3760-f53e-11ef-bd6d-569c3dd06744",37,["D",1741876831709],"# React Hono Starter\n\nThis app is a starter template for client-side React and server-side Hono.\n\n- **Remix** this starter template on the top right to get started.\n\n- The **entrypoint** is `/backend/index.ts`. That's the backend HTTP server, which also serves the all the frontend assets.\n\n- The **client-side entrypoint** is `/frontend/index.html`, which in turn imports `/frontend/index.tsx`, which in turn imports the React app from `/frontend/components/App.tsx`.\n\n[React Hono Example](https://www.val.town/x/stevekrouse/reactHonoExample) is a fuller featured example project, with a SQLite database table, queries, client-side CSS and a favicon, and some shared code that runs on both client and server.",[299],"729ba8eda07c6c07b8edeaee4f3e92b0a460d5f6d2ebf8f31c801235b6e1ea5c",{"_102":298,"_95":299,"_161":300,"_163":-5,"_164":142,"_165":301,"_167":118,"_104":302,"_99":303,"_169":283,"_171":304,"_172":22,"_173":-5,"_174":-7,"_98":410,"_366":411},[299],"d28f9ebd09bda76860c586691d7f2f18e70b0bcbbc0908490348dc2cb29fe1be",{"_98":413,"_362":414,"_363":423},"backend/index.ts",{"_102":415,"_95":227,"_161":416,"_163":417,"_164":145,"_165":147,"_167":22,"_104":418,"_99":419,"_169":230,"_171":420,"_172":22,"_173":-5,"_174":-7,"_98":421,"_366":422},"d8603fe6-13af-11f0-a754-569c3dd06744","a9b2b20a-f528-11ef-9e98-569c3dd06744","a1c25866-f528-11ef-8bc0-569c3dd06744",["D",1744030641875],11,"import { serveFile } from \"https://esm.town/v/std/utils@85-main/index.ts\";\nimport { Hono } from \"npm:hono\";\n\nconst app = new Hono();\n\n// Serve index.html at the root /\napp.get(\"/\", async c => {\n return serveFile(\"/frontend/index.html\", import.meta.url);\n});\n\n// Serve all /frontend files\napp.get(\"/frontend/**/*\", c => serveFile(c.req.path, import.meta.url));\n\n// Add your API routes here\n// app.get(\"/api/data\", c => c.json({ hello: \"world\" }));\n\n// Unwrap and rethrow Hono errors as the original error\n// If you delete this, all errors will be \"Internal Server Error\"\napp.onError((err, c) => {\n throw err;\n});\n\n// HTTP vals expect an exported \"fetch handler\"\n// This is how you \"run the server\" in Val Town with Hono\nexport default app.fetch;",[160,227],"1fe3293a95b653dc8edac73588099097b9ae05f0f81c610ed28eb5700f113cd3",{"_102":226,"_95":227,"_161":116,"_163":162,"_164":142,"_165":120,"_167":118,"_104":228,"_99":229,"_169":230,"_171":231,"_172":22,"_173":232,"_174":-7,"_98":424,"_366":425},[160,227],"458e1fdbd8db5c1fd955f8bf5470737058a8b574096b19d50088a28a0d077051",{"_98":427,"_362":428,"_363":437},"frontend/components/App.tsx",{"_102":429,"_95":250,"_161":430,"_163":431,"_164":145,"_165":432,"_167":118,"_104":433,"_99":180,"_169":191,"_171":434,"_172":22,"_173":-5,"_174":-7,"_98":435,"_366":436},"5cb7a1f2-f53e-11ef-937e-569c3dd06744","6e585892-f52b-11ef-a8e1-569c3dd06744","69ed66bc-f52b-11ef-9dac-569c3dd06744",27,["D",1740683366401],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useState } from \"https://esm.sh/react@18.2.0\";\n\nexport function App() {\n const [clicked, setClicked] = useState(0);\n return (\n

Val Town React + Hono Starter

\n I've been clicked times\n

\n );\n}",[238,244,250],"572f45a0f0ec99935ff566c31d3bbf761edf962e408c2e2fb6df62cbb636a5c4",{"_102":249,"_95":250,"_161":251,"_163":245,"_164":142,"_165":252,"_167":118,"_104":253,"_99":180,"_169":191,"_171":254,"_172":22,"_173":-5,"_174":-7,"_98":438,"_366":439},[238,244,250],"01c999c7b1d1f24f89ce6fe379a51ba95ce06e4fe232311848ff5fc9ba67995e",{"_98":441,"_362":442,"_363":451},"frontend/index.html",{"_102":443,"_95":279,"_161":444,"_163":445,"_164":145,"_165":446,"_167":22,"_104":447,"_99":180,"_169":283,"_171":448,"_172":22,"_173":-5,"_174":-7,"_98":449,"_366":450},"e65f49dc-f85e-11ef-b448-569c3dd06744","5404b440-f52b-11ef-99f0-569c3dd06744","a59cbf44-f528-11ef-ae42-569c3dd06744",35,["D",1741027194729],"\n\n \n \n \n React Hono Val Town Starter\n \n \n \n \n

\n \n \n \n",[238,279],"4ff51a02a2a9468aa65cda98ae237a9a1b79f6322182ff6a27a7cd3a8dec8068",{"_102":278,"_95":279,"_161":280,"_163":239,"_164":142,"_165":281,"_167":118,"_104":282,"_99":182,"_169":283,"_171":284,"_172":22,"_173":-5,"_174":-7,"_98":452,"_366":453},[238,279],"dad33ae55fd883765aca5d795cefad75f0399c4f7c01109d6a90c2e94e916112",{"_98":455,"_362":456,"_363":465},"frontend/index.tsx",{"_102":457,"_95":289,"_161":458,"_163":445,"_164":145,"_165":459,"_167":118,"_104":460,"_99":461,"_169":191,"_171":462,"_172":22,"_173":-5,"_174":-7,"_98":463,"_366":464},"37ad4e0c-f53e-11ef-940f-569c3dd06744","5b1c65b6-f52b-11ef-bc72-569c3dd06744",24,["D",1740683304259],3,"/** @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();",[238,289],"427c45f5341ba32dd31e98a21e648a32637bfca120ebc165e98f9be62706370c",{"_102":288,"_95":289,"_161":290,"_163":239,"_164":142,"_165":291,"_167":118,"_104":292,"_99":122,"_169":191,"_171":293,"_172":22,"_173":-5,"_174":-7,"_98":466,"_366":467},[238,289],"05e73f29e76eef01d83ee7bc7dec5a61e0cf26c709f84ea9e4d8b0f2e6da1f60","hasChanges","sourceBranch","targetBranch",{"_102":145,"_104":472,"_336":473,"_95":43,"_143":150,"_99":338,"_144":-5,"_146":-5,"_339":340,"_106":-5,"_155":22,"_108":109,"_154":331,"_16":152,"_153":328},["D",1740674013689],["D",1755284984205],"pull","actionData","errors"]

stevekrouse

luciaMagicLinkStarter

Mergestevekrouse/mainintostd/main

README.md+49-6

Hbackend/index.ts+63-7

frontend/components/App.tsx+50-6

frontend/index.html+4-5

frontend/index.tsx+10-4

backend/auth.ts+127-0

backend/database

backend/database/magic-links.ts+112-0

backend/database/schema.ts+33-0

backend/database/sessions.ts+107-0

frontend/components/LoginForm.tsx+91-0

frontend/components/UserProfile.tsx+160-0