Credentials Provider: Throw custom error message or status code from authorize() instead of only "CallbackRouteError"

[shgrth]

Goals

1. Throw custom error message or status code from authorize() instead of "CallbackRouteError" and status 200.

2. Sign In process (when credentials are correct) sometimes errors with "User not confirmed" in my backend and I would like to return a custom error message OR at least a status code to the front-end so I can render a UI to enter confirmation code. Sign In is called from next-auth/react with redirect:false.

Background

Our company's online platform has been using Next-Auth v4 with Credentials Provider and a custom authorize() function that initiates an AWS Cognito userauth and returns the tokens for jwt callback to handle and organize the data.

Our Sign In page will automatically render a UI for the user to enter confirmation code once they attempt to sign in and Cognito returns an error stating "User not confirmed.". We catch this error within authorize() and throw it to the front-end so our app can render the respective UI.

However, now with v5, the ONLY error message I get to the front end says "CallbackRouteError" with a status code of 200 OK. There is no way even to throw a custom error status code to the front end.

Proposal

This is specific to Next-Auth/Authjs v5.

In Credentials Provider, please allow us to throw a custom error message or a status code in the return value from the signIn function when redirect is set to false.

We require custom errors like "User not confirmed", "Invalid credentials", or "User suspended.".

Or let us throw integer error codes in the status and render a UI on the front-end based on these codes.

[luisjuniorj]

Use the 5.0.0-beta.3 version is working there.

[AhmedBaset]

I'm using 5.0.0-beta.3 It doesn't send the custom error to the client

[Pe6ko13]

up

[DevYemi]

Please is there any new update on this ??.

Throwing an error like this used to work in v4:

 CredentialsProvider({
            async authorize(credentials: any) {
                let urlencoded = new URLSearchParams();

                urlencoded.append('email', credentials.email);
                urlencoded.append('password', credentials.password);
                const res = await AuthApiInstance.signIn<UserSchemaType>(urlencoded);

                console.log(res);

                if (res.isError && !res.resData) {
                    throw new Error(JSON.stringify({ errors: res.error, status: res.statusCode }))
                };

                if (res.resData?.data.token) {
                    encryptCookieDataAction(res.resData?.data.token, EncryptionCookiesKeys.AdminToken)
                }

                return res.resData?.data as any
            },
            credentials: {},
        })

Now I am only getting "CallbackRouteError", any help will be appreciated

[localhost-chetan]

Same here, I'm also frustrated with this error
And now i'm just returning either the User object or null and can can only display a single error message in form which is "Invalid credentials"

async authorize(credentials): Promise<User | null> {
const validatedData = formSchema.safeParse(credentials)

        if (validatedData.success) {
            const { email, password } = validatedData.data

            const user = await getUserByEmail(email)

            if (!!user) {
                const isPasswordMatch = await compare(password, user.hashedPassword)
                if (isPasswordMatch) {
                    // It indicates all credentials are valid
                    return user;
                } else {
                    // throw new Error(`Incorrect password`)
                    return null;
                }
            } else {
                return null;
                // throw new Error(`User not found`)
            }
        } else {
            return null
            // throw new Error(`Invalid credentials`)
        }
    }

[Pe6ko13]

Sorry, no updates yet, I'm getting only "CallbackRouteError" as well Greetings Petar

…

On Wed, Jan 24, 2024 at 3:25 PM Adeyanju Adeyemi ***@***.***> wrote: Please is there any new update on this ??. Throwing an error like this used to work in v4: CredentialsProvider({ async authorize(credentials: any) { let urlencoded = new URLSearchParams(); urlencoded.append('email', credentials.email); urlencoded.append('password', credentials.password); const res = await AuthApiInstance.signIn<UserSchemaType>(urlencoded); console.log(res); if (res.isError && !res.resData) { throw new Error(JSON.stringify({ errors: res.error, status: res.statusCode })) }; if (res.resData?.data.token) { encryptCookieDataAction(res.resData?.data.token, EncryptionCookiesKeys.AdminToken) } return res.resData?.data as any }, credentials: {}, }) Now I am only getting "CallbackRouteError", any help will be appreciated — Reply to this email directly, view it on GitHub <#8999 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ASNW6Z3MRQQDUMSRMDUYIKDYQEDWJAVCNFSM6AAAAAA6VNAMZSVHI2DSMVQWIX3LMV43SRDJONRXK43TNFXW4Q3PNVWWK3TUHM4DEMZSGYZDG> . You are receiving this because you commented.Message ID: ***@***.***>

[DavidCodina]

Same issue here with 5.0.0-beta.5.

One possible workaround would be to use a server action to handle error logic in conjunction with the server-side signIn(). However, there seems to be an issue with the server-side signIn() not syncing with the client-side SessionProvider/useSession() such that user logs out status will be 'unauthenticated'. New user signs in, status still is authenticated (until page refresh).

[Greek]

I pushed out a PR for this. See #9801

[DavidCodina]

See issue 9504. It's kind of related. Anyways, I realized that there's a way to send back custom error messaging. Again, it requires using both a login() server action and the SERVER SIDE signIn(). However, this requires some extra steps in order to keep the client side SessionProvider in sync. First create a login() server action:

import bcrypt from 'bcryptjs'
import prisma from 'db'
import { signIn } from 'auth'

type LoginResponse = {
  data: any
  message: string
  success: boolean
}

/* ========================================================================

======================================================================== */

export const login = async ({ email, password }: { email: string; password: string; }): Promise<LoginResponse> => {
  if (!email || !password) {
    return {
      data: null,
      message: 'Email and/or password is missing.',
      success: false
    }
  }

  try {
    const existingUser = await prisma.user.findUnique({
      where: { email: email as string }
    })

    if (!existingUser || !existingUser.email || !existingUser.password) {
      return {
        data: null,
        message: 'Invalid credentials.',
        success: false
      }
    }

    const isMatch = await bcrypt.compare(
      password as string,
      existingUser.password as string
    )

    if (!isMatch) {
      return {
        data: null,
        message: 'Invalid credentials.',
        success: false
      }
    }

    await signIn('credentials', {
      email,
      password,
      redirect: false  // Prevent Next.js from throwing Redirect error.
    })

    return {
      data: null,
      message: 'User credentials are valid.',
      success: true
    }
  } catch (err: unknown) {
    if (err instanceof Error) {
      console.log({ name: err.name, message: err.message })
    }
    return {
      data: null,
      message: 'Server error.',
      success: false
    }
  }
}

Then create a custom SessionProvider that is wrapped in a context. This will allow you to create, use and expose fetchSession().

'use client '

import {
  ReactNode,
  useEffect,
  createContext,
  useContext,
  useState,
  useCallback
} from 'react'

import { Session } from 'next-auth'
import {
  SessionProvider as NextSessionProvider,
  getSession
} from 'next-auth/react'

type SessionProviderProps = {
  children: ReactNode
}

export type MaybeSession = Session | null

export type SessionContextValue = {
  fetchSession: () => void
}

const SessionContext = createContext({} as SessionContextValue)

/* ========================================================================

======================================================================== */

export const SessionProvider = ({ children }: SessionProviderProps) => {
  const [session, setSession] = useState<MaybeSession>(null)

  const fetchSession = useCallback(async () => {
    const session = await getSession()
    setSession(session)
  }, [])

  useEffect(() => {
    fetchSession()
  }, [fetchSession])

  return (
    <SessionContext.Provider
      value={{
        fetchSession
      }}
    >
      <NextSessionProvider session={session}>{children}</NextSessionProvider>
    </SessionContext.Provider>
  )
}

export function useSessionContext() {
  const value = useContext(SessionContext)
  return value
}

Then in your LoginForm's submit function do something like this:

const handleCredentialsLogin = async (e: any) => {
    e.preventDefault()
    setLoading(true)

    login({ email, password })
      .then((res) => {
        if (res.success === false) {
          toast.error('Login unsuccessful.', { autoClose: false })
          return res
        }

        fetchSession()
        toast.success('Login success.')
        router.replace(DEFAULT_LOGIN_REDIRECT) // i.e., '/settings', '/user', etc.
        return res
      })
      .catch((_err) => {
        toast.error('Unable to log in.', { autoClose: false })
      })
      .finally(() => {
        setLoading(false)
        setEmail('')
        setPassword('')
      })
  }
  

The important part in both the custom SessionProvider and the submit function is the fetchSession() function. This is what will keep the session in sync between client and server.

Going back to the original point, the login() server action will allow you to make checks against the provided credentials and respond back with meaningful error messaging (since Credentials authorize() seems to no longer support that). Note also that it's still important to do all of the same checks in the authorize() function since a user could just hit the "http://localhost:3000/api/auth/callback/credentials" directly.

Admittedly, the current state of v5 beta is painfully unintuitive. Hope this helps.

[Greek]

I ended up just creating my own error class and assigning the type property to the message thru the constructor. Works just as expected ;)

/* eslint-disable @typescript-eslint/no-explicit-any */
import { AuthError } from "next-auth";

export class CustomAuthError extends AuthError {
  static type: string;

  constructor(message?: any) {
    super();

    this.type = message;
  }
}

The probably very right and best way to do this right is to create a class with your custom type and handle it on the client:

import { AuthError } from "next-auth";

export class InvalidEmailPasswordError extends AuthError {
  static type = "InvalidEmailPassword"
}

[riyoneri]

Hello,
Could you provide the way you used this CustomAuthError class cause it is giving me headache, For me I want to carry object of errors in my custom class, so that i can display validation errors on each inputs accordingly

how did you use it, or how can i do my custom error class so that i carry object not the string

[DavidCodina]

I have a file in src/CustomAuthErrors where I have these two:

import { CredentialsSignin } from 'next-auth'

export class InvalidLoginError extends CredentialsSignin {
  // This can be changed, but only to another ErrorType (e.g., 'AccessDenied')
  // static type = "CredentialsSignin"
  code = 'invalid_credentials'
}

export class UnverifiedEmailError extends CredentialsSignin {
  code = 'email_unverified'
}

Then in the authorize function I do this:

async authorize({ email, password }) {
  if (!email || !password) {
    throw new InvalidLoginError()
  }
  // ...
}

You could create a class that accepts an object as an argument, and then runs a switch statement to set the code. Input field validation should run on the client BEFORE executing authentication. That said, it's also a best practice to be opaque in regard to the actual reasons for authentication fails (i.e., 'invalid_credentials' ).

[balazsorban44]

Hi all! I want to support custom errors, please check out my proposal at #9099 (comment) and leave a comment!

Note. If you want to agree/disagree only, just 👍 or 👎. Only comment, if you have a meaningful suggestion to keep it effective! Thanks!

[sarowarhosen03]

agree with you

[Flavien-Pensato]

Working with "next-auth": "4.24.4" and it's already working with the Error class.

throw new Error("CUSTOM_MESSAGE")

[yogiprsetya]

How about response status?

[Flavien-Pensato]

How about response status?

It's a server action. Their is no status response

[kazemmdev]

I was facing a problem where signIn wasn't working as expected in login forms with version 5.0.0-beta.16. To achieve a custom user login experience, I implemented a server action function as an alternative approach. This function replaces the direct use of signIn within the login form.

"use server"

import { DEFAULT_LOGIN_REDIRECT } from "@/routes"
import { AuthError } from "next-auth"

import { signIn } from "@/lib/auth"

export const login = async (phone: string, code: string, callbackUrl?: string | null) => {
  try {
    await signIn("phone", { phone, code, redirectTo: callbackUrl || DEFAULT_LOGIN_REDIRECT })
  } catch (error) {
    console.error("phone login: ", error)
    if (error instanceof AuthError) {
      return { error: "error", message: error.message, status: 401 }
    }

    throw error
  }
}

[maksof-sarwar]

just return Promise.reject(new Error(" CUISTOMER MESSAGE "));

[dsmabulage]

If we throw a error inside authorize function how can we show it in the client side in the credential provider

[Greek]

Check out #9099. If that doesn’t work try out one of the workarounds I posted here.

[dsmabulage]

Check out #9099. If that doesn’t work, try out one of the workarounds I posted here.

I tried the second approach.

import { AuthError } from 'next-auth';

export class CustomAuthError extends AuthError  {
  static type: string;

  constructor(message?: any) {
    super();

    this.type = message;
  }
}

  async authorize({ email, password }) {
        throw new CustomAuthError('Invalid email or password');
      },

Even if I have a try-catch, It won't go to the catch.

  try {
      const res = await signIn('credentials', {
        redirect: false,
        username,
        password,
      });
      console.log({ res });
    } catch (error) {
      console.log(JSON.stringify(error));
    }

Response is the same

[SasquatchLV]

Currently dealing with the same situation, would appreciate if someone could show an example.

[sourav-dev-prakria]

am also dealing with the same situation here

[hieumau12]

Im also stuck in this situation. But in auth/sveltekit. I thought that it cause by auth/core lib

I found this feat merge from Mar 2
customizable authorize() error
but it did not work as expected now

[jumpjoong]

//Login
const result = await signIn("credentials", {
        // redirect false - 오류 발생시 화면 새로고침 하지 않고 그대로 정지
        redirect: false,
        email: email,
        password: pw,
      });
      if (result?.ok) {
        console.log(result);
      } else {
        console.log(result);
      }

//POST 

return new Response(
      JSON.stringify({
        error: "Check u r err.",
        ok: false,
      }),
      { status: 401 }
    );

//[...nextauth]

   async authorize(credentials, req) {
        const res = await fetch(`http://localhost:3000/api/login`, {
          method: "POST",
          headers: {
            "Content-Type": "application/json",
          },
          body: JSON.stringify({
            email: credentials?.email,
            password: credentials?.password,
          }),
        });
        const user = await res.json();
        if (res.ok) {
          return user;
        } else {
          throw new Error(user.error);
        }
        

Is this what you are looking for?

[dsmabulage]

{
        error: "Check u r err.",
        ok: false,
      }

Did you try this approach? I tried it myself and it did not work for me.

async authorize({ email, password }) {
        throw new Error(
          {
            error: 'Check u r err.',
            ok: false,
          },
          {
            cause: 'Invalid email or password',
          }
        );
      },

"next-auth": "^5.0.0-beta.19"

[kimlee3212]

"next-auth": "^4.24.7",

[kimlee3212]

[sarowarhosen03]

//Login
const result = await signIn("credentials", {
        // redirect false - 오류 발생시 화면 새로고침 하지 않고 그대로 정지
        redirect: false,
        email: email,
        password: pw,
      });
      if (result?.ok) {
        console.log(result);
      } else {
        console.log(result);
      }

//POST 

return new Response(
      JSON.stringify({
        error: "Check u r err.",
        ok: false,
      }),
      { status: 401 }
    );

//[...nextauth]

   async authorize(credentials, req) {
        const res = await fetch(`http://localhost:3000/api/login`, {
          method: "POST",
          headers: {
            "Content-Type": "application/json",
          },
          body: JSON.stringify({
            email: credentials?.email,
            password: credentials?.password,
          }),
        });
        const user = await res.json();
        if (res.ok) {
          return user;
        } else {
          throw new Error(user.error);
        }
        

Is this what you are looking for?

In this way Clint side useSession hook data not gonna update

[Andrew213]

still issue

[dileepainivossl]

still issue

[hacktolove]

I HATE NEXT AUTH

[miracim]

still issue

[MasterWolfx]

stille issue

[SValab]

I am experiencing the same thing as well.

For now my solution is as follows in my signIn callback:

Try{
 throw new Error('Invalid sign up session')
} catch (error) {
  if (error instanceof Error) {
    return `/auth/error?error=${error.message}`
  }
}

[bayunugrohoDev]

still issue 😠

[imrim12]

I have tried to throw the error a several places but the response always retuned successfully, and the response is always a url to the error page.

So i decided to return it as successful from the authorize method, then throw it from the signIn callback

This is how i retrieve the error properly

CredentialsProvider({
  authorize() {
    // ...
    return new AuthError(...)
  }
})

and in the callbacks

callbacks: {
  signIn({ user }) {
    if (user instanceof AuthError) {
      throw user
    }
  }
}

In the UI code

const response = await signIn('credentials', {
  redirect: false,
  ...credentials.value,
})

if (response.error)
  console.log(response.error) // show your error message here

please checkout this answer: https://stackoverflow.com/a/76761731/11762861

[aaliboyev]

From the documentation it's not clear enough. After a day of trying different workarounds I understood one thing.

DON'T use signIn function from "next-auth/react" in your NextJs project's client component. This works fine until you come to handle errors. Api methods somehow don't return the code from your custom error class.

I tried the following:

In @/auth.ts

import NextAuth, {CredentialsSignin} from "next-auth"
import Credentials from "next-auth/providers/credentials"
import {login} from "@/services/api/auth";
import {AuthConfig} from "@auth/core";

export class InvalidLoginError extends CredentialsSignin {
    code = 'invalid_credentials'
}

export const authConfig: AuthConfig = {
    providers: [
        Credentials({
            credentials: {
                username: {},
                password: {},
            },
            authorize: async (credentials): Promise<{name: string, accessToken: string}> => {
                const username = credentials.username as string
                const password = credentials.password as string
                try {
                    let loginResponse = await login(username, password)
                    return {
                        name: password,
                        accessToken: loginResponse.data.access_token
                    }
                } catch (e: any) {
                    throw new InvalidLoginError(e.json.detail)
                }
            },
        }),
    ],
}

export const { handlers, signIn, signOut, auth } = NextAuth(authConfig)

Remove signIn coming from "next-auth/react" and use the one exported from "@/auth.ts"
Before directly using it, create actions.ts file in your app router, and place the following code inside:

'use server'
import {InvalidLoginError, signIn} from "@/auth";

export async function authenticate(email: string, password: string) {
    try {
        const r = await signIn("credentials", {
            username: email,
            password: password,
            callbackUrl: "/",
            redirect: false,
        })
        return r
    } catch (error) {
        if (error.cause.err instanceof InvalidLoginError) {
            return {"error": "Incorrect username or password"}
        } else {
            throw new Error("Failed to authenticate")
        }
    }
}

Now you are good to use this authenticate function in your client component, and it will work perfectly. One issue, as suggested by this discussion, is that it would be better to handle the error directly, skipping CallbackRouteError. This would change error.cause.err instanceof InvalidLoginError to error instanceof InvalidLoginError.

After searching a bit in the source code, I found that there is room for this. Here’s auth.js throwing the exact error if it's an instance of AuthError:

next-auth/packages/core/src/lib/actions/callback/index.ts

Line 524 in 2adc3a9

if (e instanceof AuthError) throw e

This means if you extend your custom error from AuthError, as @DavidCodina and @Greek suggest:

export class InvalidLoginError extends AuthError {
    code = 'invalid_credentials' // code is not member of AuthError but does not matter
}

You will be able to handle it without looking through CallbackRouteError. You can even do:

export class InvalidLoginError extends AuthError {
    code = 'invalid_credentials'
    constructor(message: string) {
        super(message)
        this.code = message
    }
}

and use it for all types of custom errors:

try {
    // ...
} catch (e: any) {
    throw new InvalidLoginError("invalid_credentials")
}

And in server actions, check it:

try {
    // ...
} catch (e: any) {
    if (e.code === "invalid_credentials") {
        return {error: "Incorrect username or password"}
    } else {
        throw Error("Failed to authenticate")
    }
}

[monarcode]

Worked for me

[jwenger100]

Yes this is a head scratcher that such a common use case is buried like this. I am extremely grateful @aaliboyev

[jhoanborges]

Worked for me too.

[nguyenvuhoang]

But why it redirect set false, set it not return data to login page, i need process something more before i submit to Home.

[nguyenvuhoang]

But why it redirect set false, set it not return data to login page, i need process something more before i submit to Home.

"return r" --> log message "http://localhost:3000/en/login"

[WahabCcript]

This works like a charm.

https://medium.com/@mangergeorgepraise/displaying-custom-error-messages-with-nextauth-js-cdcdda4e49bc

[sarowarhosen03]

This works like a charm.

https://medium.com/@mangergeorgepraise/displaying-custom-error-messages-with-nextauth-js-cdcdda4e49bc

i didn't find it working , could you share your git example repo ?

[knowsarzehmeh]

This works like a charm.
https://medium.com/@mangergeorgepraise/displaying-custom-error-messages-with-nextauth-js-cdcdda4e49bc

i didn't find it working , could you share your git example repo ?

It actually works but to further extend it you can create a LoginError class extending the CredentialsSignIn class like this
export class InvalidLoginError extends CredentialsSignin { constructor(msg) { super(msg); this.code = msg; } }

then in the callback signInMethod you can throw the error
if (!user?.email_verified_at) { throw new InvalidLoginError("EmailNotVerified"); }

    Finally in your react app you can handle the error however you want
    
    `        if (res?.code === "EmailNotVerified") {
      toast({
        variant: "destructive",
        title: "Error",
        description: res.code,
      });
      return router.replace(`/verify-email?email=${data?.email}`);
    }`

[Shivendra-Geek]

still issue

[mauricabrera]

For all of you fellas struggling with this, thank God I've managed to find a solution to use on the client side, after some hours! I've based my implementation on this Medium post that point me on the right direction, @aaliboyev response and one hint provided by the new AI on the Auth.js website (ChatGPT doesn't help at all!), the Medium post wasn't working for me using the "next-auth": "^5.0.0-beta.25" version, because it throws an "Access Denied" error with the custom message but inside a "cause" key that I wasn't able to access through the code. Instead what I've done is this, create a new InvalidLoginError class that extends CredentialsSignIn, use signIn callback to change the error message with the custom one we are sending on authorize, read it on the signIn function (I'm using credentials approach) and don't forget to add the 'error' field to the next-auth.d.ts file as follows:

auth.ts

import NextAuth, { CredentialsSignin } from "next-auth"
import Credentials from "next-auth/providers/credentials"
import axios from "axios"

class InvalidLoginError extends CredentialsSignin {
  code = "Invalid identifier or password"
  constructor(message: string) {
      super(message)
      this.code = message
  }
}

export const { handlers, signIn, signOut, auth } = NextAuth({
  providers: [
    Credentials({
      name: "Credentials",
      id: "credentials",
      credentials: {
        email: { label: "Email", type: "text" },
        password: { label: "Password", type: "password" },
      },
      async authorize(credentials) {
        try {
          const { data } = await axios.post('customendpoint', {
            email: credentials.email,
            password: credentials.password
          });

          if (!data.status){
            return { error: data.errors }
          } 
          
          return {
            id: data.data.id as string,
            email: data.data.email as string,
            full_name: data.data.full_name,
            role: data.data.role
          }
          
        } catch (error) {
          return { error: error }
        }
      }
    }),
  ],
  session: {
    strategy: "jwt",
    maxAge: (60*60)-7
  },
  callbacks: {
    authorized: async ({ auth }) => {
      return !!auth
    },
    async jwt({ token, user, account, trigger, session }) {
        if (account && user) {
            token.id = user.id
            token.full_name = user.full_name
            token.email = user.email
            token.role = user.role
        }
        return token
    },
    async session({ session, token }) {
        return {
            ...session,
            user: {
                ...session.user,
                id: token.id as string,
                full_name: token.full_name as string,
                email: token.email as string,
                role: token.role as string,
            }
        }
    },
    async signIn({ user }) {
      if (user?.error) {
        throw new InvalidLoginError(user.error)
      }
      return true;
    },
  },
  pages: {
    signIn: '/auth/login'
  },
  trustHost: true
})

Function on your page (I'm using formik and yup)

YourLoginScreen.tsx

const handleAuth = async () => {
      setLoading(true);
      setError("");
      
      const result = await signIn("credentials", {
        email: formik.values.email,
        password: formik.values.password,
        redirect: false,
      });
      
      if (!result?.ok || result?.error) {
        setError(result?.code ? result.code : "")
        setLoading(false)
      } else {
        router.push('/dashboard');
      }      
  };

  const formik = useFormik({
    initialValues: {
      email: "",
      password: "",
    },
    validationSchema: Yup.object().shape({
      email: Yup.string().email('*Enter a valid e-mail').required('*Required'),
      password: Yup.string().required('*Required'),
    }),
    onSubmit: (values) => {
      handleAuth();
    },
  });

next-auth.d.ts

import { DefaultSession, DefaultUser } from "next-auth";

export enum Role {
admin = "ADMIN",
cashier = "CASHIER",
}
declare module "next-auth" {
interface User {
  id?: number;
  full_name?: string;
  role?: Role | string;
  error? : string;
}

interface Session {
    user: User & DefaultSession["user"]
    expires: string
}
}

Hope it helps someone, have an amazing day!

[Youngpro95]

It works!! thanks