Working

src/routes/+layout.ts

@@ -1,14 +1,19 @@
+import { createBrowserClient, createServerClient, isBrowser } from '@supabase/ssr'
 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 }) => {
+export const load: LayoutLoad = async ({ data, depends, fetch }) => {
+  /**
+   * Declare a dependency so the layout can be invalidated, for example, on
+   * session refresh.
+   */
   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: {
@@ -16,10 +21,11 @@ export const load: LayoutLoad = async ({ fetch, data, depends }) => {
         },
         cookies: {
           getAll() {
-            return data.cookies ?? []
+            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
@@ -28,5 +34,10 @@ export const load: LayoutLoad = async ({ fetch, data, depends }) => {
   const {
     data: { session },
   } = await supabase.auth.getSession()
-  return { supabase, session }
+
+  const {
+    data: { user },
+  } = await supabase.auth.getUser()
+
+  return { session, supabase, user }
 }