Amplify-js: Making withAuthenticator HOC fully customizable

[ahmetcetin]

Is your feature request related to a problem? Please describe.
As of today, withAuthenticator is very customizable, especially as you can extend the existing SignIn, SignUp,... components (all extending AuthPiece component) and pass the changed new components to withAuthenticator. There is only one thing is left, when error occurs, AuthPiece is calling handleAuthEvent method of Authenticator component. This method, as for now, is only handling 'error' events, and shows Toast component with the error message:

    handleAuthEvent(state, event) {
        if (event.type === 'error') {
            const map = this.props.errorMessage || AmplifyMessageMap;
            const message = (typeof map === 'string')? map : map(event.data);
            this.setState({ error: message, showToast: true });

        }
    }

The problem is, I just don't want to use Toast component, instead I want to use our own component to display the errors.

Describe the solution you'd like
Adding additional parameter in handleAuthEvent method of Authenticator component, which makes showing Toast optional.

Describe alternatives you've considered
I can override triggerAuthEvent of AuthPiece in the individual components like SignIn, SignUp, etc to show my own implementation of showing the error, but if aws-amplify-react team later on decides to change the implementation of handleAuthEvent, it might be broken, or I would lose the functionality that might implemented in the future.

Additional context
I made pull request #1964 to cover it.

[ahmetcetin]

pr #1964 merged into master, closing.

[ChakirMrabet]

How to use this from <Authenticator .. />? I'm facing the same problem, I want to get rid of the toast that shows up by default with the error, and show instead my own component.

Thanks.

[BardiaN]

@ChakirMrabet Here is what I've found. Hope it helps you:
If you pass "theme" to the "", you can customize how "Toast Component" will look. I took advantage of that and added a "display: 'none'" to it:
const theme = {
....,
toast: { display: 'none' }
}

[ChakirMrabet]

@ChakirMrabet Here is what I've found. Hope it helps you:
If you pass "theme" to the "", you can customize how "Toast Component" will look. I took advantage of that and added a "display: 'none'" to it:
const theme = {
....,
toast: { display: 'none' }
}

It worked, thanks.

[andrmoel]

@ChakirMrabet Here is what I've found. Hope it helps you:
If you pass "theme" to the "", you can customize how "Toast Component" will look. I took advantage of that and added a "display: 'none'" to it:
const theme = {
....,
toast: { display: 'none' }
}

This solution works, but is pretty dirty. Why hiding an unused component with CSS instead of removing it physically?

I faced the same problem and decided not to use aws-amplify-react :(