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

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>