From a07460bfaf05e1db67299108de01d93500c4cef1 Mon Sep 17 00:00:00 2001
From: Ole Magnus Fon Johnsen <me@omfj.no>
Date: Wed, 11 Dec 2024 13:17:31 +0100
Subject: [PATCH] Refactor auth logic

---
 .../lib/components/app/header/Header.svelte   |  8 ++---
 .../src/lib/components/footer/Footer.svelte   |  8 ++---
 .../src/lib/components/portal/Header.svelte   |  6 ++--
 apps/www/src/lib/context/user.context.ts      | 29 ++++++++++++-------
 apps/www/src/routes/+layout.svelte            | 11 +++----
 .../routes/portal/arrangementer/+page.svelte  |  6 ++--
 .../portal/arrangementer/[id]/+page.svelte    |  6 ++--
 7 files changed, 42 insertions(+), 32 deletions(-)

diff --git a/apps/www/src/lib/components/app/header/Header.svelte b/apps/www/src/lib/components/app/header/Header.svelte
index 22dbeb20..346f4bfb 100644
--- a/apps/www/src/lib/components/app/header/Header.svelte
+++ b/apps/www/src/lib/components/app/header/Header.svelte
@@ -2,16 +2,16 @@
 	import { onNavigate } from '$app/navigation';
 	import logo from '$lib/assets/programmerbar-modern.svg';
 	import { cn } from '$lib/cn';
-	import { getAuthContext } from '$lib/context/user.context';
 	import HeaderItem from './HeaderItem.svelte';
 	import HeaderSignOut from './HeaderSignOut.svelte';
 	import MenuItem from './MenuItem.svelte';
 	import ProgressBar from './ProgressBar.svelte';
 	import { Menu, X } from 'lucide-svelte';
 	import MenuSignOut from './MenuSignOut.svelte';
+	import { getUser } from '$lib/context/user.context';
 
 	let isOpen = $state(false);
-	let auth = getAuthContext();
+	let user = getUser();
 
 	onNavigate(() => {
 		isOpen = false;
@@ -55,7 +55,7 @@
 			<HeaderItem to="/meny" name="/meny" />
 			<HeaderItem to="https://forms.gle/BLdygdoRJgjMbQZj6" name="/booking" />
 			<HeaderItem to="/om-oss" name="/om oss" />
-			{#if auth.user}
+			{#if !!$user}
 				<HeaderSignOut />
 			{/if}
 		</ul>
@@ -75,7 +75,7 @@
 			<MenuItem to="/meny" name="/meny" />
 			<MenuItem to="https://forms.gle/BLdygdoRJgjMbQZj6" name="/booking" />
 			<MenuItem to="/om-oss" name="/om oss" />
-			{#if auth.user}
+			{#if !!$user}
 				<MenuSignOut />
 			{:else}
 				<MenuItem to="/logg-inn" name="/logg inn" />
diff --git a/apps/www/src/lib/components/footer/Footer.svelte b/apps/www/src/lib/components/footer/Footer.svelte
index 4a716582..ccd809b0 100644
--- a/apps/www/src/lib/components/footer/Footer.svelte
+++ b/apps/www/src/lib/components/footer/Footer.svelte
@@ -1,9 +1,9 @@
 <script lang="ts">
 	import lervigLogo from '$lib/assets/lervig-logo-black.png';
-	import { getAuthContext } from '$lib/context/user.context';
+	import { getUser } from '$lib/context/user.context';
 	import CornerLink from './CornerLink.svelte';
 
-	let auth = getAuthContext();
+	let user = getUser();
 </script>
 
 <div class="relative mt-24 border-t-2 border-primary-dark bg-primary-light">
@@ -11,8 +11,8 @@
 		<CornerLink href="https://programmerbar.sanity.studio" isExternal>Sanity</CornerLink>
 		<CornerLink href="https://github.com/programmerbar/mono" isExternal>GitHub</CornerLink>
 		<CornerLink href="/beer-pong">Beer Pong</CornerLink>
-		<CornerLink when={!!auth.user} href="/portal">Portal</CornerLink>
-		<CornerLink when={!auth.user} href="/logg-inn">Logg inn</CornerLink>
+		<CornerLink when={!!$user} href="/portal">Portal</CornerLink>
+		<CornerLink when={!$user} href="/logg-inn">Logg inn</CornerLink>
 	</div>
 
 	<footer
diff --git a/apps/www/src/lib/components/portal/Header.svelte b/apps/www/src/lib/components/portal/Header.svelte
index a2ee5922..a0a6df93 100644
--- a/apps/www/src/lib/components/portal/Header.svelte
+++ b/apps/www/src/lib/components/portal/Header.svelte
@@ -1,8 +1,8 @@
 <script lang="ts">
 	import logo from '$lib/assets/programmerbar-modern.svg';
-	import { getAuthContext } from '$lib/context/user.context';
+	import { getUser } from '$lib/context/user.context';
 
-	let auth = getAuthContext();
+	let user = getUser();
 </script>
 
 <div class="sticky top-0 z-10 border-b bg-background p-4">
@@ -37,7 +37,7 @@
 					>
 				</li>
 
-				{#if auth.user?.role === 'board'}
+				{#if $user?.role === 'board'}
 					<li>
 						<a class="px-1 text-gray-500 transition hover:text-gray-900" href="/portal/admin"
 							>Admin</a
diff --git a/apps/www/src/lib/context/user.context.ts b/apps/www/src/lib/context/user.context.ts
index 98632cbb..fc174dfd 100644
--- a/apps/www/src/lib/context/user.context.ts
+++ b/apps/www/src/lib/context/user.context.ts
@@ -1,16 +1,25 @@
 import type { User } from 'lucia';
 import { getContext, setContext } from 'svelte';
+import { get, type Writable } from 'svelte/store';
 
-export const AUTH_KEY = 'user';
+export type UserContext = Writable<User | null>;
 
-export type AuthContext = {
-	user: User | null;
-};
+const AUTH_CONTEXT_KEY = '__auth';
 
-export const setAuthContext = (ctx: AuthContext) => {
-	setContext(AUTH_KEY, ctx);
-};
+export function setUserContext(value: UserContext) {
+	return setContext<UserContext>(AUTH_CONTEXT_KEY, value);
+}
 
-export const getAuthContext = () => {
-	return getContext<AuthContext>(AUTH_KEY);
-};
+export function getUser() {
+	return getContext<UserContext>(AUTH_CONTEXT_KEY);
+}
+
+export function getAuthenticatedUser() {
+	const userStore = getUser();
+
+	if (!get(userStore)) {
+		throw new Error('User context not found');
+	}
+
+	return userStore as Writable<User>;
+}
diff --git a/apps/www/src/routes/+layout.svelte b/apps/www/src/routes/+layout.svelte
index 711fd1eb..473bf8f8 100644
--- a/apps/www/src/routes/+layout.svelte
+++ b/apps/www/src/routes/+layout.svelte
@@ -1,15 +1,16 @@
 <script lang="ts">
-	import { setAuthContext } from '$lib/context/user.context';
+	import { setUserContext } from '$lib/context/user.context';
 	import { Toaster } from 'svelte-sonner';
 	import '../tailwind.css';
+	import { writable } from 'svelte/store';
 
 	const { data, children } = $props();
 
-	setAuthContext({
-		get user() {
-			return data.user;
-		}
+	const user = writable(data.user);
+	$effect.pre(() => {
+		user.set(data.user);
 	});
+	setUserContext(user);
 </script>
 
 <Toaster />
diff --git a/apps/www/src/routes/portal/arrangementer/+page.svelte b/apps/www/src/routes/portal/arrangementer/+page.svelte
index 875dd0ce..e1823843 100644
--- a/apps/www/src/routes/portal/arrangementer/+page.svelte
+++ b/apps/www/src/routes/portal/arrangementer/+page.svelte
@@ -1,11 +1,11 @@
 <script lang="ts">
 	import EventPreview from '$lib/components/portal/EventPreview.svelte';
 	import Heading from '$lib/components/ui/Heading.svelte';
-	import { getAuthContext } from '$lib/context/user.context.js';
+	import { getUser } from '$lib/context/user.context.js';
 
 	let { data } = $props();
 
-	let auth = getAuthContext();
+	let user = getUser();
 </script>
 
 <svelte:head>
@@ -13,7 +13,7 @@
 </svelte:head>
 
 <Heading>Arrangementer</Heading>
-{#if auth.user?.role == 'board'}
+{#if $user?.role == 'board'}
 	<p class="mt-4">
 		<a href="/portal/arrangementer/ny" class="text-blue-500 hover:underline">Nytt arrangement</a>
 	</p>
diff --git a/apps/www/src/routes/portal/arrangementer/[id]/+page.svelte b/apps/www/src/routes/portal/arrangementer/[id]/+page.svelte
index c5580721..91df2ea2 100644
--- a/apps/www/src/routes/portal/arrangementer/[id]/+page.svelte
+++ b/apps/www/src/routes/portal/arrangementer/[id]/+page.svelte
@@ -4,11 +4,11 @@
 	import { formatDate, time } from '$lib/date';
 	import { capitalize } from '$lib/utils';
 	import { enhance } from '$app/forms';
-	import { getAuthContext } from '$lib/context/user.context.js';
+	import { getUser } from '$lib/context/user.context.js';
 
 	let { data } = $props();
 
-	const auth = getAuthContext();
+	let user = getUser();
 </script>
 
 <svelte:head>
@@ -22,7 +22,7 @@
 
 	<ul class="mt-2 flex flex-col gap-4">
 		{#each data.event.shifts as shift}
-			{@const isInShift = shift.members.some((member) => member.userId === auth.user?.id)}
+			{@const isInShift = shift.members.some((member) => member.userId === $user?.id)}
 			<li class="block rounded-lg border bg-white p-4">
 				<p>{capitalize(formatDate(shift.start))}</p>
 				<p>{time(shift.start)} - {time(shift.end)}</p>