Amplify-js: Greetings is not render(update) when authState is changed

[plum-shiga]

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

Bug

What is the current behavior?

1. I wrote below codes.

import React from "react";
import { ConfirmSignUp, ForgotPassword, SignIn, SignUp, VerifyContact, Authenticator, Greetings } from 'aws-amplify-react';

// signed in view at my apps
class MyView extends React.Component {
  constructor (props) {
    super(props);
    this.state = {
      myState: null,
    };
  }

  render () {
    if (this.props.authState === 'signedIn') {
      return (
        <div>
          <h2>State is ::</h2>
          <p>{this.props.authState}</p>
        </div>
      );
    } else {
      return(<p></p>);
    }
  }
}

export class MyComp extends React.Component {
  handleAuthStateChange(state) {
      if (state === 'signedIn') {
          // do something
      }
  }
  render () {
    return (
      <Authenticator hideDefault={true} onStateChange={this.handleAuthStateChange}>
        <SignIn />
        <VerifyContact />
        <SignUp />
        <ConfirmSignUp />
        <ForgotPassword />
        <Greetings
          inGreeting={(username) => 'Hello ' + username}
          outGreeting="Please sign in..."
        />
        <MyView />
      </Authenticator>
    );
  }
}

1. When I sign-in at first, Greetings shows Please sign in.... I expected it. no problem.

2. However when authState is signedIn, Please sign in... is still displayed and not shows sign out button.

3. This problem is cleared by browser reload, and turn to Hello username and shows signout button.

4. When I signout, shows signIn componnent, but Greetings shows Hello username.

5. The problem of 5, I reload browser, turn to Please sign in....

What is the expected behavior?

In, what is current behavior section,

1. When I sign-in, turn to Hello username without browser reload.

2. When I sign-out, turn to Please sign-in without browser reload.

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

OS

• win10, win7, mac
• I think OS is not affected

Browser

• Chrome 68.0.3440.84（Official Build）

Did this work in previous versions?

• No

My package.json

  "dependencies": {
    "@material-ui/core": "^1.3.0",
    "ajv": "^6.5.0",
    "ajv-keywords": "^3.2.0",
    "aws-amplify": "^1.0.2",
    "aws-amplify-react": "^1.0.2",
    "babel-polyfill": "^6.26.0",
    "prop-types": "^15.6.2",
    "react": "^16.4.0",
    "react-dom": "^16.4.0",
    "react-router-dom": "^4.3.1",
    "react-scripts": "1.1.4"
  },

[plum-shiga]

Sorry, There are some issues. and I found # 1334 after posted but I believe this issue providing detail information than #1334 .

And I think it seems to be related.

• https://github.com/aws-amplify/amplify-js/issues/442#issuecomment-375111391

[yalamber]

@plum-shiga this one is more detailed. I have closed #1334 It seems like this issue is with the latest version. Older version seems working. The one used in https://github.com/richardzcode/Journal-AWS-Amplify-Tutorial. I kept on wondering what was wrong with my code till I looked in to the version of the aws amplify package used.

[christo1745]

Looks like onAuthEvent is undefined in AuthPiece.js

[richardzcode]

Take a look at https://github.com/richardzcode/Journal-AWS-Amplify-Tutorial/tree/master/step-02#4-greetings. It is updated with Amplify 1.1 now. The idea is to listen to auth events through Hub