Access auth info in (every) component

+layout.server.ts

// src/routes/+layout.server.ts
// Ref. https://discord.com/channels/1004048134218981416/1135138484944900156
export const load = ({ locals }) => {
	return {
		isLoggedIn: locals.isLoggedIn
	};
};

+layout.svelte

<!--
src/routes/+layout.svelte
Ref. https://discord.com/channels/1004048134218981416/1135138484944900156
-->
<script lang="ts">
	import { setContext } from 'svelte';
	import { writable } from 'svelte/store';

	export let data;

	const userLoggedIn = writable<boolean>();
	
  $: userLoggedIn.set(data.isLoggedIn);

	setContext('userLoggedIn', userLoggedIn);
	};
</script>

app.d.ts

// Ref. https://discord.com/channels/1004048134218981416/1135138484944900156
import type { Session } from 'lucia';

declare global {
	namespace App {
		interface Locals {
			auth: import('lucia').AuthRequest;
			isLoggedIn: boolean;
		}
	}

	namespace Lucia {
		type Auth = import('$lib/server/lucia').Auth;
		type DatabaseUserAttributes = {
			username: string;
		};
		type DatabaseSessionAttributes = Record<string, string>;
	}
}

export {};

hooks.server.ts

// Ref. https://discord.com/channels/1004048134218981416/1135138484944900156
import { auth } from '$lib/server/lucia';

export const handle = async ({ event, resolve }) => {
	event.locals.auth = auth.handleRequest(event);

	// I need to add if the user is logged in or not:
	const session = await event.locals.auth.validate();
	event.locals.isLoggedIn = session?.user.userId ? true : false;

	return await resolve(event);
};

TreeNode.svelte

<!--
Wherever this component lives, we have access to user auth info.
Ref. https://discord.com/channels/1004048134218981416/1135138484944900156
-->
<script lang="ts">
	import { getContext } from 'svelte';
	import type { Writable } from 'svelte/store';

	const userLoggedIn: Writable<boolean> = getContext('userLoggedIn');
</script>

userLoggedIn: {$userLoggedIn}