useSession not reactive?
The useSession hook from the authentication client is not updating reactively. After the initial render, the isPending state remains true indefinitely, even after authentication is complete. The component only refreshes its state when there's a code change that forces a re-render.
const { data: session, isPending } = authClient.useSession();
Even after authentication is complete, the component doesn't update to show the user as logged in until the file is saved or another action triggers a re-render.
11 Replies
This is issue a lot of people face: https://github.com/better-auth/better-auth/issues/1006
GitHub
useSession() not always triggering a state change · Issue #1006 ·...Is this suited for github? Yes, this is suited for github To Reproduce Sign in with email and password Use useSession() in the following component: export function AuthLayout({ children }: AppLayou...
Solution is to replace authClient.useSession() with custom hook useAuthSession():
import { authClient } from "@/lib/auth-client";
import { useEffect, useRef } from "react";
function useAuthSession() {
const {
data,
isPending,
error, //error object
refetch,
} = authClient.useSession();
// Track the latest value of isPending
const isPendingRef = useRef(isPending);
useEffect(() => {
isPendingRef.current = isPending;
}, [isPending]);
useEffect(() => {
if (isPending) {
const timerNotify = setTimeout(() => {
if (isPendingRef.current) {
refetch(); // sends another get-session request to the server
//authClient.$store.notify("$sessionSignal"); // or this poke store to trigger a re-render
}
}, 2500); // after 2.5 seconds of pending, force resetting client store
const timerReload = setTimeout(() => {
if (isPendingRef.current) {
window.location.reload();
}
}, 5000); // after 5 seconds of pending, reload the page
return () => {
clearTimeout(timerNotify);
clearTimeout(timerReload);
};
}
}, [isPending]);
return {
data,
isPending,
error,
};
}
export default useAuthSession;
pff.... not sure I want to do this "trick"...
this is actually quite a fundamental part of the library, and I am now a bit concerned about it being buggy. ðŸ«
We know it's a fundamental part of the library, and we're trying to figure out what the issue is but still couldn't reproduce it on our end. None of the people have provided a reproducible example I could look at yet. If you can create one, I'd love to take a look.
we're facing the same issue using authclient only when signing up with credentials. @bekacru I saw you posted a client-only demo here is there a way to see the code? maybe that will help us solve our issue. P.S. using google "sing up" updates my session correctly.
GitHub
useSession() not always triggering a state change · Issue #1006 ·...Is this suited for github? Yes, this is suited for github To Reproduce Sign in with email and password Use useSession() in the following component: export function AuthLayout({ children }: AppLayou...
I know I know. Indeed I tried to reproduced it for you and got no issues what-so-ever, but it's still a problem that it happens...!
GitHub
better-auth/demo/nextjs/app/client-test at main · better-auth/bette...
The most comprehensive authentication framework for TypeScript - better-auth/better-auth
@bekacru thanks! I see you have client.useSession() inside the same component you are calling signIn.email. In my case I have a header component inside my layout that calls client.useSession(), and signIn.email() is called in a component inside a specific page. If you have time, can you try a similar structure to see if you can reproduce the bug?
https://github.com/better-auth/better-auth/blob/fix/use-session/demo/nextjs/app/client-test/page.tsx
https://github.com/better-auth/better-auth/blob/fix/use-session/demo/nextjs/components/wrapper.tsx#L21
tried to refactor it. it's still working.
GitHub
better-auth/demo/nextjs/app/client-test/page.tsx at fix/use-session...
The most comprehensive authentication framework for TypeScript - better-auth/better-auth
GitHub
better-auth/demo/nextjs/components/wrapper.tsx at fix/use-session ·...
The most comprehensive authentication framework for TypeScript - better-auth/better-auth
is this new version deployed here? https://demo.better-auth.com/client-test If it is, I'm not seeing the avatar component in the header when I log in, which means that <UserAvatar /> is returning null
No it's not deployed. Try to clone the repo and run it locally.