// deno-lint-ignore-file no-namespace /** @jsxImportSource jsr:@hono/hono/jsx **/ import { Context, Hono } from "jsr:@hono/hono"; import { Child } from "jsr:@hono/hono/jsx"; import { sqlite } from "https://esm.town/v/std/sqlite"; import { migrate } from "https://esm.town/v/saolsen/migrations?v=22"; import { eq } from "npm:drizzle-orm"; import { drizzle } from "npm:drizzle-orm/libsql"; import { LibSQLDatabase } from "npm:drizzle-orm/libsql"; import { integer, sqliteTable, text } from "npm:drizzle-orm/sqlite-core"; import { Uuid25 } from "npm:uuid25"; import { uuidv7obj } from "npm:uuidv7"; import { z } from "npm:zod"; import { DrizzleSQLiteAdapter } from "npm:@lucia-auth/adapter-drizzle"; import { Scrypt, Session } from "npm:lucia"; import { Lucia } from "npm:lucia"; namespace schema { export const KEY = new URL(import.meta.url).pathname.split("/") .at(-1)!; export type UserId = string & { readonly UserId: unique symbol; }; export const UserId = z .string() .startsWith("u_") .length(27) .transform((k: string) => k as UserId); export function userId(): UserId { return `u_${Uuid25.fromBytes(uuidv7obj().bytes).value}` as UserId; } export const users = sqliteTable(`${KEY}_users`, { id: text("user_id").$type().primaryKey(), username: text("username").unique().notNull(), passwordHash: text("password_hash").notNull(), }); export const sessions = sqliteTable(`${KEY}_sessions`, { id: text("session_id").primaryKey(), expiresAt: integer("expires_at").notNull(), userId: text("user_id").$type().notNull().references( () => users.id, ), }); export const MIGRATIONS = [ `CREATE TABLE ${KEY}_users ( user_id text PRIMARY KEY NOT NULL, username text NOT NULL, password_hash text NOT NULL )`, `CREATE TABLE ${KEY}_sessions ( session_id text PRIMARY KEY NOT NULL, expires_at integer NOT NULL, user_id text NOT NULL, FOREIGN KEY (user_id) REFERENCES ${KEY}_users(user_id) ON UPDATE no action ON DELETE no action )`, `CREATE UNIQUE INDEX ${KEY}_users_username_unique ON ${KEY}_users (username)`, ]; export const schema = { users }; export type DB = LibSQLDatabase; } namespace web { export type ContextVars = { db: schema.DB; user_id: schema.UserId | null; session: Session | null; }; const Layout = ( props: { children: Child; user?: { username: string } | null; }, ) => { return ( Hono + DaisyUI Site

My App

{props.children}

); }; export type AppContext = Context<{ Variables: ContextVars }>; export const app = new Hono(); app.get("/", async (c: AppContext) => { const db = c.get("db"); const user_id = c.get("user_id"); let user = null; if (user_id) { user = (await db.select().from(schema.users).where( eq(schema.users.id, user_id), ))[0]; } return c.html(

Welcome to Hono + DaisyUI

This is a simple example of using Hono with DaisyUI for styling.

About Page

View Source

, ); }); interface SignupFormData { username?: string; username_error?: string; password?: string; password_error?: string; form_error?: string; } const SignupForm = (props: { data: SignupFormData }) => { return ( ); }; app.get("/sign_up", (c: AppContext) => { return c.html(

Create an account

, ); }); app.post("/sign_up", async (c: AppContext) => { const body = await c.req.parseBody<{ username: string; password: string; }>(); const data: SignupFormData = { username: body.username, password: body.password, }; const username: string | null = body.username ?? null; if ( !username || username.length < 3 || username.length > 31 || !/^[a-z0-9_-]+$/.test(username) ) { data.username = undefined; data.username_error = "Invalid Username"; } const password: string | null = body.password ?? null; if ( !password || password.length < 6 || password.length > 255 ) { data.password = undefined; data.password_error = "Invalid Password"; } if (data.username_error || data.password_error) { return c.html( , ); } const passwordHash = await new Scrypt().hash(password); const user_id = schema.userId(); const db = c.get("db"); try { await db.insert(schema.users).values({ id: user_id, username, passwordHash, }); const session = await lucia.createSession(user_id, {}); c.header( "Set-Cookie", lucia.createSessionCookie(session.id).serialize(), { append: true }, ); c.header("hx-redirect", "/"); return c.html(

Signed up

); } catch (e) { console.error(e); console.log(e.code); if ( e.code === "SQLITE_CONSTRAINT" ) { data.username = undefined; data.username_error = "Username is already taken"; } else { data.form_error = "An unknown error occurred"; } return c.html( , ); } }); interface LoginFormData { username?: string; password?: string; form_error?: string; } const LoginForm = (props: { data: LoginFormData }) => { return ( ); }; app.get("/login", (c: AppContext) => { return c.html(

Log In

, ); }); app.post("/login", async (c: AppContext) => { const body = await c.req.parseBody<{ username: string; password: string; }>(); const data: SignupFormData = { username: body.username, password: body.password, }; const username: string | null = body.username ?? null; if ( !username || username.length < 3 || username.length > 31 || !/^[a-z0-9_-]+$/.test(username) ) { data.form_error = "Invalid password"; } const password: string | null = body.password ?? null; if ( !password || password.length < 6 || password.length > 255 ) { data.form_error = "Invalid password"; } if (data.form_error) { return c.html( , ); } const existing_user = (await db.select().from(schema.users) .where(eq(schema.users.username, username)))[ 0 ]; if (!existing_user) { data.form_error = "Incorrect username or password"; return c.html( , ); } const validPassword = await new Scrypt().verify( existing_user.passwordHash, password, ); if (!validPassword) { data.form_error = "Incorrect username or password"; return c.html( , ); } const session = await lucia.createSession( existing_user.id, {}, ); c.header( "Set-Cookie", lucia.createSessionCookie(session.id).serialize(), { append: true }, ); c.header("hx-redirect", "/"); return c.html(

Logged in

); }); app.post("/logout", async (c: AppContext) => { const session = c.get("session"); if (!session) { return c.body(null, 401); } await lucia.invalidateSession(session.id); c.header( "Set-Cookie", lucia.createBlankSessionCookie().serialize(), ); c.header( "hx-redirect", "/", ); return c.html(

Logged out

); }); } // deno-lint-ignore no-explicit-any const db: schema.DB = drizzle(sqlite as any, { schema }); const adapter = new DrizzleSQLiteAdapter( db, schema.sessions, schema.users, ); const lucia = new Lucia(adapter, { sessionCookie: { attributes: { secure: !import.meta.url.endsWith(".ts"), }, }, }); declare module "npm:lucia" { interface Register { Lucia: typeof lucia; UserId: schema.UserId; } } const app = new Hono(); app.use(async (c: web.AppContext, next) => { c.set("db", db); await next(); }); app.use("*", async (c: web.AppContext, next) => { const sessionId = lucia.readSessionCookie( c.req.header("Cookie") ?? "", ); if (!sessionId) { c.set("user_id", null); c.set("session", null); return next(); } const { session, user } = await lucia.validateSession( sessionId, ); if (session && session.fresh) { c.header( "Set-Cookie", lucia.createSessionCookie(session.id).serialize(), { append: true }, ); } if (!session) { c.header( "Set-Cookie", lucia.createBlankSessionCookie().serialize(), { append: true }, ); } c.set("session", session); c.set("user_id", user?.id ?? null); return next(); }); app.route("/", web.app); await migrate(sqlite, schema.KEY, schema.MIGRATIONS); export default async function handler( req: Request, ): Promise { return await app.fetch(req); }