diff --git a/src/routes/+layout.ts b/src/routes/+layout.ts
new file mode 100644
index 0000000..c173c2e
--- /dev/null
+++ b/src/routes/+layout.ts
@@ -0,0 +1,32 @@
+import { PUBLIC_SUPABASE_ANON_KEY, PUBLIC_SUPABASE_URL } from '$env/static/public'
+import type { LayoutLoad } from './$types'
+import { createBrowserClient, createServerClient, isBrowser } from '@supabase/ssr'
+
+export const load: LayoutLoad = async ({ fetch, data, depends }) => {
+  depends('supabase:auth')
+  const supabase = isBrowser()
+    ? createBrowserClient(PUBLIC_SUPABASE_URL, PUBLIC_SUPABASE_ANON_KEY, {
+        global: {
+          fetch,
+        },
+      })
+    : createServerClient(PUBLIC_SUPABASE_URL, PUBLIC_SUPABASE_ANON_KEY, {
+        global: {
+          fetch,
+        },
+        cookies: {
+          getAll() {
+            return data?.cookies ?? []
+          },
+        },
+      })
+  /**
+   * It's fine to use `getSession` here, because on the client, `getSession` is
+   * safe, and on the server, it reads `session` from the `LayoutData`, which
+   * safely checked the session using `safeGetSession`.
+   */
+  const {
+    data: { session },
+  } = await supabase.auth.getSession()
+  return { supabase, session }
+}
\ No newline at end of file
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 6d694da..7642608 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -1 +1,16 @@
-<p>hello world</p>
\ No newline at end of file
+<script lang="ts">
+  import { onMount } from 'svelte';
+
+  let data = $props();
+
+  onMount( async () => {
+    await handleClick();
+  });
+
+  async function handleClick() {
+    console.log( await data.data.supabase.from('qrcodes').select().eq('id', "4b461fd7-d7db-4739-8ca0-6e78cc299813"));
+  }
+</script>
+
+
+<p>hello world</p>