How can I use the API endpoints of the next-auth to return JSON instead of HTML?

[Dragosp33]

I can't wrap my head around this. How can I use the next-auth API endpoints as an external service?
I have a next-auth set up, with 2FA, and multiple features, which works perfectly for the web app. I want to use this same authentication service for another app, so writing the code again makes no sense. So, I thought I would use the API endpoints for this.

I know how to make a successful login with those endpoints, this is my postman script to get a successful login and session:

POST localhost:3000/api/auth/callback/credentials

const baseUrl = 'http://localhost:3000'
pm.sendRequest(`${baseUrl}/api/auth/csrf`, function (err, response) {
    var jsonData = response.json();
    pm.request.body.update({
        mode: 'urlencoded',
        urlencoded: [
            { key: 'csrfToken', value: jsonData.csrfToken },
            { key: 'email', value: 'email },
            { key: 'password', value: '123456' },
            { key: 'callbackUrl', value: 'http://localhost:3000' },
            { key: 'redirect', value: false },
            { key: 'json', value: true },
        ]
    });
});

and then:
GET localhost:3000/api/auth/session

Now, how can I handle the errors in the API? For example, let's say a user did not use the correct credentials, or he doesn't have access to this service ( role-based ).

In these cases, I want to return a more concludent message, not just "Oh, it didnt work". I can do the same process and if the session is null return "OOOPS DIDNT WORK" but that isn't really helpful now, is it?

My main problem revolves around the fact that POST localhost:3000/api/auth/callback/credentials returns HTML and can't return JSON. It would be pretty helpful if I could just return an error if happened, and not the HTML error page.

This is my code:

auth.ts:

export const {
  handlers: { GET, POST },
  auth,
  signIn,
  signOut,
} = NextAuth({
  adapter: MongoDBAdapter(clientPromise),
  session: { strategy: 'jwt', maxAge: 60 * 60 * 24 * 7 },
  jwt: { maxAge: 60 * 60 * 24 },

  ...authconfig,

  providers: [
    ...authconfig.providers,
    Credentials({
      async authorize(credentials) {
        const validatedFields = LoginSchema.safeParse(credentials);

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

          const user = await getUserByEmail(email);

          if (!user || !password) {
            return null;
          }

          const passwordMatch = await bcrypt.compare(password, user.password);
          if (passwordMatch) {
            console.log('USER: ', user);
            return {
              ...user,
            };
          } else {
            // Return an object that will pass error information through to the client-side.

            // to delete here, and let the return null;
            throw new Error(JSON.stringify({ error: 'invalid credentials', status: false }));
          }
          return null;
        }
      },
    }),
  ],
   callbacks: {
    async signIn({ user, account, profile, email, credentials }) {
    if (!user.id) return false;
      const existingUser = await getUserById(user.id);
      if (!existingUser?.emailVerified) {
        return false;
      }

      // TODO: ADD 2FA CHECK;
      if (existingUser.isTwoFactorEnabled) {
        console.log('2FA is enabled...searching for 2FA confirmation...');
        console.log('Credentials are: ', credentials);

        const twoFactorConfirmation = await getTwoFactorConfirmationByUserId(
          existingUser._id.toString()
        );
        if (!twoFactorConfirmation) {
          //return false;
          // here is another use-case that i want to have, but can't get it to work.
          throw new Error(
            JSON.stringify({
              error: '2FA ACTIVE BUT NOT PRESENT',
              status: false,
            })
          );
        }
    
    }

login.ts:

 // normal flow:
  try {
    const res = await signIn('credentials', {
      email,
      password,
      //redirectTo: callbackUrl || DEFAULT_LOGIN_REDIRECT,
      redirect: false,
    });
    if (res.error) {
      console.log(res);
    }
  } catch (error) {
    //console.log({ error });
    if (error instanceof AuthError) {
      console.log(error.type, error.message);
      switch (error.type) {
        case 'CredentialsSignin':
          //return { error: 'Wrong email or password.' };
          return NextResponse.json(
            { message: 'Invalid login' },
            {
              status: 500,
            }
          );
        case 'OAuthAccountNotLinked':
          return { error: 'OAuthAccountNotLinked.' };

        default:
          //return { error: 'Oops! Something went wrong..' };
          return NextResponse.json(
            { message: 'Invalid login', error: 'Could not login' },

            {
              status: 500,
            }
          );
      }
    }
    throw error;
  }

  return { success: 'Confirmation email sent!' };

I have here only what matters, the code is more complex and you can see it all at: this repo if you want to get a bigger picture.

As you can see i'm switching for the error types, however, even if in the console I get this error (when credentials are invalid):

which works as intended, and goes to the default switch-case from the loginAction.ts the postman response is still the error page from /auth/error, in HTML, instead of the NextResponse I sent: