// This approach uses the Lucia authentication library with a custom ValTownAdapter. // It provides signup, login, and logout functionality with session management. // The main tradeoff is the complexity of setting up Lucia, but it offers robust auth features. /** @jsxImportSource https://esm.sh/react */ import { ValTownAdapter } from "https://esm.town/v/stevekrouse/lucia_adapter"; import { createUser, getUser, verifyPassword } from "https://esm.town/v/stevekrouse/lucia_sqlite"; import { Lucia, Session, User } from "npm:lucia@3.0.1"; import { renderToString } from "npm:react-dom/server"; import { CookieJar } from "https://deno.land/x/cookies/mod.ts"; const userTable = "user"; const sessionTable = "session"; const adapter = new ValTownAdapter({ userTable, sessionTable }); export const lucia = new Lucia(adapter, { getUserAttributes: (attributes) => { return { username: attributes.username, }; }, }); declare module "npm:lucia" { interface Register { Lucia: typeof lucia; DatabaseUserAttributes: DatabaseUserAttributes; } } interface DatabaseUserAttributes { username: string; } // Helper function for redirects function redirect(url: string, status = 302): Response { return new Response(null, { status, headers: { Location: url } }); } export const luciaMiddleware = (handler: (req: Request) => Response | Promise) => { return async (req: Request) => { const url = new URL(req.url); const cookies = new CookieJar(req); const sessionId = cookies.get(lucia.sessionCookieName) ?? null; let user: User | null = null; let session: Session | null = null; if (sessionId) { const result = await lucia.validateSession(sessionId); user = result.user; session = result.session; } let response: Response; if (url.pathname === "/auth/signup" && req.method === "GET") { response = new Response( renderToString(

Sign up

, ), { headers: { "Content-Type": "text/html" } }, ); } else if (url.pathname === "/auth/signup" && req.method === "POST") { const formData = await req.formData(); const username = formData.get("username") as string; const password = formData.get("password") as string; if ( username.length < 3 || username.length > 31 || !/^[a-z0-9_-]+$/.test(username) ) { return new Response("Invalid username: needs to be > 3 and < 31 characters and match regex: ^[a-z0-9_-]+$", { status: 400, }); } if (password.length < 6 || password.length > 255) { return new Response("Invalid password: needs to be > 6 and < 255 characters", { status: 400, }); } try { const userID = await createUser({ userTable, sessionTable, username, password, }); const session = await lucia.createSession(userID, {}); response = redirect("/"); const cookieJar = new CookieJar(req, response); const sessionCookie = lucia.createSessionCookie(session.id); cookieJar.set(sessionCookie.name, sessionCookie.value, sessionCookie.attributes); console.log("Created user", userID); } catch (err) { console.log(err); return new Response("User already exists", { status: 400, }); } } else if (url.pathname === "/auth/login" && req.method === "GET") { response = new Response( renderToString(

Sign in

, ), { headers: { "Content-Type": "text/html" } }, ); } else if (url.pathname === "/auth/login" && req.method === "POST") { const formData = await req.formData(); const username = formData.get("username") as string; const password = formData.get("password") as string; const user = await getUser({ userTable, sessionTable, username }); if (!user) { return new Response("Bad login", { status: 400, }); } const validPassword = await verifyPassword(user.hashed_password, password); if (!validPassword) { return new Response("Bad login", { status: 400, }); } const session = await lucia.createSession(user.id, {}); response = redirect("/"); const cookieJar = new CookieJar(req, response); const sessionCookie = lucia.createSessionCookie(session.id); cookieJar.set(sessionCookie.name, sessionCookie.value, sessionCookie.attributes); } else if (url.pathname === "/auth/logout") { if (session) { await lucia.invalidateSession(session.id); } response = redirect("/"); const cookieJar = new CookieJar(req, response); const sessionCookie = lucia.createBlankSessionCookie(); cookieJar.set(sessionCookie.name, sessionCookie.value, sessionCookie.attributes); } else { const clonedReq = new Request(req.url, { method: req.method, headers: new Headers(req.headers), body: req.body, }); if (user) { clonedReq.headers.set("X-Lucia-Username", user.username); } response = await handler(clonedReq); } if (session && session.fresh) { const cookieJar = new CookieJar(req, response); const sessionCookie = lucia.createSessionCookie(session.id); cookieJar.set(sessionCookie.name, sessionCookie.value, sessionCookie.attributes); } if (!session) { const cookieJar = new CookieJar(req, response); const sessionCookie = lucia.createBlankSessionCookie(); cookieJar.set(sessionCookie.name, sessionCookie.value, sessionCookie.attributes); } return response; }; }; export default luciaMiddleware(req => new Response( renderToString(

{req.headers.get("X-Lucia-Username")} Login Sign up Logout

, ), { headers: { "content-type": "text/html" }, }, ) );

lucia_middleware_vanilla