BA
Better Auth•3mo 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>
<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));
      },
    }
  );
};
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
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?
3 Replies
philip
philip•2mo ago
Did you manage to fix the issue? Having the same problem
wx
wxOP•2mo ago
I didn't, but seems like the new version (1.2.1) fixed the issue
wade
wade•2mo ago
i can confirm that this is still an issue with 1.2.3 Click login button -> initiates Discord auth 2. Discord authenticates successfully and calls back 3. Instead of redirecting to /dashboard (as configured in redirects.afterSignIn), it redirects to /

Did you find this page helpful?