Best Practices for Fresh SvelteKit Data?

[MattHeslington]

Hello,

I love Lucia - great package, thank you! Just a hobby coder so apologies if I've missed something obvious.

I have integrated Lucia (v3) with SvelteKit. I have GitHub OAuth working well within the app. However, I'm wodering about best practices as I have a small bug. My root +layout.svelte file contains the header.svelte component, which when a user is logged in shows their avatar and name etc. At the moment, the data flow for this as follows:

The root +layout.server file has a load function which returns the user data:

export const load = async (event) => { 
    return { 
        userid: event.locals.user?.id, 
        username: event.locals.user?.username, 
        avatar: event.locals.user?.avatar
     } 
}

2. This is passed to the +layout.svelte file which contains the header component:

<script>
	export let data
	import Header from './header.svelte'
</script>

<main class="h-screen w-screen px-5">
	<Header {data} />
	<slot />
</main>

The problem is, if a user logs out, the data in the header is not refreshed and still shows them as being logged in.

As I understand it, a +layout.server.js file is only loaded once, initially, so a user logging does not cause the load function in that filw to run again. How do I keep the information in the header fresh? What's best practice, please?

I've watched the Huntabyte video regarding not using layout server files for auth because of this, but I can't think of a workaround when we need to show data in a component is a layout. I did use Lucia v2 in a different project, with the same data flow, and for some reason this wasn't an issue.

Anyway, many thanks for any advice!
Matt

[MattHeslington]

Looks best way is just to check the $page.data value

[t4pZ]

I use the invalidateAll Method from svelteKit to reload all route data.