RETORNAR ERRO DA API NO FRONT-END

Oi Luiza, tudo bem?

Desculpa a demora em retornar.

É muito importante que sua aplicação possa fornecer feedback claro e preciso para seus usuários. Retornar erros da API para o front-end é uma das formas de fazer isso. Para retornar um erro da API para a tela de login no front-end, você pode fazer o seguinte:

1. Na API, ao ocorrer um erro, retorne um objeto JSON com o status HTTP 400 e a mensagem de erro. Por exemplo:

return res.status(400).json({ mensagem: 'Senha incorreta' });

1. No front-end, você pode usar a função fetch do JavaScript para fazer a chamada à API. Quando a resposta da API retornar, você pode verificar se o status HTTP é 400 e, se for, exibir a mensagem de erro na tela de login. Por exemplo:

fetch('/login', {
  method: 'POST',
  body: JSON.stringify({ email, senha }),
  headers: { 'Content-Type': 'application/json' },
})
  .then((res) => {
    if (res.status === 200) {
      // login bem-sucedido, redirecionar para a página principal
      window.location.href = '/';
    } else if (res.status === 400) {
      // erro de validação, exibir mensagem de erro na tela
      return res.json().then((data) => {
        const mensagem = data.mensagem;
        // exibir mensagem de erro na tela de login
        const mensagemErro = document.getElementById('mensagem-erro');
        mensagemErro.textContent = mensagem;
      });
    }
  })
  .catch((erro) => console.error(erro));

Neste exemplo, a API /login retorna um objeto JSON com a chave mensagem contendo a mensagem de erro quando a validação da senha falha. No front-end, verificamos se a resposta da API tem o status HTTP 400 e, em caso afirmativo, exibimos a mensagem de erro na tela de login.

É importante lembrar que a segurança da sua aplicação não pode depender apenas da validação de entrada no front-end. É preciso também realizar uma validação de entrada no back-end para evitar possíveis vulnerabilidades.

Espero que tenha te ajudado.

Um abraço e bons estudos.