Wrap the session store using Svelte's context API

package.json

@@ -3,7 +3,7 @@
   "version": "0.0.1",
   "private": true,
   "scripts": {
-    "dev": "vite dev --port 8765",
+    "dev": "DEBUG=\"app:*\" vite dev --port 8765",
     "build": "vite build",
     "preview": "vite preview",
     "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
@@ -14,7 +14,7 @@
   "devDependencies": {
     "@fortawesome/free-solid-svg-icons": "6.2.0",
     "@sveltejs/adapter-auto": "1.0.0-next.75",
-    "@sveltejs/kit": "1.0.0-next.484",
+    "@sveltejs/kit": "1.0.0-next.511",
     "@tailwindcss/typography": "0.5.7",
     "@types/debug": "4.1.7",
     "@typescript-eslint/eslint-plugin": "^5.27.0",

src/app.d.ts

@@ -6,7 +6,7 @@ declare namespace App {
 		user?: User;
 	}
 	// interface PageData { }
-	// interface PageError {}
+	// interface Error {}
 	// interface Platform {}
 }
 

src/hooks.server.ts

@@ -14,6 +14,7 @@ export const handle: Handle = async ({ event, resolve }) => {
 		?.split(" ")[1];
 	const token = cookie_token ?? bearer_token;
 
+	log("path:", event.routeId);
 	log("token:", token);
 
 	if (token) {

src/lib/stores/session.ts

@@ -1,11 +1,24 @@
 import debug from "debug";
 import { writable } from "svelte/store";
+import { setContext, getContext } from "svelte";
 
 const log = debug("app:lib:stores:session");
 
 interface Session {
 	user?: User | null;
 }
-export const session = writable<Session>({ user: null });
 
+// If a store is created in SSR, it will end up being a global store shared by all users
+// Let's wrap the store using Svelte's context API
+// See https://github.com/sveltejs/kit/discussions/4339
+
+const session = writable<Session>({ user: null });
 session.subscribe((session) => log("session:", session));
+
+export function createSessionStore() {
+	return setContext("session", session);
+}
+
+export function getSessionStore() {
+	return getContext("session");
+}

src/routes/(authenticated)/+layout.ts

@@ -1,21 +1,17 @@
-import { session } from "$lib/stores/session";
 import { redirect } from "@sveltejs/kit";
 import debug from "debug";
-import { get } from "svelte/store";
 import type { LayoutServerLoadEvent } from "./$types";
 
 const log = debug("app:routes:(authenticated):layout");
 
 export async function load(event: LayoutServerLoadEvent) {
 	const parent_user = (await event.parent())?.user;
 	const locals_user = event.locals?.user;
-	const session_user = get(session)?.user;
 
 	log("parent_user:", parent_user);
 	log("locals_user:", locals_user);
-	log("session_user:", session_user);
 
-	const user = session_user || locals_user || parent_user;
+	const user = locals_user || parent_user;
 
 	log("user:", user);
 

src/routes/+layout.server.ts

@@ -1,7 +1,11 @@
 import type { LayoutServerLoadEvent } from "./$types";
+import debug from "debug";
+
+const log = debug("app:routes:+layout.server.ts");
 
 export async function load(event: LayoutServerLoadEvent) {
 	const user = event.locals?.user;
+	log("user:", user);
 	if (!user) return { user: null };
 	delete user.token;
 	return { user };

src/routes/+layout.svelte

@@ -5,15 +5,17 @@
 	import Footer from "./Footer.svelte";
 	import Header from "./Header.svelte";
 	import debug from "debug";
-	import { session } from "$lib/stores/session";
+	import { createSessionStore } from "$lib/stores/session";
 
 	const log = debug("app:routes:layout.svelte");
 
 	export let data: LayoutData;
 
+	const session = createSessionStore();
+
 	$: title = $page.data?.title ? $page.data.title + " | " : "";
 
-	$: if (data?.user) $session.user = data.user;
+	$: $session.user = data?.user ? data.user : null;
 
 	$: log("data:", data);
 	$: log("$page.data:", $page.data);

src/routes/+page.svelte

@@ -1,5 +1,10 @@
 <script lang="ts">
-	import { session } from "$lib/stores/session";
+	import { getSessionStore } from "$lib/stores/session";
+	import debug from "debug";
+	const session = getSessionStore();
+	const log = debug("app:routes:+page.svelte");
+
+	$: log("session:", $session);
 </script>
 
 <div class="prose">

src/routes/Header.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { session } from "$lib/stores/session";
+	import { getSessionStore } from "$lib/stores/session";
 	import {
 		faBars,
 		faChartLine,
@@ -12,6 +12,8 @@
 	import Fa from "svelte-fa";
 	import "../app.postcss";
 
+	const session = getSessionStore();
+
 	$: menu_items = $session?.user
 		? [
 				{

src/routes/login/+page.svelte

@@ -1,7 +1,5 @@
 <script lang="ts">
-	import { applyAction, enhance } from "$app/forms";
-	import { goto } from "$app/navigation";
-	import { session } from "$lib/stores/session";
+	import { enhance } from "$app/forms";
 	import { faWarning } from "@fortawesome/free-solid-svg-icons";
 	import debug from "debug";
 	import Fa from "svelte-fa";
@@ -21,25 +19,7 @@
 			Use email <code>[email protected]</code> and password <code>asdfasdf</code> to login.
 		</p>
 	</div>
-	<form
-		class="flex flex-col gap-6 my-6"
-		method="POST"
-		use:enhance={() =>
-			async ({ result }) => {
-				log("form result:", result);
-
-				await applyAction(result);
-
-				// TODO: this is kinda a hack since redirecting in the
-				// action doesn't work because we can't also update page
-				// data.
-				if (result.type === "success") {
-					const user = result.data?.user;
-					if (user) $session.user = user;
-					await goto("/dashboard");
-				}
-			}}
-	>
+	<form class="flex flex-col gap-6 my-6" method="POST" use:enhance>
 		{#if form?.error}
 			<div class="alert alert-error">
 				<div>

src/routes/login/+page.ts

@@ -1,8 +1,15 @@
 import { redirect } from "@sveltejs/kit";
+import debug from "debug";
 import type { PageLoadEvent } from "./$types";
 
+const log = debug("app:routes:login:page.ts");
+
 export async function load(event: PageLoadEvent) {
 	const { user } = await event.parent();
-	if (user) throw redirect(303, "/");
+	log("user:", user);
+	if (user) {
+		log("redirecting to /dashboard");
+		throw redirect(303, "/dashboard");
+	}
 	return { title: "Log In" };
 }

src/routes/signup/+page.server.ts

@@ -1,15 +1,21 @@
 import { auth } from "$lib/auth";
 import { AUTH_TOKEN_EXPIRY_SECONDS } from "$lib/constants.server";
-import { invalid, redirect } from "@sveltejs/kit";
+import { invalid } from "@sveltejs/kit";
+import debug from "debug";
+
 import type { Actions } from "./$types";
 
+const log = debug("app:routes:signup:page.server.ts");
+
 export const actions: Actions = {
 	async default(event) {
 		const data = await event.request.formData();
 		const email = data.get("email") as string;
 		const password = data.get("password") as string;
 		const password_confirm = data.get("password-confirm") as string;
 
+		log("data: ", data);
+
 		if (!email)
 			return invalid(422, { email, error: "An email address is required." });
 		if (!password)

src/routes/signup/+page.svelte

@@ -1,14 +1,15 @@
 <script lang="ts">
-	import { applyAction, enhance } from "$app/forms";
+	import { enhance } from "$app/forms";
 	import { faWarning } from "@fortawesome/free-solid-svg-icons";
 	import Fa from "svelte-fa";
 	import type { ActionData } from "./$types";
 	import debug from "debug";
-	import { session } from "$lib/stores/session";
-	import { goto } from "$app/navigation";
+	import { getSessionStore } from "$lib/stores/session";
 
 	const log = debug("app:routes:signup:page.svelte");
 
+	const session = getSessionStore();
+
 	export let form: ActionData;
 </script>
 
@@ -17,25 +18,7 @@
 		<h1>Sign Up</h1>
 	</div>
 
-	<form
-		class="flex flex-col gap-6 my-6"
-		method="POST"
-		use:enhance={() =>
-			async ({ result }) => {
-				log("form result:", result);
-
-				await applyAction(result);
-
-				// TODO: this is kinda a hack since redirecting in the
-				// action doesn't work because we can't also update page
-				// data.
-				if (result.type === "success") {
-					const user = result.data?.user;
-					if (user) $session.user = user;
-					await goto("/dashboard");
-				}
-			}}
-	>
+	<form class="flex flex-col gap-6 my-6" method="POST" use:enhance>
 		{#if form?.error}
 			<div class="alert alert-error">
 				<div>

src/routes/signup/+page.ts

@@ -1,8 +1,14 @@
 import { redirect } from "@sveltejs/kit";
 import type { PageLoadEvent } from "./$types";
+import debug from "debug";
+
+const log = debug("app:routes:login:page.ts");
 
 export async function load(event: PageLoadEvent) {
 	const { user } = await event.parent();
-	if (user) throw redirect(303, "/");
-	return { title: "Sign Up" };
+	log("user:", user);
+	if (user) {
+		log("redirecting to /dashboard");
+		throw redirect(303, "/dashboard");
+	}
 }