feat(@aws-amplify/ui-components): add hideToast prop to authenticator (…

…aws-amplify#7129)
dgonsan · Mar 18, 2021 · 4590505 · 4590505
1 parent 1967112
commit 4590505
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 4 deletions.
diff --git a/packages/amplify-ui-components/src/components.d.ts b/packages/amplify-ui-components/src/components.d.ts
diff --git a/...ages/amplify-ui-components/src/components/amplify-authenticator/amplify-authenticator.tsx b/...ages/amplify-ui-components/src/components/amplify-authenticator/amplify-authenticator.tsx
@@ -49,6 +49,8 @@ export class AmplifyAuthenticator {
   @Prop() usernameAlias: UsernameAliasStrings;
   /** Callback for Authenticator state machine changes */
   @Prop() handleAuthStateChange: AuthStateHandler = () => {};
+  /** Hide amplify-toast for auth errors */
+  @Prop() hideToast: boolean = false;
 
   @State() authState: AuthState = AuthState.Loading;
   @State() authData: CognitoUserInterface;
@@ -83,7 +85,7 @@ export class AmplifyAuthenticator {
       this.onAuthStateChange(authState, authData as CognitoUserInterface);
       this.toastMessage = '';
     });
-    Hub.listen(UI_AUTH_CHANNEL, this.handleToastEvent);
+    if (!this.hideToast) Hub.listen(UI_AUTH_CHANNEL, this.handleToastEvent);
     Hub.listen(AUTH_CHANNEL, this.handleExternalAuthEvent);
 
     appendToCognitoUserAgent('amplify-authenticator');
@@ -180,22 +182,22 @@ export class AmplifyAuthenticator {
 
   componentWillUnload() {
     Hub.remove(AUTH_CHANNEL, this.handleExternalAuthEvent);
-    Hub.remove(UI_AUTH_CHANNEL, this.handleToastEvent);
+    if (!this.hideToast) Hub.remove(UI_AUTH_CHANNEL, this.handleToastEvent);
     return onAuthUIStateChange;
   }
 
   render() {
     return (
       <Host>
-        {this.toastMessage ? (
+        {!this.hideToast && this.toastMessage && (
           <amplify-toast
             message={this.toastMessage}
             handleClose={() => {
               this.toastMessage = '';
             }}
             data-test="authenticator-error"
           />
-        ) : null}
+        )}
         {this.authState === AuthState.SignedIn ? (
           [<slot name="greetings"></slot>, <slot></slot>]
         ) : (

diff --git a/packages/amplify-ui-components/src/components/amplify-authenticator/readme.md b/packages/amplify-ui-components/src/components/amplify-authenticator/readme.md