From d61908fcb7ed0805adda2602c48d41f0fa8d09af Mon Sep 17 00:00:00 2001
From: Justin Edmund <justin@jedmund.com>
Date: Sat, 29 Nov 2025 19:11:05 -0800
Subject: [PATCH] move auth init to +layout.ts load function

init authStore in load function before components mount
removes race condition with tanstack query mutations
---
 src/routes/+layout.svelte | 16 +---------------
 src/routes/+layout.ts     | 13 ++++++++++++-
 2 files changed, 13 insertions(+), 16 deletions(-)

diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 399ea8ad..09aa6cd2 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -8,8 +8,7 @@
 	import { sidebar } from '$lib/stores/sidebar.svelte'
 	import { Tooltip } from 'bits-ui'
 	import { beforeNavigate, afterNavigate } from '$app/navigation'
-	import { authStore } from '$lib/stores/auth.store'
-	import { browser, dev } from '$app/environment'
+	import { dev } from '$app/environment'
 	import { QueryClientProvider } from '@tanstack/svelte-query'
 	import { SvelteQueryDevtools } from '@tanstack/svelte-query-devtools'
 	import type { LayoutData } from './$types'
@@ -27,19 +26,6 @@
 	// Store scroll positions for each visited route
 	const scrollPositions = new Map<string, number>();
 
-    // Initialize auth store from server data when data prop is populated
-    // Use $effect to ensure we react to when server data is available
-    $effect(() => {
-        if (browser && data?.auth) {
-            console.log('[+layout] Initializing authStore with token:', data.auth.accessToken ? 'present' : 'missing')
-            authStore.initFromServer(
-                data.auth.accessToken,
-                data.auth.user,
-                data.auth.expiresAt
-            )
-        }
-    })
-
 	// Save scroll position before navigating away and close sidebar
 	beforeNavigate(({ from }) => {
 		// Close sidebar when navigating
diff --git a/src/routes/+layout.ts b/src/routes/+layout.ts
index 52cf5021..80df6c7f 100644
--- a/src/routes/+layout.ts
+++ b/src/routes/+layout.ts
@@ -11,8 +11,19 @@
 import type { LayoutLoad } from './$types'
 import { browser } from '$app/environment'
 import { QueryClient } from '@tanstack/svelte-query'
+import { authStore } from '$lib/stores/auth.store'
+
+export const load: LayoutLoad = async ({ data }) => {
+	// Initialize auth store from server data BEFORE creating QueryClient
+	// This ensures auth is ready when mutations initialize
+	if (browser && data.auth) {
+		authStore.initFromServer(
+			data.auth.accessToken,
+			data.auth.user,
+			data.auth.expiresAt
+		)
+	}
 
-export const load: LayoutLoad = async () => {
 	const queryClient = new QueryClient({
 		defaultOptions: {
 			queries: {