Client-side data fetch with RLS

Hello, I'm following the 0.7.0+ Svelte-Kit Auth implementation and I've followed this documentation quite closely: https://supabase.com/docs/guides/auth/auth-helpers/sveltekit#client-side-data-fetching-with-rls

^^ Even though I check for

user

user

and it is populated, the

supabaseClient

supabaseClient

call will still make my call with my

anon

anon

key and not the user's token.

Thus, every time I refresh the page, all queries return an empty array.

async function loadData() {
  const { data } = await supabaseClient
           .from('test')
           .select('*');
  loadedData = data;
}

$: if ($page.data.session.user) {
  loadData(); // <-- This returns [] on load
}

async function loadData() {
  const { data } = await supabaseClient
           .from('test')
           .select('*');
  loadedData = data;
}

$: if ($page.data.session.user) {
  loadData(); // <-- This returns [] on load
}

Unless, I wrap the supabaseClient call in

setTimeout(()=>{},0)

setTimeout(()=>{},0)

. This feels like a hack and I'm wondering what I'm missing?

$: if ($page.data.session.user) {
  setTimeout(() => loadData(), 1);
  // ^^ -- This works but feels hacky
}

$: if ($page.data.session.user) {
  setTimeout(() => loadData(), 1);
  // ^^ -- This works but feels hacky
}

---

I saw someone made a similar post but using nextjs, that post said not only do you have to look for the user, but also

isLoadingUser

isLoadingUser

. Looking through the documentation I don't see any mention of that or understand if that's a purely nextjs/react thing?

Supabase Auth with SvelteKit | Supabase

Convenience helpers for implementing user authentication in SvelteKit.

Client-side data fetch with RLS

user

user

and it is populated, the

supabaseClient

supabaseClient

call will still make my call with my

anon

anon

key and not the user's token.

Thus, every time I refresh the page, all queries return an empty array.

async function loadData() {
  const { data } = await supabaseClient
           .from('test')
           .select('*');
  loadedData = data;
}

$: if ($page.data.session.user) {
  loadData(); // <-- This returns [] on load
}

async function loadData() {
  const { data } = await supabaseClient
           .from('test')
           .select('*');
  loadedData = data;
}

$: if ($page.data.session.user) {
  loadData(); // <-- This returns [] on load
}

Unless, I wrap the supabaseClient call in

setTimeout(()=>{},0)

setTimeout(()=>{},0)

. This feels like a hack and I'm wondering what I'm missing?

$: if ($page.data.session.user) {
  setTimeout(() => loadData(), 1);
  // ^^ -- This works but feels hacky
}

$: if ($page.data.session.user) {
  setTimeout(() => loadData(), 1);
  // ^^ -- This works but feels hacky
}

---

I saw someone made a similar post but using nextjs, that post said not only do you have to look for the user, but also

isLoadingUser

isLoadingUser

. Looking through the documentation I don't see any mention of that or understand if that's a purely nextjs/react thing?

Supabase Auth with SvelteKit | Supabase

Convenience helpers for implementing user authentication in SvelteKit.

Client-side data fetch with RLS

Similar Threads

Client-side data fetch with RLS

Similar Threads

Similar Threads

Similar Threads