Authentication Uncaught in Promise

Question

I generated a new Feathers application, then generated authentication. I have not edited any code yet.

I used create-react-app to generate a React client and the only change I have made to that is I created a Login Component that attempts to authenticate a user:

import React, { Component } from 'react';
import client from './feathers';

export default class Login extends Component {
  constructor(props) {
    super(props);
    this.state = {};
  }

  componentDidMount() {
    client.authenticate({
      strategy: 'local',
      email: 'feathers@example.com',
      password: 'secret'
    }).then(token => {
      this.setState({ login: true });
    }).catch(error => {
      console.log(error);
      this.setState({ login: false });
    });
  }

  render() {
    if (this.state.login === undefined) {
      return <p>Logging in...</p>;
    } else if (this.state.login === true) {
      return <p>Logged in!</p>;
    } else {
      return <p>Not logged in.</p>;
    }
  }
}

The Login Component behaves as expected, but my browser claims I am not catching the follow exception in the Promise:

{type: "FeathersError", name: "NotAuthenticated", message: "Invalid login", code: 401, className: "not-authenticated", …}

The same exception is being logged in the catch block.

./feathers is essentially the same as the same file in daffl's feathers-chat-react.

What must I do to catch the exception my browser claims I am not?

Answer 1

When I actually created a user, the issue no longer occurred. I

• created a user
• logged in successfully
• attempted to log in as a user that does not exist.

When I performed the last step, the authenticate Promise was rejected as expected, but my browser no longer claimed I wasn't catching the exception.