error handling for incorrect username/password on login 🤗

[rooberrydev]

currently, there is no feedback for the user if their password is wrong, your server is sending a 401 response but the user has no idea whats going on 😮

chatti/server/router.js

Lines 36 to 47 in 03d60df

	getUserId(email)
	.then(result => {
	const token = jwt.sign(result, secret)
	res
	.status(201)
	.cookie('user', token, { maxAge: 1000 * 60 * 60 * 24 })
	.send('cookie exists')
	})
	.catch(console.log)
	} else {
	res.status(401).end()
	}

passing a message to the frontend (for login errors) and rendering it might be an option.

  getStoredPassword(username)
    .then(responseFromDB => {
      if (responseFromDB.length === 0)
        res.status(400).send({
          error: "User not found. Are you sure that's the right username?"
        });
...
...

      comparePasswords(password, hashed_password)
        .then(match => {
          if (match) {
            const jwt = createJWT(username);
            res.cookie("jwt", jwt, {
              httpOnly: true
            });
            res.status(200).end();
          } else {
            res.status(400).send({
              error:
                "Sorry, your password was incorrect. Please double-check your password."
            });
          }
        })
        .catch(passwordMatchErr => console.log);
    })
    .catch(databaseErr => console.log);

https://github.com/reubengt/react-express-auth/blob/3ddaf20677d815801c914d27a4ef1b4276c1d092/server/router.js#L35-L62

and then in your frontend, having an error state, and updating it if there is an error on the backend

const [error,setError]=useState("")
if (response.status !== 200) {
      const responseJson = await response.json();
      setError(responseJson.error);
}

you can plug this state into a p tag or similar, so it will be empty until setError() is called.