fix: auth now working

Co-authored-by: fero <[email protected]>

apps/web/package.json

@@ -30,6 +30,7 @@
 	},
 	"type": "module",
 	"dependencies": {
+		"jwt-decode": "^3.1.2",
 		"sugar": "^2.0.6",
 		"tailwind-preset-base": "workspace:^",
 		"ui": "workspace:^"

apps/web/src/lib/components/layout/NavBar.svelte

@@ -1,11 +1,18 @@
-<script>
+<script lang="ts">
 	import { Link } from 'ui/link';
 	import { Button } from 'ui/button';
 	import { env } from '$env/dynamic/public';
 	import { isAuthenticated, user } from '$lib/stores/user';
+	import { onMount } from 'svelte';
+	import jwt_decode from 'jwt-decode';
 
-	$: isAuthenticated;
-	$: user;
+	onMount(() => {
+		const cookie = document.cookie.split(';').find((cookie) => cookie.startsWith('auth='))?.split('=')[1]
+		if (cookie) {
+			$isAuthenticated = true
+			$user = jwt_decode(cookie)
+		}
+	})
 </script>
 
 <div class="beatforge-page-navbar flex w-full items-center py-8 px-4 mx-auto max-w-7xl z-[100] text-sm font-bold">
@@ -19,8 +26,8 @@
 		</Link>
 		{#if $isAuthenticated}
 			<Link variant="secondary" href="/dashboard">
-				{user.username}
-				<img slot="trailing" alt="user icon" src={user.avatar} draggable="false" class="w-10 h-10 rounded-full">
+				{$user.user.username}
+				<img alt="user icon" src={$user.user.avatar} draggable="false" class="w-10 h-10 rounded-full">
 			</Link>
 		{:else}
 			<Link variant="text" href="https://discord.gg/HTVrjFENaZ" external>

apps/web/src/lib/stores/user.ts

@@ -1,4 +1,5 @@
 import { writable } from "svelte/store";
 
 export const isAuthenticated = writable(false);
-export const user = writable(null);
+export const user = writable(null);
+export const jwtKey = writable(null);

apps/web/src/routes/callback/github/+page.svelte

@@ -1,3 +1,18 @@
+<script lang="ts">
+    import { onMount } from 'svelte';
+    import { goto } from '$app/navigation';
+    import { isAuthenticated, user, jwtKey } from '$lib/stores/user';
+    import jwt_decode from 'jwt-decode';
+
+    onMount(() => {
+        document.cookie = `auth=${$jwtKey}; path=/; expires=${new Date(Date.now() + 1000 * 60 * 60 * 24).toUTCString()}`;
+        $isAuthenticated = true;
+        $user = jwt_decode($jwtKey);
+        goto('/')
+    })
+</script>
+
+
 <div class="h-screen">
 
 </div>

apps/web/src/routes/callback/github/+page.ts

@@ -1,39 +1,26 @@
 import { env } from '$env/dynamic/public';
 import type { PageLoad } from './$types';
+import { redirect } from '@sveltejs/kit';
+import { jwtKey } from '$lib/stores/user';
 
 export const load = (async ({ url: { searchParams }, fetch }) => {
     const code = searchParams.get('code');
     if (!code) {
-        return {
-            status: 302,
-            headers: {
-                location: '/'
-            }
-        };
+        throw redirect(302, '/');
     } else {
         try {
             const response = await fetch(`${env.PUBLIC_API_URL}/auth/github?code=${code}`, {
-                method: 'POST'
-            })
-            const { jwt } = await response.json();
-            return {
-                status: 302,
+                method: 'POST',
                 headers: {
-                    location: '/',
-                    'set-cookie': `jwt=${jwt}; Path=/; HttpOnly`
+                    "Access-Control-Allow-Origin": "*",
+                    "Content-Type": "application/json",
                 }
-            };
+            })
+            const jwt = await response.json();
+            jwtKey.set(jwt.jwt);
         } catch (error) {
             console.log(error)
-            return {
-                status: 500,
-                headers: {
-                    location: '/'
-                },
-                body: {
-                    error: error.message
-                }
-            };
+            throw redirect(302, '/');
         }
     }
 }) satisfies PageLoad;

apps/web/src/routes/mod/[mod]/+page.svelte

@@ -25,7 +25,7 @@
 	}
 </script>
 
-<div class="h-screen w-screen">
+<div class="h-full w-full">
 	<div class="flex justify-center">
 		<div class="flex flex-col gap-2 w-full max-w-7xl px-4">
 			<div