Prevent browser from navigating to api/auth/error in case of CLIENT_FETCH_ERROR

Question

I have a Next.js app that uses next-pwa and next-auth. I am trying to simulate a situation where a user is trying to log in when the server is down. I want to catch client-side error returning from next-auth's signIn function and display it for the user on the same login page.

The function that handles the sign in operation looks like this:

async function signInHandler({ username, password }: { username: string, password: string }) {

    if (!username || !password) return;

    try {
      const result = await signIn('credentials', {
        username,
        password,
        callbackUrl: props.redirect,
        redirect: false
      });

      if (!result?.ok) {
        setError('Username or password are incorrect');
        return;
      }

      push(redirectUrl || '/');
    } catch {
      setError('A Problem had occurred. Offline mode still available');
    }
 }

The problem is that whenever an error like that occurs, instead of catching it the browser is redirected to /api/auth/error. How can I prevent the browser from automatically navigating there?