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://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"
}

[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 "));