fix: lifecycle_outside_component (#304)

src/app.d.ts

@@ -5,7 +5,7 @@ declare namespace App {
   // interface Error {}
   interface Locals {
     pb: import('pocketbase').default
-    user: import('pocketbase').default['authStore']['model']
+    user: import('pocketbase').default['authStore']['record']
   }
   // interface PageData {}
   // interface Platform {}

src/hooks.server.ts

@@ -17,7 +17,7 @@ export const handle: Handle = async ({ event, resolve }) => {
   }
 
   event.locals.pb = pb
-  event.locals.user = pb.authStore.model
+  event.locals.user = pb.authStore.record
 
   const response = await resolve(event)
 

src/lib/contexts/user.ts

@@ -1,13 +1,13 @@
-import type { AuthModel } from 'pocketbase'
+import type { AuthRecord } from 'pocketbase'
 import { getContext, setContext } from 'svelte'
 import type { Writable } from 'svelte/store'
 
 const userKey = Symbol('user')
 
-export function setUserContext(user: Writable<AuthModel>) {
+export function setUserContext(user: Writable<AuthRecord>) {
   setContext(userKey, user)
 }
 
 export function getUserContext() {
-  return getContext<Writable<AuthModel>>(userKey)
+  return getContext<Writable<AuthRecord>>(userKey)
 }

src/routes/+layout.svelte

@@ -1,10 +1,11 @@
 <script lang="ts">
   import '../app.postcss'
 
+  import { browser } from '$app/environment'
   import { applyAction, enhance } from '$app/forms'
   import { setUserContext } from '$lib/contexts/user'
   import { pb } from '$lib/pocketbase'
-  import type { Snippet } from 'svelte'
+  import { onDestroy, type Snippet } from 'svelte'
   import { writable } from 'svelte/store'
   import type { PageData } from './$types'
 
@@ -15,8 +16,21 @@
 
   let { data, children }: Props = $props()
 
+  // Initialize user store
   const user = writable(data.user)
   setUserContext(user)
+
+  if (browser) {
+    // Load user from cookie (client-side only)
+    pb.authStore.loadFromCookie(document.cookie)
+
+    // Update user store when auth store changes
+    const unsubscribe = pb.authStore.onChange(() => {
+      user.set(pb.authStore.record)
+      document.cookie = pb.authStore.exportToCookie({ httpOnly: false })
+    }, true)
+    onDestroy(unsubscribe)
+  }
 </script>
 
 <div class="bg-neutral text-neutral-content">