title: How to display custom error message from Node/Express in React/Redux?
body: <p>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).</p>
  
  <p><strong>Route:</strong></p>
  
  <pre><code>app.post(
      '/api/login',
      (req, res) =&gt; {
        passport.authenticate('local-login', (err, user, info) =&gt; {
  
          if (!user) return res.status(400).send({ msg: 'Please verify account first' });
  
        })(req, res);
      }
    );
  </code></pre>
  
  <p><strong>Action creator:</strong></p>
  
  <pre><code>export const loginUser = (values, history) =&gt; async dispatch =&gt; {
    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);
    }
  }
  </code></pre>
  
  <p>When I catch the error and console log it out however, I get a standard status 400 error message instead of: <code>{ msg: 'Please verify account first' }</code></p>
  
  <pre><code>Error: Request failed with status code 400
      at createError (createError.js:16)
      at settle (settle.js:18)
      at XMLHttpRequest.handleLoad (xhr.js:77)
  </code></pre>
  
  <p>Is there a better way to display custom error messages?</p>