refactor(*): remove user store in place of supabase session

src/lib/stores/user.ts

@@ -1,5 +0,0 @@
-import { writable } from 'svelte/store';
-import { type User } from '@supabase/auth-js';
-
-// Create a user store with null as the initial value
-export const user = writable<User | null>(null);

src/routes/+layout.svelte

@@ -2,20 +2,13 @@
 	import 'tailwindcss/tailwind.css';
 	import { onDestroy, onMount } from 'svelte';
 	import { basket, type Basket, type Item } from '$lib/stores/basket.js';
-	import { user } from '$lib/stores/user.js';
+	import { invalidate } from '$app/navigation';
-	import { type User } from '@supabase/auth-js';
 	import SignIn from '$lib/components/SignIn.svelte';
 	import SignOut from '$lib/components/SignOut.svelte';
 
 	export let data;
-	let { supabase } = data;
+	let { supabase, session } = data
-	$: ({ supabase } = data);
+	$: ({ supabase, session } = data)
-
-	let localUser = null as User | null;
-	const unsubscribe = user.subscribe((value) => {
-		localUser = value;
-	});
-	onDestroy(unsubscribe);
 
 	let localBasket: Basket;
 	const unsubscribeToBasket = basket.subscribe((value) => {
@@ -23,24 +16,16 @@
 	});
 	onDestroy(unsubscribeToBasket);
 
-	onMount(async () => {
+	onMount(() => {
-		await getUser();
+		const { data } = supabase.auth.onAuthStateChange((event, _session) => {
+				if (_session?.expires_at !== session?.expires_at) {
+					// tells SvelteKit that the root +layout.ts load function should be executed whenever the session updates to keep the page store in sync.
+					invalidate('supabase:auth')
+				}
+			})
+
+			return () => data.subscription.unsubscribe()
 	});
-
-	async function getUser() {
-		const {
-			data: { session }
-		} = await supabase.auth.getSession();
-
-		if (session) {
-			localUser = session.user;
-		} else {
-			localUser = null;
-		}
-
-		// Update the store so that user is available to all components
-		user.set(localUser);
-	}
 </script>
 
 <svelte:head>
@@ -125,9 +110,9 @@
 			<div class="dropdown dropdown-end">
 				<div tabindex="0" role="button" class="btn btn-ghost btn-circle avatar">
 					<div class="w-10 rounded-full">
-						{#if localUser}
+						{#if session?.user}
 							<div class="user-circle text-primary-content border-primary-content">
-								{localUser.email[0].toUpperCase()}
+								{session?.user.email[0].toUpperCase()}
 							</div>
 						{:else}
 							<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
@@ -141,7 +126,7 @@
 					</div>
 				</div>
 
-				{#if localUser}
+				{#if session?.user}
 					<ul
 						tabindex="-1"
 						class="mt-3 z-[1] p-2 shadow menu menu-sm dropdown-content bg-base-100 text-base-content rounded-box min-w-[13rem] w-auto"

src/routes/+page.svelte

@@ -1,18 +1,11 @@
 <script lang="ts">
 	import { onDestroy } from 'svelte';
-	import { user } from '$lib/stores/user.js';
 	import { type User } from '@supabase/auth-js';
 	import SignUp from '$lib/components/SignUp.svelte';
 
 	export let data;
-	let { supabase } = data;
+	let { supabase, session } = data;
-	$: ({ supabase } = data);
+	$: ({ supabase, session } = data);
-
-	let localUser: User | null;
-	const unsubscribe = user.subscribe((value) => {
-		localUser = value;
-	});
-	onDestroy(unsubscribe);
 </script>
 
 <div class="hero bg-base-100 my-36">

src/routes/profile/+page.svelte

@@ -1,22 +1,15 @@
 <script lang="ts">
 	import { onDestroy } from 'svelte';
-	import { user } from '$lib/stores/user.js';
 	import { type User } from '@supabase/auth-js';
 
 	export let data;
-	let { supabase } = data;
+	let { supabase, session } = data;
-	$: ({ supabase } = data);
+	$: ({ supabase, session } = data);
-
-	let localUser: User | null;
-	const unsubscribe = user.subscribe((value) => {
-		localUser = value;
-	});
-	onDestroy(unsubscribe);
 </script>
 
 <div class="h-screen">
-	{#if localUser}
+	{#if session?.user}
-		{localUser?.email}
+		{session?.user?.email}
 	{:else}
 		<p>Please log in to view this page</p>
 	{/if}