signIn in NextJS server side action error handling in credentials provider

[rhufsky]

In NextAuth 5.0.0-beta.19 I try to implement a credentials provider that authenticates against an LDAP service and I try to call signIn() from a NextJS server action.

Authentication works fine, the only thing is I am not able to display a correct error message in case of a failure due to network errors.
NextAuth seems to throw a CallbackRouteError regardless if auth.ts authorize returns null or throws an error.

How can signIn() diferentiate between invalid credentials and a real error?

Excerpt of auth,ts:

providers: [
    Credentials({
      name: "Username and Password",
      credentials: {
        username: {
          label: "Benutzername",
          type: "text",
          placeholder: "Kurzzeichen",
        },
        password: { label: "Passwort", type: "password" },
      },
      authorize: async (credentials, req) => {

        try {
          // login via LDAP, returns user object or null in case of invalid credentials
          // ldapLogin throws an error only in case of a network error

          const loginResult = await ldapLogin(
            credentials.username as string,
            credentials.password as string
          );

          if (loginResult) {
            // returned object will be saved in `user` property of the JWT
            const user = {
              username: loginResult.username,
              email: loginResult.mail,
              displayName: loginResult.displayName,
              dn: loginResult.dn,
            };
            return user;
          } else {
            logger("ERROR no login result");
            // If you return null then an error will be displayed advising the user to check their details.
            // In realíty, a CallbackRouteError error will be thrown, which will be caught in the signInAction 
            return null;

            // You can also Reject this callback with an Error so the user
            // will be sent to the error page with the error message as a query parameter
          }
        } catch (error: any) {
          // This also throws a CallbackRouteError so signIn can not differentiate between invalid credentials and real errors
          logger(error.message);
          throw error;
        }
      },
    }),
  ],

signIn() in a NextJS server action

"use server"
....
export async function signInAction(formData: FormData): Promise<SignInStatus> {
  // server side signIn seems to always throw an exception:
  // - when login is successful, we get a redirecterror to force NextJS to redirect
  //   to the app
  // - when login fails, we get a CallbackRouteError which indicates that the credentials
  //   are invalid,
  // - when we have a system error, we get a normal error

  try {
    const result = await signIn("credentials", {
      username: formData.get("username") as string,
      password: formData.get("password") as string,
    });
  } catch (error: any) {

    if (isRedirectError(error)) {
      // funny thing, this redirects us to the app in case of success
      throw error;
    }
    if (error.type === "CallbackRouteError") {

      logger(`invalid credemntials: ${error.message}`);
      return {
        status: StatusCode.InvalidCredentials,
        message: "Benutzername oder Passwort falsch",
      };
    }
    logger(`System Error: ${error.message}`);

    return {
      status: StatusCode.SystemError,
      message:
        "Systemfehler, bitte später erneut versuchen oder Administrator kontaktieren",
    };
  }
  return { status: StatusCode.UnknownError, message: "Unbekannter Fehler" };
}

[jtyler-dev]

Im running into the same problem, building a small project to learn auth v5, using next 14.2.4, next-auth: ^5.0.0-beta.19", prisma adaptor
using server action to call auth.js signin function, but Iam getting back a CallbackRouteError that is being caught in my try/catch setup.

Ive been going at it for a few hours and I cannot see anything wrong with my setup:

Here is my authorize function:

 async authorize(credentials, req) {
        
          // Explicitly type the credentials object
          const { username, password } = credentials as {
            username: string;
            password: string;
          };

          // if we don't have a username or password, return null
          if (!username || !password) {
            console.log("Missing username or password");
            return null;
          }
          try {
          // check to see if the user exists
          console.log("Attempting to find user");

          const user = await prisma.user.findFirst({
            where: {
              userName: username,
            },
          });

          // check to see that the user has a password
          if (!user || !user.password) {
            console.log("User not found or password not set");

            return null;
          }

          console.log("Comparing passwords");

          // check if the password is valid
          const isPasswordValid = await bcrypt.compare(password, user.password);

          if (!isPasswordValid) {
            console.log("Invalid password");

            return null;
          }
          
          console.log("Authentication successful");

          return {
            id: user.id,
            userName: user.userName,
            displayName: user.displayName,
          };
        } catch (error) {
          console.error("Error during credentials authorization:", error);
          throw error;
        }
      }

this is my form action that Iam trying to use to test this:

     <form
    action={async (formData) => {
      "use server"
      try{
        const res = await signIn("credentials", {
          ...Object.fromEntries(formData),
          redirect: false, // Prevent automatic redirect
        })
        console.log("SignIn response:", res);

        if (res?.error === "CredentialsSignin") {
          console.error("Invalid credentials");
          return { error: "Invalid username or password" };
        } 

        if (res?.error) {
          // Handle sign-in error
          console.error("Sign-in error:", res.error)
          // You might want to return this error to the client
          return { error: res.error }
        } else if (res?.url) {
          // The sign-in was successful and returned a URL
          // This URL could be '/sign-up/complete-profile' or the default success URL
          redirect(res.url)
        } else {
          // Successful sign-in, redirect to dashboard
          redirect("/dashboard")
        }
      } catch (error) {
        console.log("error in sign in")
        if (error instanceof Error && error.message === 'NEXT_REDIRECT') {
          // This is a redirect, not an actual error
          throw error; // Re-throw to let Next.js handle the redirect
        }

        if (error instanceof AuthError) {
          // Handle specific NextAuth errors
          console.error("AuthError:", error)
        }

        // TODO: Handle other errors and inform user
        // console.error(error)
      }
    }}
  >

This is the current state of my console log right now:

Attempting to find user
User not found or password not set
Read more at https://errors.authjs.dev/#credentialssignin
[auth][debug]: callback route error details {
  "method": "POST",
  "query": {},
  "body": {
    "$ACTION_ID_47a5d1c4a98551dd0430cf4639b51ec484614dbb": "",
    "username": "wetw",
    "password": "werwr",
    "callbackUrl": "http://localhost:3000/sign-in"
  }
}
[auth][error] CallbackRouteError: Read more at https://errors.authjs.dev#callbackrouteerror
[auth][cause]: Error
    at Module.callback (webpack-internal:///(rsc)/./node_modules/@auth/core/lib/actions/callback/index.js:226:23)
    at async AuthInternal (webpack-internal:///(rsc)/./node_modules/@auth/core/lib/index.js:66:24)
    at async Auth (webpack-internal:///(rsc)/./node_modules/@auth/core/index.js:126:34)
    at async signIn (webpack-internal:///(rsc)/./node_modules/next-auth/lib/actions.js:51:17)
    at async $$ACTION_0 (webpack-internal:///(rsc)/./src/app/sign-in/page.tsx:74:21)

hopefully some of this info will lead to explanation of why this is happening

[fadlytanjung]

Hello, i've smiliar case. I think we don't need returning promise from signIn method in your server action. You can write signIn strategy in your server action like:

try
// some code
 await signIn('credentials', {
      redirectTo: '/verify-login', // It can be optional, if you handling in client form by response of server action, maybe you need handling it using lifecycle hook
      ...Object.fromEntries(formData),
    });
    
   // returning your success action here so client form can handle your callback response
    return {
      message: 'Success',
      errors: {},
    };

// some code

dont forget to catch error response form signIn method

 } catch (error) {
    if (error instanceof AuthError) {
      if (error.cause?.err instanceof Error) {
       // here to get catch error from next-auhh
        return {
          errors: {
            phoneNumber: error.cause.err.message,
          },
          message: BAD_REQUEST,
        };
      }
      switch (error.type) {
       // here also ctach error if credentials failed from callback
        case 'CredentialsSignin':
          return {
            errors: {
              phoneNumber: INVALID_CREDENTIALS,
            },
            message: INVALID_CREDENTIALS,
          };
        default:
        // nextjs http error
          return {
            errors: {
              phoneNumber: SOMETHING_WRONG,
            },
            message: SOMETHING_WRONG,
          };
      }
    }
    throw error;
  }

I dont to understand best implementation using next-auth signIn strategy, but here work in my side. The point of this we need to separate callback handling by signIn from next auth or callback response from server action. And alse for handling callback next-auth, you just handle it in auth.config that has integrated with nextjs middleware

export const authConfig = {
  pages: {
    signIn: '/login',
  },
  providers: [],
  session: {
    strategy: 'jwt',
    maxAge: 30 * 24 * 60 * 60, // 30 days
  },
  debug: process.env.NODE_ENV !== 'production',
  callbacks: {
    async authorized({ auth, request: { nextUrl } }) {
      const isLoggedIn = !!auth?.accessToken;
      const isOnLogin = nextUrl.pathname.startsWith('/login');
     if (
        isLoggedIn && isOnLogin
      ) {
        return Response.redirect(new URL('/dashboard', nextUrl));
      } 
      return true;
    },
    async jwt({ token, user }) {
      if (token && user) {
        token.accessToken = user.accessToken;
        token.refreshToken = user.refreshToken;
      }
     // handling your jwt payload

      return token
    },
    async session({ session, token }) {
     // store your payload into session nextauth
      if (token?.accessToken) {
        session.accessToken = token.accessToken as string;
        session.refreshToken = token.refreshToken as string;
      }
      return session;
    },
  },
} satisfies NextAuthConfig;

That all from my side. Cheers 🥂