Better AuthBA
Better Auth•11mo ago
wx

Weird behaviour when logging in with Discord

Hey, I am using Better Auth with latest Next.js and I have this weird "bug (?)" when logging in with Discord. Discord is my only option to log in with.

When I click the login button, which I have tried two approaches:
  1. Client component with a button that has an async onClick() event which awaits the signIn() function from auth-client.ts.
  2. Same as the first one, but with a server action instead.
The button looks like this:

<Button
  variant='outline'
  className='w-full'
  onClick={async () => {
    const [data, error] = await execute();
    if (error) {
      console.log("ERROR:", error);
    }
    console.log("DATA:", data);
  }}
  >
  Login with Discord
</Button>


The signIn() function looks like this:

export const signIn = async () => {
  const data = await authClient.signIn.social(
    {
      provider: "discord",
      callbackURL: "/dashboard",
    },
    {
      onRequest: (ctx) => {
        console.log("loading");
        //show loading
      },
      onSuccess: (ctx) => {
        console.log("success");
        console.log(JSON.stringify(ctx, null, 2));

        //redirect to the dashboard or sign in page
      },
      onError: (ctx) => {
        // display the error message
        console.log("error");
        console.log(JSON.stringify(ctx, null, 2));
      },
    }
  );
};


When I start my local server and click the login button, I get an error, however without any message. This is the output in the dev tools console after I click it:

error
 {
  "response": {},
  "request": {
    "baseURL": "http://localhost:3000/api/auth",
    "credentials": "include",
    "method": "POST",
    "plugins": [
      {
        "id": "redirect",
        "name": "Redirect",
        "hooks": {}
      },
      {
        "id": "apply-schema",
        "name": "Apply Schema",
        "version": "1.0.0"
      }
    ],
    "body": "{\"provider\":\"discord\",\"callbackURL\":\"/dashboard\"}",
    "url": "http://localhost:3000/api/auth/sign-in/social",
    "headers": {},
    "signal": {}
  },
  "error": {
    "status": 0,
    "statusText": ""
  }
}
Navigated to http://localhost:3000/login?
hot-reloader-client.tsx:364 [Fast Refresh] rebuilding


What's weird is that the button starts to work after I modify either the onSuccess() or onError() function, just another console.log() is enough. Then it starts to work again.

I have built the authentication using the documentation and all of the code for auth comes from there too.

Does anyone know what the issue could be?
Was this page helpful?