can not handle error from AuthError v-beta

[h-rajabi]

Environment

auth.config file

      id: "credentials",
      async authorize(credentials) {
        if (!credentials) {
          console.log("first");
          return null;
        }
        try {
          const response = await axiosInstance.post("/api/v1/auth", {
            phoneNumber: credentials.phone,
            password: credentials.password,
          });

          if (response.status === 200 && response.data) {
            return response.data;
          } else if (!response.data) {
            return null;
          } else {
            throw new Error(`Unexpected status code: ${response.status}`);
          }
        } catch (error: any) {
          if (error.response) {
            // Handle specific status codes
            switch (error.response.status) {
              case 400:
                throw new Error("Invalid credentials.");
              case 401:
                throw new Error(
                  "Unauthorized. Please check your username and password."
                );
              case 403:
                throw new Error("Access forbidden.");
              case 500:
                throw new Error("Server error. Please try again later.");
              default:
                throw new Error("An error occurred during login.");
            }
          } else if (error.request) {
            // No response was received from the server
            throw new Error(
              "No response from server. Please check your network connection."
            );
          } else {
            // Other errors
            throw new Error("Login failed due to an unexpected error.");
          }
        }

      },
    }),

my server action

  const validateData = UserLoginScema.safeParse(values);
  if (validateData.success) {
    const phone = validateData.data.userName;
    const password = validateData.data.password;
    try {
      const res=await signIn("credentials", {
        phone,
        password,
        redirect: false,
      });
      // console.log(res);
      
      return { statuscode: 200, message: "test success" };
    } catch (error) {
      if (error instanceof AuthError) {
        
        switch (error.type) {
          case "CredentialsSignin":
            return {
              statuscode: 400,
              message: "phoneNumber or password is not corect",
            };
          default:
            return { statuscode: 400, message: "something went wrong" };
        }
      }
      throw error;
    }
  }
  return { statuscode: 400, message: "invalid credentails" };
};```

### Reproduction URL

https://github.com/h-rajabi/test-credentials.git

### Describe the issue

in my log terminal server i get this error message 
```CredentialsSignin: Read more at https://errors.authjs.dev#credentialssignin
    at Module.callback (webpack-internal:///(action-browser)/./node_modules/@auth/core/lib/actions/callback/index.js:230:23)

and then i try to wen user can`t login throw new Error("some error)
or ``` throw new AuthError("some error")```
but this not work and get CallBackError

ervery thing is work but this message show in server and this not good

How to reproduce

.

Expected behavior

all error must handle and don`t show anything in my server log

[h-rajabi]

i seen this error in any project with next-auth-beta in github

[LorysHamadache]

I managed to have my custom error message by extending the CredentialsSignin class like that:

in auth.ts

export class UserDoesNotExistError extends CredentialsSignin {
    code = "AuthError"
    message = "User does not exist - Please check credentials"
}

export class PasswordInccorectError extends CredentialsSignin {
    code = "AuthError"
    message = "Password is incorrect - Please check credentials"
}

..... 

async authorize(credentials, request) {
....
try {
    if (!user) { throw new UserDoesNotExistError(); }
    if (!isPasswordValid) { throw new PasswordInccorectError(); }
    else return {....}
}
catch (error) {
    if ((error instanceof UserDoesNotExistError) || (error instanceof PasswordInccorectError)) {
       throw error;
    } else {
        throw new Error("Unexpected error occurred during authorization");
    }
}

action.ts

export async function doCredentialLogin(formData: FormData) {
    try {
        const response = await signIn("credentials", {
            email: formData.get("email") as string,
            password: formData.get("password") as string,
            redirect: false,
        });
        return response;
    }
    catch (error: any) {
        let errorMessage = "An unknown error occurred - Please contact the administrator";
        if (error.message && error.message != "") errorMessage = error.message;
        const response = { error: errorMessage };
        return response;
    }
}

This is a test example. Of course, for any production work, you should not tell the user if its a username or password error.

[h-rajabi]

when you show user does not exist or password is not correct CredentialsSignin error show up in your log server ?
like this :

[auth][error] CredentialsSignin: Password is incorrect - Please check credentials
    at Object.authorize (webpack-internal:///(action-browser)/./src/config/auth.config.ts:89:23)
    at Module.callback (webpack-internal:///(action-browser)/./node_modules/@auth/core/lib/actions/callback/index.js:225:54)
    at AuthInternal (webpack-internal:///(action-browser)/./node_modules/@auth/core/lib/index.js:66:77)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async Auth (webpack-internal:///(action-browser)/./node_modules/@auth/core/index.js:126:34)
    at async signIn (webpack-internal:///(action-browser)/./node_modules/next-auth/lib/actions.js:51:17)
    at async $$ACTION_0 (webpack-internal:///(action-browser)/./src/actions/login-action.ts:27:25)
    at async /home/hossein/programing/insurance/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:39:418
    at async rw (/home/hossein/programing/insurance/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:38:7978)
    at async r6 (/home/hossein/programing/insurance/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:41:1256)```

[jelmd]

To get rid off the DoS attack vector (log junk) and the annoying Read more at https://errors.authjs.dev#credentialssignin clutter I use in v5-beta-20:

class CredentialsError extends CredentialsSignin {
	constructor(message: string) {
		super(message);
		this.message = message;
	}
	override stack = '' ;
}

and throw it like throw new CredentialsError(user + ' not verified'). At least in beta-20 the message gets logged, but the default UI shows always: Sign in failed. Check the details you provided are correct., which is ok for me: If support asks, I can grep the problem easily from the log and the UI does not reveal too much info about existing user or password.

[jhoanborges]

CredentialsSignin

This did not worked for me. I'm still facing this issue, i can not return a custom error.

[DavidArmendariz]

Same problem here. Stuck hours for this silly error.

[Ali-Raza764]

@jhoanborges which next-auth version are you using?

[Ali-Raza764]

the latest version clearly states how you can throw a custom error it must work for you.

import NextAuth, { CredentialsSignin } from "next-auth"
import Credentials from "next-auth/providers/credentials"
 
class InvalidLoginError extends CredentialsSignin {
  code = "Invalid identifier or password"
}
 
export const { handlers, auth } = NextAuth({
  providers: [
    Credentials({
      credentials: {
        username: { label: "Username" },
        password: { label: "Password", type: "password" },
      },
      async authorize(credentials) {
        throw new InvalidLoginError()
      },
    }),
  ],
})

Read the docs https://authjs.dev/getting-started/providers/credentials#custom-error-messages

[Redbeardjunior]

the latest version clearly states how you can throw a custom error it must work for you.

import NextAuth, { CredentialsSignin } from "next-auth"
import Credentials from "next-auth/providers/credentials"
 
class InvalidLoginError extends CredentialsSignin {
  code = "Invalid identifier or password"
}
 
export const { handlers, auth } = NextAuth({
  providers: [
    Credentials({
      credentials: {
        username: { label: "Username" },
        password: { label: "Password", type: "password" },
      },
      async authorize(credentials) {
        throw new InvalidLoginError()
      },
    }),
  ],
})

Read the docs https://authjs.dev/getting-started/providers/credentials#custom-error-messages

Did you try and verified, if itg work on your end ? I'm still getting some mest up errors with trying to implement something similar.

[Ali-Raza764]

Yeah certainly I can show you how I handled the custom error.
I simply call the signIn() from import { signIn } from "next-auth/react"; like this

const res = await signIn("credentials", {
        redirect: true,
        redirectTo: "/",
        email,
        password,
      });

This causes the page to refresh if the signIn is successfull or not then i recieve the error in the querry params like this

  const searchParams = useSearchParams();
  const error = searchParams.get("error");
  const message = searchParams.get("code");

And display the errror if any, else it will be redirected to the specific redirect url.
Full Code

"use client";
import { useState } from "react";
import { signIn } from "next-auth/react";
import { useSearchParams } from "next/navigation";

// Helper function to validate email format
const validateEmail = (email) => {
  const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
  return emailRegex.test(email);
};

const SignIn = () => {
  const searchParams = useSearchParams();
  const error = searchParams.get("error");
  const message = searchParams.get("code");

  const [loading, setLoading] = useState(false);

  const handleSubmit = async (e) => {
    e.preventDefault();
    setLoading(true);

    const email = e.target.email.value;
    const password = e.target.password.value;

    // Validate email
    if (!validateEmail(email)) {
      alert("Invalid email format");
      setLoading(false);
      return;
    }

    try {
      const res = await signIn("credentials", {
        redirect: true,
        redirectTo: "/",
        email,
        password,
      });
      console.log(res);
    } catch (error) {
      console.error("Sign-in failed", error);
    }

    setLoading(false);
  };

  return (
    <div className="min-h-screen flex items-center justify-center">
      <div className="w-full max-w-md p-6 bg-gray-800 rounded-lg shadow-lg">
        <h2 className="text-3xl font-semibold text-center text-white mb-8">
          Sign In
        </h2>
        <form onSubmit={handleSubmit} className="space-y-6">
          {/* Email Field */}
          <div>
            <label htmlFor="email" className="block text-sm text-gray-400">
              Email
            </label>
            <input
              type="email"
              id="email"
              name="email"
              required
              className="w-full px-4 py-2 mt-2 text-white bg-gray-700 border border-gray-600 rounded-md focus:ring-2 focus:ring-indigo-500 focus:outline-none transition duration-300"
              placeholder="Enter your email"
            />
          </div>

          {/* Password Field */}
          <div>
            <label htmlFor="password" className="block text-sm text-gray-400">
              Password
            </label>
            <input
              type="password"
              id="password"
              name="password"
              required
              className="w-full px-4 py-2 mt-2 text-white bg-gray-700 border border-gray-600 rounded-md focus:ring-2 focus:ring-indigo-500 focus:outline-none transition duration-300"
              placeholder="Enter your password"
            />
          </div>

          {/* General Errors */}
          {error && (
            <p className="text-red-500 text-sm text-center">{message}</p>
          )}

          {/* Submit Button */}
          <div>
            <button
              type="submit"
              disabled={loading}
              className={`w-full px-4 py-2 text-lg font-medium text-white bg-indigo-600 rounded-md transition duration-300 ${
                loading ? "opacity-50 cursor-not-allowed" : "hover:bg-indigo-500"
              }`}
            >
              {loading ? "Signing In..." : "Sign In"}
            </button>
          </div>
        </form>
      </div>
    </div>
  );
};

export default SignIn;

[Ali-Raza764]

For your assurance I have replicated the same procedure using a server action and no refresh error messages:

"use server";

import { signIn } from "@/auth";

export async function signInCredentials(payload) {
  try {
    const result = await signIn("credentials", {
      ...payload,
      redirect: false,
    });

    return { success: true };
  } catch (error) {
    // Check if the error is an instance of Error and has a message
    if (error instanceof Error) {
      return { success: false, message: error.message };
    }

    // Fallback error message
    return { success: false, message: "An unexpected error occurred" };
  }
}

For the Login component:

"use client";
import { useState } from "react";
import { signInCredentials } from "@/actions/signIn";

export default function LoginPage() {
  const [error, setError] = useState("");

  const handleSubmit = async (e) => {
    e.preventDefault();
    setError("");
    const payload = {
      email: e.target.email.value,
      password: e.target.password.value,
    };
    const res = await signInCredentials(payload);
    console.log(res);
    if (!res.success) {
      setError(res.message);
    }
  };

  return (
    <div className="min-h-screen flex flex-col justify-center py-12 sm:px-6 lg:px-8">
      <div className="sm:mx-auto sm:w-full sm:max-w-md">
        <h2 className="mt-6 text-center text-3xl font-extrabold">
          Login to your account
        </h2>
      </div>

      <div className="mt-8 sm:mx-auto sm:w-full sm:max-w-md">
        <div className="bg-gray-900 py-8 px-4 shadow sm:rounded-lg sm:px-10">
          {error && (
            <div
              className="mb-4 bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded relative"
              role="alert"
            >
              <span className="block sm:inline">{error}</span>
            </div>
          )}
          <form className="space-y-6" onSubmit={handleSubmit}>
            <div>
              <label
                htmlFor="email"
                className="block text-sm font-medium text-gray-400"
              >
                Email address
              </label>
              <div className="mt-1">
                <input
                  id="email"
                  name="email"
                  type="email"
                  autoComplete="email"
                  required
                  className="appearance-none block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
                />
              </div>
            </div>

            <div>
              <label
                htmlFor="password"
                className="block text-sm font-medium text-gray-400"
              >
                Password
              </label>
              <div className="mt-1">
                <input
                  id="password"
                  name="password"
                  type="password"
                  autoComplete="current-password"
                  required
                  className="appearance-none block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
                />
              </div>
            </div>

            <div>
              <button
                type="submit"
                className="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
              >
                Sign in
              </button>
            </div>
          </form>
        </div>
      </div>
    </div>
  );
}

[Ali-Raza764]

when you show user does not exist or password is not correct CredentialsSignin error show up in your log server ? like this :

[auth][error] CredentialsSignin: Password is incorrect - Please check credentials
    at Object.authorize (webpack-internal:///(action-browser)/./src/config/auth.config.ts:89:23)
    at Module.callback (webpack-internal:///(action-browser)/./node_modules/@auth/core/lib/actions/callback/index.js:225:54)
    at AuthInternal (webpack-internal:///(action-browser)/./node_modules/@auth/core/lib/index.js:66:77)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async Auth (webpack-internal:///(action-browser)/./node_modules/@auth/core/index.js:126:34)
    at async signIn (webpack-internal:///(action-browser)/./node_modules/next-auth/lib/actions.js:51:17)
    at async $$ACTION_0 (webpack-internal:///(action-browser)/./src/actions/login-action.ts:27:25)
    at async /home/hossein/programing/insurance/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:39:418
    at async rw (/home/hossein/programing/insurance/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:38:7978)
    at async r6 (/home/hossein/programing/insurance/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:41:1256)```

This message it self is saying that there is an error Password is incorrect - Please check credentials
But you have to extract it in the catch block to make it usable

 if (error instanceof Error) {
      return { success: false, message: error.message };
    }

[Redbeardjunior]

when you show user does not exist or password is not correct CredentialsSignin error show up in your log server ? like this :

[auth][error] CredentialsSignin: Password is incorrect - Please check credentials
    at Object.authorize (webpack-internal:///(action-browser)/./src/config/auth.config.ts:89:23)
    at Module.callback (webpack-internal:///(action-browser)/./node_modules/@auth/core/lib/actions/callback/index.js:225:54)
    at AuthInternal (webpack-internal:///(action-browser)/./node_modules/@auth/core/lib/index.js:66:77)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async Auth (webpack-internal:///(action-browser)/./node_modules/@auth/core/index.js:126:34)
    at async signIn (webpack-internal:///(action-browser)/./node_modules/next-auth/lib/actions.js:51:17)
    at async $$ACTION_0 (webpack-internal:///(action-browser)/./src/actions/login-action.ts:27:25)
    at async /home/hossein/programing/insurance/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:39:418
    at async rw (/home/hossein/programing/insurance/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:38:7978)
    at async r6 (/home/hossein/programing/insurance/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:41:1256)```

This message it self is saying that there is an error Password is incorrect - Please check credentials But you have to extract it in the catch block to make it usable

 if (error instanceof Error) {
      return { success: false, message: error.message };
    }

understandable, but how can we get rid off it in production ... it overflows the console.

[Ali-Raza764]

Literally, I have no idea of that :)

[LZL0]

The DX is now horrible using the T3 app, it will just return the following response every time to frontend:
{error: 'CredentialsSignin', code: 'AuthError', status: 200, ok: true, url: null}

[LZL0]

The only solution now is to set the code manually to the intended error message and then use response.code on the frontend. Why was this altered this much? Why is it silently overwriting error messages?