Return error information from API when using Next-auth

Question

Is it possible to allow next-auth to return errors from an API and pass them through from the client-side?

As an example, the API is returning specifically if the user's email or password is incorrect. On our mobile app, this is working great. Though on the website, we're using Next-auth. Using the credentials example from the documentation, it would be great to change the return value to an object.

import CredentialsProvider from "next-auth/providers/credentials"
providers: [
  CredentialsProvider({
    name: "Credentials",
 
    credentials: {
      username: { label: "Username", type: "text", placeholder: "jsmith" },
      password: {  label: "Password", type: "password" }
    },
    async authorize(credentials, req) {
      const user = { id: 1, name: "J Smith", email: "[email protected]" }

      if (user) {
        // Any object returned will be saved in `user` property of the JWT
        return user
      } else {
        // Return an object that will pass error information through to the client-side.
        return { errors: user.errors, status: false }
      }
    }
  })
]

Please do let me know if there is another post that relates to this one as I'm unable to find it online.

Obed Amoasi · Accepted Answer · 2022-02-01 12:50:36Z

20

Yes this should allow you to do that, though in the credential, when passing the values to the next auth, add a redirect:false

You can find the documentation here

Your sign in method will therefore look like this.

signIn('credentials', { redirect: false, username:'username', password: 'password' })

Your code can look like this

import CredentialsProvider from "next-auth/providers/credentials"
providers: [
  CredentialsProvider({
    name: "Credentials",
 
    credentials: {
      username: { label: "Username", type: "text", placeholder: "jsmith" },
      password: {  label: "Password", type: "password" }
    },
    async authorize(credentials, req) {
      const user = { id: 1, name: "J Smith", email: "[email protected]" }

      if (user) {
        // Any object returned will be saved in `user` property of the JWT
        return user
      } else {
        // Return an object that will pass error information through to the client-side.
        throw new Error( JSON.stringify({ errors: user.errors, status: false }))
      }
    }
  })

edited Feb 1, 2022 at 12:50

answered Feb 1, 2022 at 5:34

Obed Amoasi

2,0491 gold badge21 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Jamie Hunt Over a year ago

This seems to have worked a treat. Thanks!

Shubham Jangle Over a year ago

is there a better way?

James Serengia Over a year ago

Works like a charm. Thank you @obed-amoasi

BerenBoden · Accepted Answer · 2023-06-24 21:51:09Z

I managed to return the correct error information by using a promise with a catch statement in the authorize function:

export const authOptions: NextAuthOptions = {
  session: {
    strategy: "jwt",
  },
  secret: process.env.NEXTAUTH_SECRET,
  providers: [
    CredentialsProvider({
      name: "credentials",
      credentials: {
        email: {
          label: "Email",
          type: "email",
          placeholder: "[email protected]",
        },
        password: { label: "Password", type: "password" },
      },
      async authorize(credentials: any) {
        // console.log(credentials);
        const { user, jwt } = await axios
          .post(`http://localhost:1337/api/auth/local`, {
            identifier: credentials.email,
            password: credentials.password,
          })
          .then(({ data }) => {
            return data;
          })
          .catch((error) => {
            throw new Error(JSON.stringify(error.response.data));
          });

        return { jwt, ...user };
      },
    }),
  ],
};
const handler = NextAuth(authOptions);
export { handler as GET, handler as POST };

The next-auth error is of type string, so you need to stringify it as JSON, then turn it back into an object from the client side.

Oren Sayag · Accepted Answer · 2025-02-03 03:50:24Z

I use v5.0.0-beta.25 and the other answers did not work for me, managed to pass custom messages like this:

Define the following error class

import NextAuth, { AuthError } from 'next-auth';

class InvalidCredentials extends AuthError {
  public readonly kind = 'signIn';

  constructor(message: string) {
    super(message);
    this.type = 'CredentialsSignin';
  }
}

In the authorize callback, throw the error and add '|||' (some string indicator) to the message

if (user) {
    throw new InvalidCredentials('User exists|||');
}

The string indicator is used because the auth js package adds a 'read more at url xyz...' string to the message when we catch it.

In the method that calls the signIn method, catch the error and you can use the custom message by splitting the error message by the string indicator.

try {
   await signIn(provider, {
      ...formData,
      redirect: false,
      type: LoginType.SIGN_UP,
   });
   success = true;
} catch (e: any) {
    return {
      error: e.message.split('|||')[0],
   };
}

Ãhmâd Ñäféës · Accepted Answer · 2025-02-15 23:03:39Z

0

(auth.ts) you can simply use CredentialsSignin() in catch section

 authorize: async ({ email, password }) => 
{
                try {

                    const user = await prisma.user.findUnique({ where: { email: String(email) } })

                    if (!user) throw new Error('User does not exists')
                    const isValidPassword = await compare(String(password), user.password)

                    if (!isValidPassword) throw new Error('Password is wrong')
                    return { id: String(user.id), name: user.name, email: user.email }

                } catch (error: any) {
                    throw new CredentialsSignin({ cause: error.message })
                }




(serverAction.ts) in this you have to provide error type as CredentialsSignin

export const handleSignIn = async (formData: { email: string, password: string }) => 
{
    try {
        await signIn('credentials', formData)
    } catch (error) {
        const err = error as CredentialsSignin
        throw new Error(String(err.cause))
    }
}


// now you can use try catch in client for error handling 

//it is working for me

edited Feb 15 at 23:03

answered Feb 15 at 23:01

Ãhmâd Ñäféës

112 bronze badges

1 Comment

Community Feb 16 at 2:40

As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center.

Collectives™ on Stack Overflow

Return error information from API when using Next-auth

4 Answers 4

3 Comments

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related