couldn't handle custom error from authorize in frontend, using Vite, React and Hono.js

[QingjiaTsang]

Environment

node version: v20.13.1
not using nextjs, only vite, react for frontend and honojs for backend
here's the deps:

    "react": "^19.0.0",
    "react-dom": "^19.0.0",
    "@auth/core": "^0.37.4",
    "@hono/auth-js": "^1.0.15",

Reproduction URL

https://github.com/QingjiaTsang/reproduce-authjs-issue

Describe the issue

I have followed the docs guide, but failed.
https://authjs.dev/getting-started/providers/credentials#custom-error-messages

In honojs auth config file, I tried to throw a custom error from authorize:

// apps/api/src/lib/create-auth-config.ts
import type { AuthConfig } from "@hono/auth-js";

import { AuthError, CredentialsSignin } from "@auth/core/errors";
import { encode } from "@auth/core/jwt";
import Credentials from "@auth/core/providers/credentials";
import GitHub from "@auth/core/providers/github";
import Google from "@auth/core/providers/google";
import { DrizzleAdapter } from "@auth/drizzle-adapter";
import { drizzle } from "drizzle-orm/d1";
import { v4 as uuidv4 } from "uuid";

import type { AppEnv } from "./types";

import { getUserFromDb } from "./auth-utils";

class InvalidLoginError extends CredentialsSignin {
  code = "custom-error-code";
}

export default function createAuthConfig(env: AppEnv["Bindings"]): AuthConfig {
  const adapter = DrizzleAdapter(drizzle(env.DB));
  const db = drizzle(env.DB);

  return {
    adapter,
    secret: env.AUTH_SECRET,
    providers: [
      GitHub({
        clientId: env.GITHUB_CLIENT_ID,
        clientSecret: env.GITHUB_CLIENT_SECRET,
      }),
      Google({
        clientId: env.AUTH_GOOGLE_ID,
        clientSecret: env.AUTH_GOOGLE_SECRET,
      }),
      Credentials({
        credentials: {
          email: {
            label: "Email",
            type: "email",
            placeholder: "Please enter your email",
          },
          password: {
            label: "Password",
            type: "password",
            placeholder: "Please enter your password",
          },
        },
        async authorize(credentials) {
          if (!credentials?.email || !credentials?.password) {
            return null;
          }

          const result = await getUserFromDb(db, credentials.email as string, credentials.password as string);

          // Wrong password or email not verified
          if (!result.success) {
            throw new InvalidLoginError("my custom error");
            // throw new InvalidLoginError(result.message)
          }

          return result.user!;
        },
      }),
    ],
    callbacks: {
      async jwt({ token, account }) {
        if (account?.provider === "credentials") {
          token.credentials = true;
        }
        return token;
      },
    },
    jwt: {
      encode: async (params) => {
        if (params.token?.credentials) {
          const sessionToken = uuidv4();

          if (!params.token.sub) {
            throw new Error("No user ID found in token");
          }

          const createdSession = await adapter.createSession?.(
            {
              sessionToken,
              userId: params.token.sub,
              expires: new Date(Date.now() + 1000 * 60 * 60 * 24 * 30), // 30 days
            },
          );

          if (!createdSession) {
            throw new Error("Failed to create session");
          }

          return sessionToken;
        }

        return await encode(params);
      },
    },
  };
}

But it failed to catch that in frontend:

  // apps/web/src/services/auth/api.ts
  credentialSignin: async (data: CredentialsSchema & { callbackUrl?: string }) => {
    try {
      const response = await signIn("credentials", {
        ...data,
        callbackUrl: data.callbackUrl,
        redirect: false,
      });

      console.log({
        response,
      });

      return response;
    }
    catch (error) {
      // throw new Error(error.message);
      console.error(error);
    }
  },

It always prints like this, no matter how I tried the solutions relative to this issue in the github (like creating a custom Error class extended from CredentialsSignin or AuthError), it always can't bring the custom error message out. So I guess those solutions there maybe only work for nextjs, and I'm using vite, React and Honojs, it doesn't have the server side like server action in nextjs.

How to reproduce

1. run commands below:

pnpm i

pnpm dlx wrangler d1 create replace-with-your-database-name-here

pnpm run -r db:migrate:local

pnpm dev

2. get to the /signin route and type any email and password to trigger the error from auth.js and open the devtools console to see what it looks like.

Expected behavior

have an easy access to handle the custom error thrown from authorize in frontend

[QingjiaTsang]

Here for someone using pure React and coming up with the same problem:

I write my own sign-in endpoint for handling the custom error which is not so supported by authjs when it comes to just use React instead of Nextjs.
Check out the code below. This is mainly what the endpoint handler does, and it basically just verifies the user and inserts the session to the db by ourselves. Maybe you would wonder how it works; it's pretty easy. Just check out the network section in the devtools, you'll see the auth.js always sending requests to /api/auth/session to see if we signed in. Under the hood, it just queries the db to verify the seesion. You can go deep into the source code of authjs to check it out the details.

export const credentialsSignin: AppRouteHandler<CredentialsSigninRoute> = async (c) => {
  const db = createDb(c.env);
  const body = c.req.valid("json");

  const result = await getUserFromDb(db, body.email, body.password);

  if (!result.success) {
    return c.json({
      message: result.message!,
    }, HttpStatusCodes.UNAUTHORIZED);
  }

  const sessionToken = createId();
  const expires = addDays(new Date(), 30);

  await db.insert(sessions).values({
    sessionToken,
    userId: result.user!.id,
    expires,
  });

  setCookie(c, "authjs.session-token", sessionToken, {
    expires,
    httpOnly: true,
    secure: c.env.ENV === "production",
    path: "/",
  });

  return c.json(result.user, HttpStatusCodes.OK);
};

import type { DrizzleD1Database } from "drizzle-orm/d1";

import bcrypt from "bcryptjs";

import type * as schema from "@/api/db/schema";

export async function hashPassword(password: string) {
  return bcrypt.hash(password, 10);
}

export async function verifyPassword(password: string, hashedPassword: string) {
  return bcrypt.compare(password, hashedPassword);
}

export async function getUserFromDb(
  db: DrizzleD1Database<typeof schema>,
  email: string,
  password: string,
) {
  const existingUser = await db
    .query
    .users
    .findFirst({
      where: (users, { eq }) => eq(users.email, email),
    });

  if (!existingUser) {
    return {
      success: false,
      message: "User not found",
    };
  }

  if (!existingUser.password) {
    return {
      success: false,
      message: "Password is required",
    };
  }

  if (!existingUser.emailVerified) {
    return {
      success: false,
      message: "Email not verified",
    };
  }

  const isValid = await verifyPassword(password, existingUser.password);

  if (!isValid) {
    return {
      success: false,
      message: "Invalid password",
    };
  }

  const { password: _, ...user } = existingUser;

  return {
    success: true,
    user,
  };
}

[tanjunior]

It always prints like this, no matter how I tried the solutions relative to this issue in the github (like creating a custom Error class extended from CredentialsSignin or AuthError), it always can't bring the custom error message out. So I guess those solutions there maybe only work for nextjs, and I'm using vite, React and Honojs, it doesn't have the server side like server action in nextjs.

other than your error, i also experience weird issues with wrapping the signIn in a try/catch block.

Screen.Recording.2025-02-17.192047.mp4

doesn't work

export async function signInGitHub() {
  try {
    await naSignIn("github");
  } catch (error) {
    console.log(error)
  }
}

works

export async function signInGitHub() {
    await naSignIn("github");
}

"next": "^15.0.1"
"next-auth": "5.0.0-beta.25"