AmplifyAuthenticator customize validation modal positioning and style

[sri7vasu]

Is your feature request related to a problem? Please describe.
Im using SignUp form like this using React (Typescript) and AmplifyAuthenticator like this below:

import React from "react";
import {AuthState} from "@aws-amplify/ui-components"
import {
  AmplifySignUp,
  AmplifyAuthenticator,
  AmplifySignOut,
} from "@aws-amplify/ui-react";

function SignUp() {
  return (
    <AmplifyAuthenticator initialAuthState={AuthState.SignUp}>
      <AmplifySignUp
        headerText="Sign Up"
        usernameAlias="email"
        slot="sign-up"
        ></AmplifySignUp>
      <div>
        My App
        <AmplifySignOut></AmplifySignOut>
      </div>
    </AmplifyAuthenticator>
  );
}
export default SignUp;

The functionality and validations are working fine , i placed the signup forum in middle right of my page and still when there is a validation error it shows on top of the page and that too wide as shown in the figure. There is no way to customize the modal nor to change the width or style.

Describe the solution you'd like
Needed a way to customize the positioning of the validation modal and styles. It will be helpful.

Describe alternatives you've considered
Tried using a different auth framework all together or write my own components using Amplify components but thats lot of work and testing.

[sawyerh]

+1 to this feature request. Our team is holding off from updating to the new Amplify UI library because of this. We don't feel the current user experience around error messages is the most user friendly, and we'd like to customize the styling further to match our site. We'd like to either be able to fully customize the CSS of this component, or be able to replace it with our own custom Error component.

In aws-amplify-react, we've accomplished this by hiding the default toast component. We then render our own error component by passing a function into the Authenticator component's errorMessage prop, storing triggered errors in our own React state, which we can then render however we like.

[joae]

@sawyerh How do you hide the Toast component? I'm using react and I can't figure out how to do it

[wlee221]

Hello all, we had #7129 merged that will allow you to hide the default error toast and implement your own. You can see @Luke-Davies' example here #6479 (comment). We will close this issue as #7129 solves this, but please feel free to ask any questions.

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