How to display custom error message from Node/Express in React/Redux?

Question

I'm using passportjs for user authentication, and in the event that authentication is unsuccessful, I'd like to display a custom error message that is rendered on client side (in this case, React/Redux).

Route:

app.post(
    '/api/login',
    (req, res) => {
      passport.authenticate('local-login', (err, user, info) => {

        if (!user) return res.status(400).send({ msg: 'Please verify account first' });

      })(req, res);
    }
  );

Action creator:

export const loginUser = (values, history) => async dispatch => {
  try {
    const res = await axios.post('/api/login', values);
    dispatch(deleteMessage());
    dispatch({ type: FETCH_USER, payload: res.data });
    history.push('/');
    window.Materialize.toast(`Welcome back ${res.data.local.email}!`, 4000);
  }
  catch(err) {
    console.log('Error:', err);
  }
}

When I catch the error and console log it out however, I get a standard status 400 error message instead of: { msg: 'Please verify account first' }

Error: Request failed with status code 400
    at createError (createError.js:16)
    at settle (settle.js:18)
    at XMLHttpRequest.handleLoad (xhr.js:77)

Is there a better way to display custom error messages?

Gabriel Bleu · Accepted Answer · 2017-10-26 12:47:28Z

14

Modify from console.log(error) to console.log(error.response) in catch.

ref : https://github.com/axios/axios/issues/960#issuecomment-309287911

answered Oct 26, 2017 at 12:47

Gabriel Bleu

10.3k2 gold badges33 silver badges45 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

doctopus Over a year ago

Works a charm! Thanks

krmzv · Accepted Answer · 2017-10-26 12:38:57Z

0

You have to be in the scope of variable res, I would suggest the following approach (outside .catch()):

if(res.status === 400) {
  const error_msg = res.msg
  dispatch(loginError(error_msg))
}

answered Oct 26, 2017 at 12:38

krmzv

3874 silver badges15 bronze badges

Comments

Paul Thomas Clarke · Accepted Answer · 2017-10-26 12:39:53Z

0

console.log('Error:', err);

You could change this too whatever error message you want. Or do you want the response err from the server to be { msg: 'Please verify account first' }

answered Oct 26, 2017 at 12:39

Paul Thomas Clarke

274 bronze badges

1 Comment

doctopus Over a year ago

Yes I want the response err from the server to be { msg: 'Please verify account first' }

Collectives™ on Stack Overflow

How to display custom error message from Node/Express in React/Redux?

3 Answers 3

1 Comment

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related