error dispatching auth event to LoginListener

[michaelcuneo]

Do you want to request a feature or report a bug?

Bug

What is the current behavior?

Since updateing to 1.0 I'm getting this error "error dispatching auth event to LoginListener"

when running the following in my login system.

  constructor(props) {
    super(props);
    Hub.listen('auth', this, 'LoginListener');
  }

  onHubCapsule(capsule) {
    const { channel, payload } = capsule;
    if (channel === 'auth') { this.onAuthEvent(payload); }
  }

  onAuthEvent(payload) {
    const { event, data } = payload;
    switch (event) {
      case 'signIn':
        Logger.error('userSignedIn');
        console.log(data);
        window.FB.getLoginStatus(((response) => {
          if (response.status === 'connected') {
            window.FB.api('/me', { fields: 'first_name, last_name, picture' }, () => {
              this.props.onChangeUserDetails(response);
            });
          }
        }));
        this.props.onLoggedIn();
        break;
      default:
        break;
    }
  }

If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem. Your bug will get fixed much faster if we can run your code and it doesn't have dependencies other than AWS Amplify.

What is the expected behavior?

To dispatch the auth event?

Which versions of Amplify, and which browser / OS are affected by this issue? Did this work in previous versions?

1.0.0
It used to work on the version before 1.0.0

You can turn on the debug mode to provide more info for us by setting window.LOG_LEVEL = 'DEBUG'; in your app.

[elorzafe]

Hi @michaelcuneo I just tried your code and the problem is you can use Logger directly you should instantiate before like this and then use the instantiated object instead of the class directly

const logger = new Logger('MyClass');
//...
  constructor(props) {
    super(props);
    Hub.listen('auth', this, 'LoginListener');
  }

  onHubCapsule(capsule) {
    const { channel, payload } = capsule;
    if (channel === 'auth') { this.onAuthEvent(payload); }
  }

  onAuthEvent(payload) {
    const { event, data } = payload;
    switch (event) {
      case 'signIn':
        logger.error('userSignedIn');
        console.log(data);
        window.FB.getLoginStatus(((response) => {
          if (response.status === 'connected') {
            window.FB.api('/me', { fields: 'first_name, last_name, picture' }, () => {
              this.props.onChangeUserDetails(response);
            });
          }
        }));
        this.props.onLoggedIn();
        break;
      default:
        break;
    }
  }

[michaelcuneo]

But the error is with my Hub listener LoginListener not receiving the Auth event. The Logger isn’t having an error?

[michaelcuneo]

The Logger is working fine and displaying “userSignedIn” when it gets to that part... when he Auth is actually receiving. It appears to be intermittent. The error is not persistent and happens randomly.

[michaelcuneo]

So I tried these suggestions as baffling as they seemed to me... and it doesn't make any difference at all...

const AppLogger = new Logger('App');

export class App extends React.Component { // eslint-disable-line react/prefer-stateless-function
  constructor(props) {
    super(props);
    Hub.listen('auth', this, 'LoginListener');
  }

  onHubCapsule(capsule) {
    const { channel, payload } = capsule;
    if (channel === 'auth') { this.onAuthEvent(payload); }
  }

  onAuthEvent(payload) {
    const { event, data } = payload;
    switch (event) {
      case 'signIn':
        AppLogger.error('userSignedIn');
        window.FB.getLoginStatus(((response) => {
          if (response.status === 'connected') {
            window.FB.api('/me', { fields: 'first_name, last_name, picture' }, () => {
              this.props.onChangeUserDetails(response);
            });
          }
        }));
        this.props.onLoggedIn(data);
        break;
      case 'signOut':
        AppLogger.error('userSignedOut');
        removeAuth();
        break;
      default:
        break;
    }
  }

  render() {

// ... 

}

App.propTypes = {
  onChangeUserDetails: PropTypes.func,
  onLoggedIn: PropTypes.func,
};

export function mapDispatchToProps(dispatch) {
  return {
    onChangeUserDetails: (evt) => {
      if (evt !== undefined && evt.preventDefault) evt.preventDefault();
      dispatch(changeUserDetails(evt));
    },
    onLoggedIn: (evt) => {
      if (evt !== undefined && evt.preventDefault) evt.preventDefault();
      dispatch(setLoginDetails(evt));
    },
  };
}

export default connect(mapDispatchToProps)(App);

I get a log from the logger... then an error from the logger...

[ERROR] 09:28.725 App - userSignedIn
reactBoilerplateDeps.dll.js:6036 [WARN] 09:28.727 Hub - error dispatching auth event to LoginListener

It actually triggers the listener, and goes through the onHubCapsule, but then errors...

Obviously [ERROR] 09:28:725 App - userSignedIn isn't an error... I'm just using the .error system to trace logging.

I managed to get the error dispatching to go away, and now have a tonne of other errors...

[joebernard]

I was getting this error because I had a console.log() inside my logger.onHubCapsule function. Looks like it may have trouble differentiating between internal logging and the system logger.

[elorzafe]

I think is PR #2790 solved the problem. @michaelcuneo @joebernard can you confirm if that is no an issue on the latest version (1.1.22)

[michaelcuneo]

@elorzafe I'm not 100% sure if the issue is solved because I have completely rearranged my project to suit the bug ages ago, I need to document my structure at some point because it's solid as ... I do believe there's only one bug left to solve. If I log out, and log back in, the Hub listener doesn't have enough time to respond appropriately, with no feedback as to why.

But, I have had no problems with the Logger dispatching events for quite some time.

[github-actions]

This issue has been automatically locked since there hasn't been any recent activity after it was closed. Please open a new issue for related bugs.

Looking for a help forum? We recommend joining the Amplify Community Discord server *-help channels or Discussions for those types of questions.