React customize-withauthenticator doesnt work on v2.0.0-2.0.1

[DmitryNefedov]

Describe the bug
Using withAuthenticatior with passed elements as described in the guide works on v 1.0.8 but shows an empty page on v 2.0.0 or 2.0.1

To Reproduce
Steps to reproduce the behavior:

1. use code based on Docs

import React from 'react';
import { withAuthenticator, SignIn, SignUp, ForgotPassword, RequireNewPassword } from 'aws-amplify-react';

class CustomNoSignUp extends SignUp {

  render() {
    if (this.props.authState !== 'signUp') { return null; }
    return (<div>Please check with your administrator to create a user</div>);
  }
}

class App extends React.Component {
  render() {

    if (this.props.authState !== 'signedIn') { return null; }

    return (
     <div style={{textAlign: 'center'}}>
        <h1>Hello World</h1>
      </div>);
  }
}

export default withAuthenticator(App,
  { includeGreetings: true },
  [
    <SignIn />,
    <CustomNoSignUp/>,
    <ForgotPassword/>,
    <RequireNewPassword/>
  ]
);

Expected behavior
Login form should be shown, after login "Hello World" should be shown

Actual behavior
Blank screen, no errors in console/dev-server

[mkrn]

Second that, can't seem to find the issue by looking through the code.. There are no errors either.. Except from some 400 errors on requests to cognito backend

[pronevich]

Same issue

[ghost]

Same issue.

[ghost]

same issue . Can someone look in to this issue?

[emmkong]

@DmitryNefedov due to your custom SignUp component is extending the base SignUp component,
You should override this showComponent(theme) function instead of the render method.

https://github.com/aws-amplify/amplify-js/blob/master/packages/aws-amplify-react/src/Auth/SignUp.jsx
showComponent(theme) { const { hide } = this.props; if (hide && hide.includes(SignUp)) { return null; } ...

else the code above will hide your custom component too.

Hope this helped.

[DmitryNefedov]

@emmkong,
its not just hiding sign up.
It hides the wrapped element.
If it has been changed to use with showComponent, shouldnt the docs been updated?

[emmkong]

@DmitryNefedov I agree that the behavior of custom Auth UI components has been changed since version 2.0 and it hasn't mentioned in any document yet. :(

Do you mind to elaborate more about what wrapped element that you are expecting so that I could help you a bit more. Thanks.

[richardm-surevine]

The same thing happens if you use the base SignUp component without even customising it, if you pass it in like this.

Seems a bit broken.

[adamdiy]

having the same problem with v1.1.19, after following the docs at https://aws-amplify.github.io/docs/js/authentication

[robhyb19]

Bump.
Seeing the same issue after following the docs ( https://aws-amplify.github.io/docs/js/authentication ) and after following recommendations made in this issue.

[jordanranz]

FYI, we have started an RFC discussion for a proposed Amplify UI Component refactor to increase customizability and flexibility for our components. Please feel free to add any additional comments to the following issue:

#3279

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[stale]

This issue has been automatically closed because of inactivity. Please open a new issue if are still encountering problems.

[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.