Can't sent an error to the login page

[NotNotRama]

Hi everyone. My issue might seem a bit basic/trivial, but I can't seem to find a solution and since I'm not well versed in backend related stuff I'm asking here.

Inside the api folder, I'm trying to send a response with an error inside the catch after I put an invalid username/password, and the error seems to be ok, but when I try to send it and use said error in the handler of the login page I don't get it (although I do get a response).

Api/Login.js

export default async function login(req, res) {
  if (req.method === 'POST') {
    try {
      const user = await db.query('SELECT * FROM users WHERE email = $1', [req.body.email]);
      if (user.rows.length === 0) {
        throw { message: 'User does not exist' };
      }

      const userPW = user.rows[0].password;
      const userID = user.rows[0].id;

      await db.query('UPDATE tokens SET status = False WHERE fk_users_id = $1', [userID]);

      compare(req.body.password, userPW, async (err, result) => {
        if (!err && !result) {
          throw new Error('Invalid password or email');
        }
        if (!err && result) {
          const claims = { sub: user.rows[0], myPersonName: user.rows[0].email };
          const jwt = sign(claims, process.env.SECRET, {
            expiresIn: '1h',
          });

          const query = {
            text: 'INSERT INTO tokens(token, fk_users_id, status) VALUES($1, $2, $3)',
            values: [jwt, userID, true],
          };

          await db.query(query);

          res.setHeader(
            'Set-Cookie',
            cookie.serialize('autho', jwt, {
              httpOnly: true,
              secure: process.env.NODE_ENV !== 'development',
              sameSite: 'strict',
              maxAge: 3600,
              path: '/',
            })
          );

          res.json({ message: 'Welcome back!' });
        }
      });
    } catch (err) {
      console.log('catch error', err); // This shows the error ('User does not exist') in the console
      res.status(401).json(err);
    }
  }
}

/login.js

  const emailRef = useRef(null);
  const passRef = useRef(null);
  const [message, setMessage] = useState('');

  async function handleLogin() {
    try {
      const res = await fetchJson('http://localhost:3000/api/login', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({
          email: emailRef.current.value,
          password: passRef.current.value,
        }),
      });

      Router.push('/login');

    } catch (error) {
      console.log('login page', error);
      //setMessage(error.message);
    }
  }

  return (
    <div>
      {message}
      <input type="text" placeholder="email" ref={emailRef} />
      <input type="password" placeholder="password" ref={passRef} />
      <button onClick={handleLogin}>Login</button>
    </div>
  );
}

fetchJson.js (this one is from the with-iron-session example)

  try {
    const response = await fetch(...args);

    // if the server replies, there's always some data in json
    // if there's a network error, it will throw at the previous line
    const data = await response.json();

    if (response.ok) {
      return data;
    }
     // This shows the 401 unauthorized response without the error I sent in the api/login page
    console.log('fetcher', response);
    const error = new Error(response.statusText);
    error.response = response;
    error.data = data;
    throw error;
  } catch (error) {
    if (!error.data) {
      error.data = { message: error.message };
    }
    throw error;
  }
}

[lfades]

The code looks correct, you should be able to do something like this:

setMessage(error.data.message);

You're returning the error info as json, then it's being set to error.data here:

const data = await response.json();

if (response.ok) {
  return data;
}

// This shows the 401 unauthorized response without the error I sent in the api/login page
console.log('fetcher', response);
const error = new Error(response.statusText);
error.response = response;
error.data = data;

If your custom error was thrown, then the error data is in error.data.

error.message would be response.statusText, which in the case of your custom error won't have anything important.

[NotNotRama]

error.data worked!

Since it wasn't an object and didn't show any property in the console I had no idea that you had to use .data to access it. And I always used third party APIs so I'm not used to creating responses and therefore creating custom errors.

Anyway, thank you!