Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We鈥檒l occasionally send you account related emails.

Already on GitHub? Sign in to your account

error handling for incorrect username/password on login 馃 #96

Open
reubengt opened this issue Feb 20, 2020 · 0 comments
Open

error handling for incorrect username/password on login 馃 #96

reubengt opened this issue Feb 20, 2020 · 0 comments

Comments

@reubengt
Copy link

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant