How to pass custom errors from outside auth service using Credentials provider?

[donomron]

I'm using Credentials provider to send signin credientials to our backend service.
If anything goes wrong, backend API is giving me error data. I couldn't find a way to pass this error data to client.

I have tested two ways:

1. Throwing error inside authorize
2. Throwing error inside signIn callback

But none worked.

Here is a simplified version of authOptions passed to NextAuth using first option:

export const authOptions = {
	providers: [
		Credentials({
			credentials: {
				phone: {},
				code: {},
			},
			authorize: async (credentials) => {
				
				try {
					const res = await fetch("/backend/api/auth", {
						method: "POST",
						headers: {
							"Content-Type": "application/json",
							Accept: "application/json",
						},
						body: JSON.stringify({
							phone: credentials.phone,
							code: credentials.code,
						}),
						cache: "no-store",
						next: { revalidate: 0 },
					});

					if (!res.ok) {
						const data = await res.json();
						throw new Error(data.message)
					}

					const data = await res.json()
					const { id, name, phone } = data;

					return {
						id,
						name,
						phone,
					};
				} catch (error: any) {
					throw new Error(error.message);
				}
			},
		}),
	],
};

Here is a simplified version of authOptions passed to NextAuth using second option:

export const authOptions = {
	providers: [
		Credentials({
			credentials: {
				phone: {},
				code: {},
			},
			authorize: async (credentials) => {
				
				try {
					const res = await fetch("/backend/api/auth", {
						method: "POST",
						headers: {
							"Content-Type": "application/json",
							Accept: "application/json",
						},
						body: JSON.stringify({
							phone: credentials.phone,
							code: credentials.code,
						}),
						cache: "no-store",
						next: { revalidate: 0 },
					});

					if (!res.ok) {
						const data = await res.json();
						return { error: data.message };
					}

					const data = await res.json()
					const { id, name, phone } = data;

					return {
						id,
						name,
						phone,
					};
				} catch (error: any) {
					return { error: error.message };
				}
			},
		}),
	],
	callbacks: {
		async signIn({ user }: { user: User }) {
			if (user?.error) {
				throw new Error(user.error);
			}

			return true;
		},
	},
};

Here is a simplified version of my onSubmit function:

async function onSubmit(values) {
	try {
		const res = await signIn("credentials", {
			phone: values.phone,
			code: values.code,
			redirect: false,
		});

		if (res?.error) {
			console.log("Authentication error:", res.error);
		} else {
			console.log("success");
		}
	} catch (error: any) {
		console.log("Unexpected sign-in error:", error.message);
	}
}

In both cases, res.error in onSubmit is giving me built-in errors of NextAuth but I need the error message returned from backend API.

I'm using version 5.0.0-beta.25. I found this post which seems to be working in v4.

So is there any way to handle this?
Any help would be appreciated. Thanks.