Fix login page endpoint, implement session passing, redirect on protected routes and login.

src/app.d.ts

@@ -3,8 +3,12 @@
 // See https://kit.svelte.dev/docs/types#app
 // for information about these interfaces
 declare namespace App {
-	// interface Locals {}
+	interface Locals {
+		user?: { username: string }
+	}
 	// interface Platform {}
-	// interface Session {}
+	interface Session {
+		user?: { username: string }
+	}
 	// interface Stuff {}
 }

src/hooks.ts

@@ -0,0 +1,33 @@
+import type { GetSession, Handle } from "@sveltejs/kit"
+import * as cookie from 'cookie'
+
+import { db } from '$lib/database'
+
+export const handle: Handle = async ({ event, resolve }) => {
+  const cookieHeader = event.request.headers.get('cookie')
+  const cookies = cookie.parse(cookieHeader ?? '')
+
+  if (!cookies.session) {
+    return await resolve(event)
+  }
+
+  const session = await db.user.findUnique({
+    where: { id: cookies.session },
+  })
+
+  if (session) {
+    event.locals.user = { username: session.username }
+  }
+
+  return await resolve(event)
+}
+
+export const getSession: GetSession = ({ locals }) => {
+  if (!locals.user) return {}
+
+  return {
+    user: {
+      username: locals.user.username
+    }
+  }
+}

src/lib/api.ts

@@ -8,8 +8,7 @@ export async function send(form: HTMLFormElement): Send {
   const response = await fetch(form.action, {
     method: form.method,
     body: new FormData(form),
-    headers: { accept: 'application/json' }
+    headers: { accept: 'application/json' },
   })
-
   return await response.json()
 }

src/routes/auth/login/index.svelte

@@ -1,46 +1,46 @@
-<script lang="ts">
-  import { session } from '$app/stores'
-  import { send } from '$lib/api'
-
-  export let error: string
-
-  async function login(event: SubmitEvent) {
-    const formEl = event.target as HTMLFormElement
-    const response = await send(formEl)
-
-    if (response.error) {
-      error = response.error
+<script context="module" lang="ts">
+	export const load: Load = ({ session, props }) => {
+		if (session.user) {
+			return {
+				status: 302,
+				redirect: '/'
+			};
 		}
 
-    $session.user = response.user
+		return { props };
+	};
+</script>
 
-    formEl.reset()
+<script lang="ts">
+	import { session } from '$app/stores';
+	import { send } from '$lib/api';
+	import type { Load } from '@sveltejs/kit';
+
+	export let error: string;
+
+	async function login(event: SubmitEvent) {
+		const formEl = event.target as HTMLFormElement;
+		const response = await send(formEl);
+
+		if (response.error) {
+			error = response.error;
+		}
+
+		$session.user = response.user;
+
+		formEl.reset();
 	}
 </script>
 
-<form
-  on:submit|preventDefault={login}
-  method="post"
-  autocomplete="off"
->
+<form on:submit|preventDefault={login} method="post" autocomplete="off">
 	<div>
 		<label for="username">Username</label>
-    <input
-      id="username"
-      name="username"
-      type="username"
-      required
-    />
+		<input id="username" name="username" type="username" required />
 	</div>
 
 	<div>
 		<label for="password">Password</label>
-    <input
-      id="password"
-      name="password"
-      type="password"
-      required
-    />
+		<input id="password" name="password" type="password" required />
 	</div>
 
 	{#if error}

src/routes/auth/login/index.ts

@@ -7,9 +7,7 @@ import { db } from '$lib/database'
 export const post: RequestHandler = async ({ request }) => {
   const form = await request.formData()
   const username = form.get('username')
-  console.log('username', username);
   const password = form.get('password')
-  console.log('password', password);
 
   if (
     typeof username !== 'string' ||

src/routes/auth/register/index.svelte

@@ -1,35 +1,51 @@
+<script context="module" lang="ts">
+	export const load: Load = ({ session, props }) => {
+		if (session.user) {
+			return {
+				status: 302,
+				redirect: '/'
+			};
+		}
+
+		return { props };
+	};
+</script>
+
 <script type="ts">
 	import { send } from '$lib/api';
+	import type { Load } from '@sveltejs/kit';
 
 	export let error: string;
 	export let success: string;
 
 	async function register(event: SubmitEvent) {
-    error = ''
+		error = '';
 
-    const formEl = event.target as HTMLFormElement
-    const response = await send(formEl)
+		const formEl = event.target as HTMLFormElement;
+		const response = await send(formEl);
 
 		if (response.error) {
-      error = response.error
+			error = response.error;
 		}
 
 		if (response.success) {
-      success = response.success
+			success = response.success;
 		}
 
-    formEl.reset()
+		formEl.reset();
 	}
 </script>
 
 <form on:submit|preventDefault={register} method="post" autocomplete="off">
 	<div>
-    <label for="username">Username
+		<label for="username"
+			>Username
 			<input id="username" name="username" type="text" required />
 		</label>
 	</div>
 	<div>
-    <label for="password">Password
+		<label for="password"
+			>Password
 			<input id="password" name="password" type="password" required />
 		</label>
 	</div>

src/routes/protected/index.svelte

@@ -0,0 +1,27 @@
+<script context="module" lang="ts">
+	import type { Load } from '@sveltejs/kit';
+
+	export const load: Load = ({ session }) => {
+		if (!session.user) {
+			return {
+				status: 302,
+				redirect: '/auth/login'
+			};
+		}
+
+		return {
+			status: 200,
+			props: {
+				user: session.user.username
+			}
+		};
+	};
+</script>
+
+<script lang="ts">
+	export let user: string;
+</script>
+
+<h1>Protected</h1>
+
+<p>Weclome {user}</p>