Implement basic auth on portal

apps/portal/src/hooks.server.ts

@@ -0,0 +1,15 @@
+import { env } from '$env/dynamic/private';
+import { redirect, type Handle } from '@sveltejs/kit';
+import { createHmac } from 'node:crypto';
+
+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");
+
+    const response = await resolve(event);
+    return response;
+};

apps/portal/src/routes/(app)/+layout.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
     import { page } from "$app/state";
     import favicon from "$lib/assets/favicon.svg";
-    import "./app.css";
+    import "../app.css";
 
     const links = [
         { name: "Calculator", path: "/calculator" },

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

@@ -0,0 +1,21 @@
+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

@@ -0,0 +1,35 @@
+<script lang="ts">
+    import "../app.css";
+    import type { PageProps } from "./$types";
+
+    let { form }: PageProps = $props();
+</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}
+                <div role="alert" class="alert alert-error">
+                    <span>{form.error}</span>
+                </div>
+            {/if}
+
+            <form method="POST" class="flex flex-col gap-4">
+                <label class="floating-label">
+                    <input
+                        type="password"
+                        name="password"
+                        placeholder="Password"
+                        class="input input-bordered w-full"
+                        required
+                    />
+                    <span>Password</span>
+                </label>
+
+                <button type="submit" class="btn btn-primary w-full">
+                    Sign in
+                </button>
+            </form>
+        </div>
+    </div>
+</div>