Implement auth as source of truth on server and protect routes. Integrate with portal

apps/api/package.json

@@ -17,6 +17,7 @@
         "@blade-and-brawn/calculator": "workspace:*",
         "@blade-and-brawn/commerce": "workspace:*",
         "@blade-and-brawn/domain": "workspace:*",
+        "@elysia/jwt": "^1.4.2",
         "@elysia/server-timing": "^1.4.1",
         "@elysiajs/cors": "^1.4.2",
         "elysia": "^1.4.29",

apps/api/src/env.ts

@@ -17,6 +17,8 @@ export const env = {
     WEBFLOW_COLLECTION_ID: requireEnv("WEBFLOW_COLLECTION_ID"),
     WEBFLOW_AUTH: requireEnv("WEBFLOW_AUTH"),
     WEBFLOW_WEBHOOK_SECRET: requireEnv("WEBFLOW_WEBHOOK_SECRET"),
+    AUTH_SECRET: requireEnv("AUTH_SECRET"),
+    ADMIN_PASSWORD: requireEnv("ADMIN_PASSWORD"),
     NODE_ENV: optionEnv("NODE_ENV", "development"),
     LOG_LEVEL: optionEnv("LOG_LEVEL", "info"),
 };

apps/api/src/server.ts

@@ -24,6 +24,7 @@ import z from "zod";
 import pino from "pino";
 import { env } from "./env";
 import serverTiming from "@elysia/server-timing";
+import jwt from "@elysia/jwt";
 
 const log = pino({
     level: env.LOG_LEVEL,
@@ -75,7 +76,7 @@ export const app = new Elysia()
                 "http://dev.portal.bladeandbrawn.com/"
             ],
         }),
-    )
+    ).use(jwt({ name: "jwt", secret: env.AUTH_SECRET }))
 
     .error({
         PrintfulError,
@@ -116,8 +117,29 @@ export const app = new Elysia()
     .get("/", () => ({ status: "ok" }))
     .get("/health", () => ({ status: "ok" }))
 
-    // CALCULATOR
+    // AUTHENTICATION
+    .post("/auth/login", async ({ jwt, body, cookie: { auth } }) => {
+        if (body.password !== env.ADMIN_PASSWORD) throw status(401, "Invalid credentials");
 
+        auth.set({
+            value: await jwt.sign({ id: "admin", exp: "7d" }),
+            path: "/",
+            maxAge: 60 * 60 * 24 * 7,
+            sameSite: "lax",
+            httpOnly: true,
+            secure: env.NODE_ENV === "production",
+            domain: env.NODE_ENV === "production" ?
+                ".bladeandbrawn.com" :
+                undefined
+        });
+    }, {
+        body: z.object({
+            password: z.coerce.string()
+        }),
+        cookie: t.Cookie({ auth: t.Optional(t.String()) })
+    })
+
+    // CALCULATOR
     .post("/calculate", async ({ body }) => {
         return {
             levels: levelCalculator.calculate(body.player, body.activityPerformances),
@@ -130,11 +152,12 @@ export const app = new Elysia()
     })
 
     // COMMERCE
-    // TODO: protect with api key/token
     .group("/products", (app) =>
         app
-            .onBeforeHandle(({ }) => {
-                // authenticate cookie
+            .guard({ cookie: t.Cookie({ auth: t.Optional(t.String()) }) })
+            .onBeforeHandle(async ({ jwt, cookie: { auth } }) => {
+                const token = auth.value && await jwt.verify(auth.value);
+                if (!token) throw status(401, "Unauthorized");
             })
             .group("/sync", (app) =>
                 app

apps/portal/package.json

@@ -27,6 +27,7 @@
         "@elysia/eden": "^1.4.10",
         "@tailwindcss/vite": "^4.3.2",
         "daisyui": "^5.6.6",
+        "jose": "^6.2.3",
         "tailwindcss": "^4.3.2"
     }
 }

apps/portal/src/hooks.server.ts

@@ -1,15 +1,16 @@
 import { env } from '$env/dynamic/private';
 import { redirect, type Handle } from '@sveltejs/kit';
-import { createHmac } from 'node:crypto';
+import { jwtVerify } from 'jose';
 
 export const handle: Handle = async ({ event, resolve }) => {
-    const cookieHash = event.cookies.get("session");
-    const computedHash = createHmac("sha256", env.PORTAL_SECRET)
-        .update("authenticated")
-        .digest("hex");
-    if (event.url.pathname !== "/login" && cookieHash !== computedHash)
-        redirect(307, "/login");
+    if (event.url.pathname !== "/login") {
+        const token = event.cookies.get("auth");
+        const secret = new TextEncoder().encode(env.AUTH_SECRET);
+        const authenticated = token != null && await jwtVerify(token, secret)
+            .then(() => true)
+            .catch(() => false);
+        if (!authenticated) redirect(307, "/login");
+    }
 
-    const response = await resolve(event);
-    return response;
+    return await resolve(event);
 };

apps/portal/src/lib/api.ts

@@ -2,4 +2,8 @@ import { treaty } from "@elysia/eden"
 import type { API } from "@blade-and-brawn/api"
 import { PUBLIC_API_URL } from "$env/static/public"
 
-export const api = treaty<API>(PUBLIC_API_URL)
+export const api = treaty<API>(PUBLIC_API_URL, {
+    fetch: {
+        credentials: "include",
+    },
+})

apps/portal/src/routes/login/+page.server.ts

@@ -1,21 +0,0 @@
-import { fail, redirect } from "@sveltejs/kit";
-import type { Actions } from "./$types";
-import { env } from "$env/dynamic/private";
-import { createHmac } from "node:crypto";
-
-export const actions: Actions = {
-    default: async ({ request, cookies }) => {
-        const data = await request.formData();
-        const password = data.get("password");
-
-        if (password !== env.PORTAL_PASSWORD)
-            return fail(401, { error: "Invalid password" });
-
-        const hash = createHmac("sha256", env.PORTAL_SECRET)
-            .update("authenticated")
-            .digest("hex");
-
-        cookies.set("session", hash, { path: "/", maxAge: 60 * 60 * 24 * 7 });
-        redirect(303, "/");
-    },
-};

apps/portal/src/routes/login/+page.svelte

@@ -1,20 +1,40 @@
 <script lang="ts">
     import "../app.css";
-    import type { PageProps } from "./$types";
+    import { goto } from "$app/navigation";
+    import { api } from "$lib/api";
 
-    let { form }: PageProps = $props();
+    let error = $state("");
+    let loading = $state(false);
+
+    async function handleSubmit(event: SubmitEvent) {
+        event.preventDefault();
+
+        const form = event.currentTarget as HTMLFormElement;
+        const password = new FormData(form).get("password")?.toString() ?? "";
+
+        loading = true;
+        const { status } = await api.auth.login.post({ password });
+        loading = false;
+
+        if (status === 401) {
+            error = "Invalid password";
+            return;
+        }
+
+        await goto("/");
+    }
 </script>
 
 <div class="min-h-screen flex items-center justify-center bg-base-200">
     <div class="card bg-base-100 w-full max-w-sm shadow-xl">
         <div class="card-body gap-4">
-            {#if form?.error}
+            {#if error}
                 <div role="alert" class="alert alert-error">
-                    <span>{form.error}</span>
+                    <span>{error}</span>
                 </div>
             {/if}
 
-            <form method="POST" class="flex flex-col gap-4">
+            <form onsubmit={handleSubmit} class="flex flex-col gap-4">
                 <label class="floating-label">
                     <input
                         type="password"
@@ -26,7 +46,11 @@
                     <span>Password</span>
                 </label>
 
-                <button type="submit" class="btn btn-primary w-full">
+                <button
+                    type="submit"
+                    class="btn btn-primary w-full"
+                    disabled={loading}
+                >
                     Sign in
                 </button>
             </form>