toast.tsx

export const App = () => {
  const [toastVisible, setToastVisible] = useState(false);
  const [toastError, setToastError] = useState("");

  const [authState, setAuthState] = React.useState<AuthState>();
  const [user, setUser] = React.useState<object | undefined>();

  useEffect(() => {
    Hub.listen("auth", (res) => {
      const errorMsg = res.payload.data?.message
        ? res.payload.data.message
        : null;

      if (res.payload.event == "signIn_failure") {
        //remove default toast msg
        const target = document.getElementsByTagName("amplify-authenticator")[0]
          .shadowRoot;
        setTimeout(() => {
          (target?.children[0] as HTMLDivElement).style.display = "none";
        }, 50);
        renderMessage(errorMsg);
      }
    });
    return onAuthUIStateChange((nextAuthState, authData) => {
      setAuthState(nextAuthState);
      setUser(authData);
    });
  }, []);
      
  const renderMessage = (errMsg: string) => {
    setToastVisible(true);
    switch (errMsg) {
      case "Custom auth lambda trigger is not configured for the user pool.":
        errMsg = "Password cannot be empty";
        setToastError(errMsg);
        break;

      default:
        errMsg = "Please check your sign in credentials properly";
        setToastError(errMsg);
        break;
    }
  };

  return authState === AuthState.SignedIn && user ? (
    <BrowserRouter>
      <Switch>
        <Route path="/" component={Dashboard} />
      </Switch>
    </BrowserRouter>
  ) : (
    <>
      {toastVisible && (
        <AmplifyToast
          message={toastError}
          handleClose={() => setToastVisible(false)}
        />
      )}
    <AmplifyAuthenticator>
      <AmplifySignUp
        headerText="Sign Up"
        slot="sign-up"
        formFields={signUpFields}
      ></AmplifySignUp>
      <AmplifySignIn
        headerText="Log in to Dashboard"
        slot="sign-in"
        formFields={signInFields}
      ></AmplifySignIn>
    </AmplifyAuthenticator>
    </>
  );
};