\n \n My App\n \n

\n \n Logout\n \n
\n \n Login\n \n
\n \n Sign Up\n \n

\n {props.children}\n

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

\n Welcome to Hono + DaisyUI\n

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

\n \n \n \n

\n \n About Page\n \n

\n \n View Source\n \n

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

\n Create an account\n

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

Signed up

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

\n Log In\n

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

Logged in

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

Logged out

);\n });\n}\n\n// deno-lint-ignore no-explicit-any\nconst db: schema.DB = drizzle(sqlite as any, { schema });\n\nconst adapter = new DrizzleSQLiteAdapter(\n db,\n schema.sessions,\n schema.users,\n);\n\nconst lucia = new Lucia(adapter, {\n sessionCookie: {\n attributes: {\n secure: !import.meta.url.endsWith(\".ts\"),\n },\n },\n});\n\ndeclare module \"npm:lucia\" {\n interface Register {\n Lucia: typeof lucia;\n UserId: schema.UserId;\n }\n}\n\nconst app = new Hono();\napp.use(async (c: web.AppContext, next) => {\n c.set(\"db\", db);\n await next();\n});\n\napp.use(\"*\", async (c: web.AppContext, next) => {\n const sessionId = lucia.readSessionCookie(\n c.req.header(\"Cookie\") ?? \"\",\n );\n if (!sessionId) {\n c.set(\"user_id\", null);\n c.set(\"session\", null);\n return next();\n }\n\n const { session, user } = await lucia.validateSession(\n sessionId,\n );\n if (session && session.fresh) {\n c.header(\n \"Set-Cookie\",\n lucia.createSessionCookie(session.id).serialize(),\n { append: true },\n );\n }\n if (!session) {\n c.header(\n \"Set-Cookie\",\n lucia.createBlankSessionCookie().serialize(),\n { append: true },\n );\n }\n c.set(\"session\", session);\n c.set(\"user_id\", user?.id ?? null);\n return next();\n});\n\napp.route(\"/\", web.app);\n\nawait migrate(sqlite, schema.KEY, schema.MIGRATIONS);\n\nexport default async function handler(\n req: Request,\n): Promise {\n return await app.fetch(req);\n}","deleted","label",[99],"permalink","https://www.val.town/x/saolsen/lucia_hono/code/main.tsx","extension","actionData","errors"]