How to customize the Authentication toast that shows at the top with error messages?

** Which Category is your question related to? **

Authenticator Component.

** What AWS Services are you utilizing? **

Cognito.

** Provide additional details e.g. code snippets **

I can customize all the Authentication components (SignUp, ForgotPassword, etc…), except the Toast one that shows up at the top of the screen with error messages. I’d like to get rid of it and instead show my own component.

I tried using a theme to hide the NavBar that seems the Toast to be built with as follows, but doesn’t seem to work:

const awsTheme = {
  navBar: { display: "none" },
};
....
<Authenticator theme={aswTheme} errorMessage={MyErrorHandler} ... />

How can I achieve this? I can’t find anything in the documentation.

Thanks.

[cnbrkkaya]

Hi, Lets say we dont want to use that toast component. Instead i want to use something like react-notification-alert or any other thing. How can i achieve this ? Thanks.

[BardiaN]

You need to customize the “toast” class in your theme: { …, toast: {backgroundColor: ‘red’}, … }