github-starred/better-auth
2
0
Fork 0
mirror of https://github.com/better-auth/better-auth.git synced 2026-05-22 22:32:01 -05:00
Code Issues 2.5k Packages Projects Releases 112 Wiki Activity

isLoading indicator on all the hooks on the auth client #77

New Issue
Closed
opened 2026-03-13 07:31:53 -05:00 by GiteaMirror · 5 comments
GiteaMirror commented 2026-03-13 07:31:53 -05:00
Owner
Copy Link

Originally created by @firstaxel on GitHub (Oct 15, 2024).

i am making a request to add a loading indicator on the signUp and signIn hooks cause it helps the user experience when loading indicator is shown when any functions is run on the client

Originally created by @firstaxel on GitHub (Oct 15, 2024). i am making a request to add a loading indicator on the signUp and signIn hooks cause it helps the user experience when loading indicator is shown when any functions is run on the client
GiteaMirror commented 2026-03-13 07:31:55 -05:00
Author
Owner
Copy Link

@Loa212 commented on GitHub (Oct 15, 2024):

Since those are just promises (not hooks), tanstack-query's useMutation can achieve the same result.

No need to add it here IMHO.

Here's how I would do it:

import { useMutation } from '@tanstack/react-query';
import { signIn } from '@/lib/auth-client';

const useSignIn = () => {
  return useMutation({
    mutationFn: async (credentials: { email: string; password: string }) => {
      return await signIn(credentials);
    },
  });
};

// Usage in a component
const SignInComponent: React.FC = () => {
  const { mutate: signIn, isLoading, isError, error } = useSignIn();

  const handleSignIn = () => {
    signIn({ email: 'user@example.com', password: 'password' });
  };

  return (
    <button onClick={handleSignIn} disabled={isLoading}>
      {isLoading ? 'Signing In...' : 'Sign In'}
    </button>
  );
};

TLDR: use tanstack

@Loa212 commented on GitHub (Oct 15, 2024): Since those are just promises (not hooks), tanstack-query's useMutation can achieve the same result. No need to add it here IMHO. Here's how I would do it: ```tsx import { useMutation } from '@tanstack/react-query'; import { signIn } from '@/lib/auth-client'; const useSignIn = () => { return useMutation({ mutationFn: async (credentials: { email: string; password: string }) => { return await signIn(credentials); }, }); }; // Usage in a component const SignInComponent: React.FC = () => { const { mutate: signIn, isLoading, isError, error } = useSignIn(); const handleSignIn = () => { signIn({ email: 'user@example.com', password: 'password' }); }; return ( <button onClick={handleSignIn} disabled={isLoading}> {isLoading ? 'Signing In...' : 'Sign In'} </button> ); }; ``` TLDR: use tanstack
GiteaMirror commented 2026-03-13 07:31:57 -05:00
Author
Owner
Copy Link

@Bekacru commented on GitHub (Oct 15, 2024):

you can do what @Loa212 recommended here or you can also have your own loading state and set it on a callback.

const [loading, setLoading] = useState(false)

await signIn.email(
     {
         email,
         password
     },
     {
          onResponse: () => {
                setLoading(false);
           },
          onRequest: () => {
                 setLoading(true);
          },
          onError: (ctx) => {
                toast.error(ctx.error.message);
          },
      }
 )
@Bekacru commented on GitHub (Oct 15, 2024): you can do what @Loa212 recommended here or you can also have your own loading state and set it on a callback. ```ts const [loading, setLoading] = useState(false) await signIn.email( { email, password }, { onResponse: () => { setLoading(false); }, onRequest: () => { setLoading(true); }, onError: (ctx) => { toast.error(ctx.error.message); }, } ) ```
GiteaMirror commented 2026-03-13 07:31:58 -05:00
Author
Owner
Copy Link

@firstaxel commented on GitHub (Oct 15, 2024):

I tried the tanstack approach but there is a issue associated with that ,
which is you can't do the same with socials cause it need callbackurl which
will not be redirected with tansack query and also with email, there is a
issue with when signing up with email it is complicated . the way I will
use Bereket way but having to tackle with usestate, I just wish we could
have the same time done like tansack query which we have the mutate,
isloading, data, error it will be a good developer experience and also for
the user

On Tue, Oct 15, 2024, 5:39 PM Bereket Engida @.***>
wrote:

you can do what @Loa212 https://github.com/Loa212 recommended here or
you can also have your own loading state and set it on a callback.

const [loading, setLoading] = useState(false)
await signIn.email(
{
email,
password
},
{
onResponse: () => {
setLoading(false);
},
onRequest: () => {
setLoading(true);
},
onError: (ctx) => {
toast.error(ctx.error.message);
},
}
)

—
Reply to this email directly, view it on GitHub
https://github.com/better-auth/better-auth/issues/180#issuecomment-2414509240,
or unsubscribe
https://github.com/notifications/unsubscribe-auth/A5RGP2XYFP5JJ57SKQPM52TZ3VANJAVCNFSM6AAAAABP7ODJLSVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDIMJUGUYDSMRUGA
.
You are receiving this because you authored the thread.Message ID:
@.***>

@firstaxel commented on GitHub (Oct 15, 2024): I tried the tanstack approach but there is a issue associated with that , which is you can't do the same with socials cause it need callbackurl which will not be redirected with tansack query and also with email, there is a issue with when signing up with email it is complicated . the way I will use Bereket way but having to tackle with usestate, I just wish we could have the same time done like tansack query which we have the mutate, isloading, data, error it will be a good developer experience and also for the user On Tue, Oct 15, 2024, 5:39 PM Bereket Engida ***@***.***> wrote: > you can do what @Loa212 <https://github.com/Loa212> recommended here or > you can also have your own loading state and set it on a callback. > > const [loading, setLoading] = useState(false) > await signIn.email( > { > email, > password > }, > { > onResponse: () => { > setLoading(false); > }, > onRequest: () => { > setLoading(true); > }, > onError: (ctx) => { > toast.error(ctx.error.message); > }, > } > ) > > — > Reply to this email directly, view it on GitHub > <https://github.com/better-auth/better-auth/issues/180#issuecomment-2414509240>, > or unsubscribe > <https://github.com/notifications/unsubscribe-auth/A5RGP2XYFP5JJ57SKQPM52TZ3VANJAVCNFSM6AAAAABP7ODJLSVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDIMJUGUYDSMRUGA> > . > You are receiving this because you authored the thread.Message ID: > ***@***.***> >
GiteaMirror commented 2026-03-13 07:31:59 -05:00
Author
Owner
Copy Link

@Loa212 commented on GitHub (Oct 15, 2024):

You can do it like this:

const {data, isPending, error} = useMutation({
    mutationFn: async () => {
         return await client.signIn.social({
           provider: "github",
           callbackURL: "/dashboard",
          })
       },
  });
@Loa212 commented on GitHub (Oct 15, 2024): You can do it like this: ```tsx const {data, isPending, error} = useMutation({ mutationFn: async () => { return await client.signIn.social({ provider: "github", callbackURL: "/dashboard", }) }, }); ```
GiteaMirror commented 2026-03-13 07:31:59 -05:00
Author
Owner
Copy Link

@Bekacru commented on GitHub (Oct 16, 2024):

I just wish we could have the same time done like tansack query which we have the mutate, isloading, data, error it will be a good developer experience and also for the user

This would require us to turn all the client methods into hooks, which we're not planning to do because we want the client to remain agnostic and consistent across different frameworks.

@Bekacru commented on GitHub (Oct 16, 2024): > I just wish we could have the same time done like tansack query which we have the mutate, isloading, data, error it will be a good developer experience and also for the user This would require us to turn all the client methods into hooks, which we're not planning to do because we want the client to remain agnostic and consistent across different frameworks.
Sign in to join this conversation.
No Branch/Tag Specified
Branches Tags
Labels
Clear labels
adapter
astro
awaiting external contributor
blocked
breaking
breaking change
bug
c-devops
core
credentials
database
dependencies
devops
devtools
docs
documentation
duplicate
elysia
enhancement
enterprise
expo
express
fastify
good first issue
help wanted
hono
identity
infra
integration
invalid
javascript
locked
maintenance
need-more-information
needs: info
needs: repro
nextjs
nuxt
oauth
organization
P0
payments
perf
platform
plugin
pull-request
Mirrored from GitHub Pull Request
 question
ready
regression
remix
security
social-provider
solid
stale
svelte
tanstack-start
tracking
version-bump
vue
wontfix
No Label
Milestone
No items
No Milestone
Projects
Clear projects
No project
Assignees
Clear assignees
GiteaMirror ninjasurge
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: github-starred/better-auth#77
Delete Branch "%!s()"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?