message history + better auth

src/lib/message.svelte.ts

@@ -7,19 +7,14 @@ export interface IMessage {
 };
 
 export class MessageStore {
-	#clientId: number = $state(-1);
 	messages: IMessage[] = $state([]);
 
 	constructor(messages: IMessage[]) {
 		this.messages = messages;
 	}
 
-	setClientId(id: number) {
-		this.#clientId = id;
-	}
-
-	getClientId() {
-		return this.#clientId;
+	setMessages(messages: IMessage[]) {
+		this.messages = messages;
 	}
 
 	addMessage(message: IMessage) {

src/lib/socket.ts

@@ -34,13 +34,6 @@ export class ChatSocket {
 	}
 
 	#onMessage(e: MessageEvent) {
-		const regex = /^\d+$/;
-		
-		if (regex.test(e.data)) {
-			this.#store.setClientId(parseInt(e.data));
-			return;
-		}
-
 		const message: IMessage = JSON.parse(e.data);
 		console.log(message);
 		this.#store.addMessage(message);

src/routes/+layout.server.ts

@@ -2,13 +2,17 @@ import { PUBLIC_BACKEND_URL } from '$env/static/public';
 import { AUTH_COOIKIE_NAME } from '$lib/auth';
 import { error } from '@sveltejs/kit';
 import type { LayoutServerLoad } from './$types';
+import { decode, type JwtPayload } from 'jsonwebtoken';
 
 export const load: LayoutServerLoad = async ({ fetch, cookies }) => {
 	let token = cookies.get(AUTH_COOIKIE_NAME);
 
 	if (token != null) {
+		const userId = getUserIdFromToken(token);
+
 		return {
-			token
+			token,
+			userId
 		};
 	}
 
@@ -19,12 +23,21 @@ export const load: LayoutServerLoad = async ({ fetch, cookies }) => {
 	}
 
 	token = await response.text();
+	const userId = getUserIdFromToken(token);
+
 	cookies.set(AUTH_COOIKIE_NAME, token, {
 		path: '/',
 		secure: true
 	});
 
 	return {
-		token
+		token,
+		userId
 	};
 };
+
+function getUserIdFromToken(token: string): number {
+	const decoded = decode(token) as JwtPayload;
+
+	return decoded.userId;
+}

src/routes/+page.server.ts

@@ -1,6 +1,32 @@
-import { fail, type Actions } from '@sveltejs/kit';
+import { error, fail, type Actions } from '@sveltejs/kit';
 import { PUBLIC_BACKEND_URL } from '$env/static/public';
 import { AUTH_COOIKIE_NAME } from '$lib/auth';
+import type { PageServerLoad } from './$types';
+import type { IMessage } from '$lib/message.svelte';
+
+export const load: PageServerLoad = async ({ fetch, cookies }) => {
+	const authToken = cookies.get(AUTH_COOIKIE_NAME);
+
+	if (!authToken) {
+		error(401);
+	}
+
+	const response = await fetch(`${PUBLIC_BACKEND_URL}/messages`, {
+		headers: {
+			authorization: `Bearer ${authToken}`
+		}
+	});
+
+	if (!response.ok) {
+		error(response.status);
+	}
+
+	const messages = (await response.json()) as IMessage[];
+
+	return {
+		messages
+	};
+};
 
 export const actions = {
 	'send-message': async ({ request, fetch, cookies }) => {
@@ -12,7 +38,7 @@ export const actions = {
 
 		const formData = await request.formData();
 
-		const response = await fetch(`${PUBLIC_BACKEND_URL}/message`, {
+		await fetch(`${PUBLIC_BACKEND_URL}/message`, {
 			method: 'POST',
 			headers: {
 				authorization: `Bearer ${authToken}`

src/routes/+page.svelte

@@ -5,8 +5,17 @@
 	import { getMessageStore } from '$lib/message.svelte';
 	import Message from '$lib/Message.svelte';
 	import type { SubmitFunction } from '@sveltejs/kit';
+	import type { PageServerData } from './$types';
+	import { page } from '$app/state';
+
+	interface Props {
+		data: PageServerData;
+	}
+
+	let { data }: Props = $props();
 
 	const messageStore = getMessageStore();
+	messageStore.setMessages(data.messages);
 
 	let messageContent: string = $state('');
 
@@ -23,7 +32,7 @@
 <div class="flex h-full flex-col rounded-md border">
 	<div class="flex grow flex-col gap-4 p-8">
 		{#each messageStore.messages as message}
-			<Message {message} localSenderId={messageStore.getClientId()} />
+			<Message {message} localSenderId={page.data.userId} />
 		{/each}
 	</div>
 	<form
@@ -32,7 +41,6 @@
 		action="?/send-message"
 		use:enhance={sendMessage}
 	>
-		<input type="hidden" name="client-id" value={messageStore.getClientId()} />
 		<Input class="rounded-r-none" name="content" bind:value={messageContent} autocomplete="off" />
 		<Button type="submit" class="rounded-l-none" disabled={messageContent.trim().length < 1}
 			>Send</Button