cookies

src/controllers/auth.tsx

@@ -1,6 +1,7 @@
 import { Elysia, t } from "elysia";
 import { ctx } from "../context";
 import { set } from "zod";
+import { LuciaError } from "lucia";
 
 class DuplicateEmailError extends Error {
   constructor() {
@@ -14,7 +15,7 @@ export const authController = new Elysia({
   .use(ctx)
   .post(
     "/signup",
-    async ({ body: { email, password }, auth, set }) => {
+    async ({ body: { email, password }, auth, set, cookie }) => {
       const user = await auth
         .createUser({
           key: {
@@ -37,10 +38,12 @@ export const authController = new Elysia({
         userId: user.userId,
         attributes: {},
       });
+
       const sessionCookie = auth.createSessionCookie(session);
 
-      set.headers["Set-Cookie"] = sessionCookie.serialize();
+      cookie.sesion?.set(sessionCookie);
-      set.redirect = "/profile";
+
+      set.headers["HX-Location"] = "/profile";
     },
     {
       body: t.Object({
@@ -72,4 +75,53 @@ export const authController = new Elysia({
         }
       },
     }
+  )
+  .post(
+    "/signin",
+    async ({ body: { email, password }, auth, set, cookie }) => {
+      const user = await auth.useKey("email", email.toLowerCase(), password);
+
+      const session = await auth.createSession({
+        userId: user.userId,
+        attributes: {},
+      });
+      const sessionCookie = auth.createSessionCookie(session);
+
+      cookie.sesion?.set(sessionCookie);
+      set.headers["HX-Location"] = "/profile";
+    },
+    {
+      body: t.Object({
+        email: t.String({
+          minLength: 5,
+          maxLength: 30,
+        }),
+        password: t.String({
+          minLength: 6,
+          maxLength: 255,
+        }),
+      }),
+      error({ code, error, set }) {
+        if (code === "VALIDATION") {
+          console.log("sign up validation error");
+          console.log(error);
+          set.status = 400;
+          return "Invalid email or password";
+        } else if (
+          error instanceof LuciaError &&
+          (error.message === "AUTH_INVALID_KEY_ID" ||
+            error.message === "AUTH_INVALID_PASSWORD")
+        ) {
+          console.log("sign in invalid email or password error");
+          console.log(error);
+          set.status = 400;
+          return "Invalid email or password";
+        } else {
+          console.log("sign up error");
+          console.log(error);
+          set.status = 500;
+          return "Internal server error";
+        }
+      },
+    }
   );

src/pages/(auth)/*.ts

@@ -1,5 +1,6 @@
 import Elysia from "elysia";
 import { signup } from "./signup";
 import { profile } from "./profile";
+import { signin } from "./signin";
 
-export const authGroup = new Elysia().use(signup).use(profile);
+export const authGroup = new Elysia().use(signup).use(signin).use(profile);

src/pages/(auth)/signin.tsx

@@ -0,0 +1,54 @@
+import Elysia from "elysia";
+import { BaseHtml } from "../../components/base";
+import { ctx } from "../../context";
+
+export const signin = new Elysia().use(ctx).get("/signin", ({ html }) =>
+  html(
+    <BaseHtml>
+      <div class="flex w-full h-screen bg-gray-200 justify-center items-center">
+        <form
+          hx-post="/api/auth/signin"
+          hx-swap="afterend"
+          class="bg-white p-8 rounded-lg shadow-md w-96"
+        >
+          <div class="mb-4">
+            <label
+              for="email"
+              class="block text-sm font-medium text-gray-600 mb-2"
+            >
+              Email
+            </label>
+            <input
+              type="text"
+              name="email"
+              id="email"
+              placeholder="Enter your email"
+              class="w-full p-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-400 focus:border-transparent"
+            />
+          </div>
+          <div class="mb-4">
+            <label
+              for="password"
+              class="block text-sm font-medium text-gray-600 mb-2"
+            >
+              Password
+            </label>
+            <input
+              type="password"
+              name="password"
+              id="password"
+              placeholder="Enter your password"
+              class="w-full p-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-400 focus:border-transparent"
+            />
+          </div>
+          <button
+            type="submit"
+            class="w-full bg-indigo-600 text-white p-2 rounded-md hover:bg-indigo-500 focus:outline-none focus:ring-2 focus:ring-indigo-400 focus:ring-opacity-50"
+          >
+            Sign In
+          </button>
+        </form>
+      </div>
+    </BaseHtml>
+  )
+);