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

[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:https://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:https://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:https://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

[ISNewton]

I HATE NEXT AUTH

[turkgenciyim]

still issue

[MasterWolfx]

stille issue