5 replies

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()

onClick()

event which awaits the

signIn()

signIn()

function from

auth-client.ts

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()

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()

onSuccess()

onError()

onError()

function, just another

console.log()

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?

Weird behaviour when logging in with Discord

onClick()

onClick()

event which awaits the

signIn()

signIn()

function from

auth-client.ts

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()

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()

onSuccess()

onError()

onError()

function, just another

console.log()

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?

Weird behaviour when logging in with Discord

Weird behaviour when logging in with Discord

Similar Threads

Similar Threads

Similar Threads