Pending state is not changing even after the data is available.
const { data, isPending } = authClient.useListOrganizations.get();
data is not being available until I soft refresh the page (Next.js) and the isPending is not returning false even after the data is fetched. Is this a bug or is it something wrong with my implementation?
15 Replies
make sure you import the client from /react
Ya, I've imported it from "better-auth/react"
Hey @Muhammad Isa have you found the solution?
Nah, I stopped using better-auth after that. I implemented my own auth using Lucia Auth guide.
could you share me something I can reproduce? or at least if you can record screen of the behavior. I couldn't replicate it.
this is running on the client using
isPending to show loading icons once the user sign in, and when pending is false it shows the session.
@bekacru It's happening for me using Oauth and in worst prossible time almost going in production ðŸ˜, the loader is infinite sometimes. I will reproduce and share that same with you!
why do you need to use
isPending for oauth?
Since there will be a redirect, the session would need to load in another page or at least the current page needs to reload.In my navbar I am showing login button. When login is done in place of login button the profile card will appear so in mean time the loader is shown.
import { authClient } from "@/lib/auth-client";
import { useEffect, useRef } from "react";
function useBetterAuthSession() {
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 useBetterAuthSession;
In mean time this worked, Someone suggested on github. (https://github.com/better-auth/better-auth/issues/1006#:~:text=last%20week-,I%20have%20solution,-.)so you need to show loading on your nav bar until the session is fetched and currently the
isPending state is always true, is that right?Exactly!
hmm. so, if you reload your site when there is a session already, does the
isPending stays true indefinitely?Yes, literally searched two days for the solution but couldn't find until I came across the above code. I don't wanna switch the auth I just love better-auth. I will try to reproduce the issue and share the code!
Yeah, I couldn't replicate that. For the record, I'm currently trying it on
1.2.0-beta.16. Update if you're not on the 1.2 beta, although I don't think there are any changes that would affect this behavior.Okay will try that! Thanks anyway!