auth.signOut() method fails to return or throw errors, leading to UI hangs

[NotJoeMartinez]

Bug report

• I confirm this is a bug with Supabase, not with my own application.
• I confirm I have searched the Docs, GitHub Discussions, and Discord.

Describe the bug

The supabase.auth.signOut() method fails to return or throw errors when signing out a valid user session. It still signs out the user but this only is reflected when the user manually reloads the page. This was addressed in supabase/auth-js#345 but the suggested method useSupabaseAuthClient(); appears to be deprecated.

To Reproduce

The following vue component is rendered on /signout the user is directed to this page when they click a singout button in the nav bar. No error is thrown and nothing is logged when this page renders. No other links in the nav bar that use router.push work either so I believe this is cause by await supabase.auth.signOut(); not returning. I've resorted to just having a manual link back to the home page of my application.

In my project I'm using pinia to handle the supabase client but I'm exuding that from this example for simplicity, the behavior is identical to my example.

SignOutPageView.vue:

<script setup>
import { onMounted } from 'vue';
import { useRouter } from 'vue-router';
import { createClient } from "@supabase/supabase-js";

const router = useRouter();
const supabase = createClient(supabaseUrl, supabaseKey); // replace with valid credentials 

const signOut = async () => {
  try {
    const { error } = await supabase.auth.signOut();
    if (error) throw error;
    console.log('Signed out successfully');
  } catch (error) {
    console.error('Error signing out:', error.message);
  } finally {
    router.push('/');
  }
};

onMounted(() => {
  signOut();
});
</script>

<template>
    <h1>Signing you out...</h1>
    <p>
        If you are still not redirected after 5 seconds click this 
        link to return to home page <a href="/">https://example.com</a>
    </p>
</template>

Expected behavior

supabase.auth.signOut(); should return an error or complete its process allowing the rest of the code to continue.

System information

• OS: [macOS]
• Browser [chrome, firefox, safari]
• Version of supabase-js: [2.64.2]

Additional context

Recent discord thread about this: https://discord.com/channels/839993398554656828/1260740210178654249

[g-apparence]

Anything on this?
This seems quite an important issue?

[NotJoeMartinez]

Anything on this? This seems quite an important issue?

I managed to get it working on another project but I'm not calling it from within a Vue.js lifecycle hook. I don't know if it was resolved in the newer versions of the library or if I was just using it wrong by not async/awaiting the onMounted lifecycle hook.

<script setup lang="ts">
import { createClient } from "@supabase/supabase-js";
const supabase = createClient(supabaseUrl, supabaseKey); 

const logout = async (): Promise<void> => {
    const { error } = await supabase.auth.signOut()
    if (error) {
      console.error(error);
      alert("Failed to logout");
    }
    await router.push('/');
    window.location.reload();
};
</script>
<template>
        <v-btn 
              color="primary"
              @click="logout">
              Logout
            </v-btn>
</template>

[NotJoeMartinez]

So this might actually be related to how I'm managing auth state with vue-router and pinia, I reproduced my original example and noticed a couple things:

1. The function logs "Signed out successfully" after calling await supabase.auth.signOut(), I don't know if this was the case when I made this issue but it's possible I missed it.
2. While the "logged in" components are still viable to the user, none of the authenticated data is hydrated because the user is effectively signed out.
3. Both my current implementation and the original one work fine if I await router.push('/') and reload the window window.location.reload();

I have a bit a convoluted setup in my router and auth store file so if you're experiencing this issue that's probably a good place to start. With that said, I can get the expected behavior by forcing the browser to reload with window.location.reload(); It's important that you await router.push('/'); before this or it will get stuck in an infinite loop.