I am using Sveltekit 4, with Supabase SSR for authentication. I can successfully access user session data from any route pages, but not from any components.

Here is my src/routes/+layout.server.ts

import type { LayoutServerLoad } from './$types';

export const load: LayoutServerLoad = async ({ locals: { getSession } }) => {
    const session = await getSession();
    return {        
        session
    };
};

and my src/routes/+page.svelte can successfully access a logged in user’s details:

<script lang="ts">
    export let data;
</script>



{#if data.user}
    <h2>Welcome {data.user.email}</h2>
{/if}

how can I also access this logged in user detail in src/lib/components/Navigation.svelte where I would want the following to work:

<script lang="ts">

    export let data: any;

</script>

<h2>Not logged on</h2>

{#if data.user}
<h2>{data.user.email}</h2>
{/if}

My understanding is that data in layout.server.ts would be available in all routes and components, how do I make it available in my component?