BA
Better Auth•5mo ago
A Microcosm of the Macrocosm

Refresh the page after authClient.signOut()

I have something like 
const handleSingOut = async () => {
  await authClient.signOut();
  router.push("/login");
};
const handleSingOut = async () => {
  await authClient.signOut();
  router.push("/login");
};
- I have an index, a login and a protected page - On the protected page, I display the session and have a sign out button - When I click on sign out, I do get signed out[I see that the better-auth session is removed from the cookies] and I am then redirected to the home page - But even after that, if I navigate to the, say, protected page, I can still see the session that I had displayed, the sign out button, etc. - However, when I refresh the page, then things work normally. I am prompted to login again. I'm new to Nuxt. I'm thinking it has something to do with caching or some of the checks not being performed on the client. Does anyone have an idea what I might be missing? Setup: Nuxt | Better-Auth | Drizzle ORM | PostgreSQL | Google Provider Thank you.
3 Replies
A Microcosm of the Macrocosm
A Microcosm of the MacrocosmOP•5mo ago
Extra Info: I have a global middleware like: 
import { authClient } from "../../lib/auth-client";

export default defineNuxtRouteMiddleware(async (to) => {
  const isUserNavigatingToProtected = to.path.startsWith("/protected");
  const { data: loggedIn } = await authClient.useSession(useFetch);
  const isNavigatingToLogin = to.path.startsWith("/login");
  if (isUserNavigatingToProtected && !loggedIn.value) {
    return navigateTo("/login");
  }
  if (isNavigatingToLogin && loggedIn.value) {
    return navigateTo("/");
  }
});
import { authClient } from "../../lib/auth-client";

export default defineNuxtRouteMiddleware(async (to) => {
  const isUserNavigatingToProtected = to.path.startsWith("/protected");
  const { data: loggedIn } = await authClient.useSession(useFetch);
  const isNavigatingToLogin = to.path.startsWith("/login");
  if (isUserNavigatingToProtected && !loggedIn.value) {
    return navigateTo("/login");
  }
  if (isNavigatingToLogin && loggedIn.value) {
    return navigateTo("/");
  }
});
The login is being done like: 
const handleSignIn = () => {
  authClient.signIn.social({
    provider: "google",
    callbackURL: "/protected",
  });
};
const handleSignIn = () => {
  authClient.signIn.social({
    provider: "google",
    callbackURL: "/protected",
  });
};
UPDATE: It turns out that if I do: 
const handleSingOut = async () => {
  await authClient.signOut();
  // Force a refresh of the page to ensure session data is updated
  window.reload();
};
</script>
const handleSingOut = async () => {
  await authClient.signOut();
  // Force a refresh of the page to ensure session data is updated
  window.reload();
};
</script>
It refreshes the page on sign out, and then that state isn't kept and I can't see the previous session data. However, I'm 100% sure this isn't how it should be done. I have the feeling it has to do with some SSR stuff Like, checking if we are on the client, then do things differently, Idk.
Winter
Winter•5mo ago
You should be able to do the following: 
async function logout() {
  await authClient.signOut({
    fetchOptions: {
      onSuccess: () => {
        navigateTo('/') 
      },
    }
  })
}
async function logout() {
  await authClient.signOut({
    fetchOptions: {
      onSuccess: () => {
        navigateTo('/') 
      },
    }
  })
}
If you don't wait for the sign-out to finish you can encounter some bugs. But you may also want to handle the failure events. navigateTo should preserve your state as it will use the Nuxt router.
A Microcosm of the Macrocosm
A Microcosm of the MacrocosmOP•4mo ago
HUH! That actually solved it. THANK YOU, @Winter .

Did you find this page helpful?