ModelContextProtocol

MMuhammad Isa const { data, isPending } = authClient.useListOrganizations.get(); data is not ...

B

bekacru•2/5/25, 6:16 AM

make sure you import the client from /react

import { createAuthClient } from "better-auth/react"

import { createAuthClient } from "better-auth/react"

M

Muhammad IsaOP•2/5/25, 6:17 AM

Ya, I've imported it from "better-auth/react"

J

joseph013318•2/27/25, 5:51 AM

Hey @Muhammad Isa have you found the solution?

M

Muhammad IsaOP•2/27/25, 6:05 AM

Nah, I stopped using better-auth after that. I implemented my own auth using Lucia Auth guide.

Jjoseph013318 Hey @Muhammad Isa have you found the solution?

B

bekacru•2/27/25, 6:50 AM

could you share me something I can reproduce? or at least if you can record screen of the behavior. I couldn't replicate it.

B

bekacru•2/27/25, 6:52 AM

this is running on the client using

isPending

isPending

to show loading icons once the user sign in, and when pending is false it shows the session.

function SessionComp() {
    const { data, isPending, error } = client.useSession();
    return (
        <div>
            {isPending ? (
                <div>
                    <Loader2 />
                </div>
            ) : error ? (
                <div>
                    Error: {error.message}
                </div>
            ) : session ? (
                <div></div>
            ) : (
                <div> </div>
            )}
        </div>
    );
}

function SessionComp() {
    const { data, isPending, error } = client.useSession();
    return (
        <div>
            {isPending ? (
                <div>
                    <Loader2 />
                </div>
            ) : error ? (
                <div>
                    Error: {error.message}
                </div>
            ) : session ? (
                <div></div>
            ) : (
                <div> </div>
            )}
        </div>
    );
}

function SessionComp() {
    const { data, isPending, error } = client.useSession();
    return (
        <div>
            {isPending ? (
                <div>
                    <Loader2 />
                </div>
            ) : error ? (
                <div>
                    Error: {error.message}
                </div>
            ) : session ? (
                <div></div>
            ) : (
                <div> </div>
            )}
        </div>
    );
}

function SessionComp() {
    const { data, isPending, error } = client.useSession();
    return (
        <div>
            {isPending ? (
                <div>
                    <Loader2 />
                </div>
            ) : error ? (
                <div>
                    Error: {error.message}
                </div>
            ) : session ? (
                <div></div>
            ) : (
                <div> </div>
            )}
        </div>
    );
}

J

joseph013318•2/27/25, 7:09 AM

@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!

Jjoseph013318 @bekacru It's happening for me using Oauth and in worst prossible time almost go...

B

bekacru•2/27/25, 7:12 AM

why do you need to use

isPending

isPending

for oauth?

Jjoseph013318 @bekacru It's happening for me using Oauth and in worst prossible time almost go...

B

bekacru•2/27/25, 7:14 AM

Since there will be a redirect, the

session

session

would need to load in another page or at least the current page needs to reload.

Bbekacru why do you need to use `isPending` for oauth?

J

joseph013318•2/27/25, 7:18 AM

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.

J

joseph013318•2/27/25, 7:19 AM

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;

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;

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;

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,-.)

Jjoseph013318 In my navbar I am showing login button. When login is done in place of login but...

B

bekacru•2/27/25, 7:19 AM

so you need to show loading on your nav bar until the session is fetched and currently the

isPending

isPending

state is always

true

true

, is that right?

Bbekacru so you need to show loading on your nav bar until the session is fetched and cur...

J

joseph013318•2/27/25, 7:19 AM

Exactly!

Jjoseph013318 Exactly!

B

bekacru•2/27/25, 7:21 AM

hmm. so, if you reload your site when there is a session already, does the

isPending

isPending

stays true indefinitely?

Bbekacru hmm. so, if you reload your site when there is a session already, does the `isPe...

J

joseph013318•2/27/25, 7:24 AM

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!

Jjoseph013318 Yes, literally searched two days for the solution but couldn't find until I came...

B

bekacru•2/27/25, 7:28 AM

Yeah, I couldn't replicate that. For the record, I'm currently trying it on

1.2.0-beta.16

1.2.0-beta.16

. Update if you're not on the

1.2

1.2

beta, although I don't think there are any changes that would affect this behavior.

Bbekacru Yeah, I couldn't replicate that. For the record, I'm currently trying it on `1.2...

J

joseph013318•2/27/25, 7:34 AM

Okay will try that! Thanks anyway!

J

joseph013318•3/4/25, 4:40 PM

Hey @bekacru any update on the issue?

Jjoseph013318 Hey @bekacru any update on the issue?

B

bekacru•3/4/25, 4:48 PM

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...

Bbekacru https://github.com/better-auth/better-auth/issues/1006

J

joseph013318•3/4/25, 5:46 PM

Pending state is not changing even after the data is available.

Similar Threads

Similar Threads

Similar Threads