Add slot name to `amplify-toast`

Is your feature request related to a problem? Please describe. I’d like to add custom style to toast notification. I’ve seen other issue about this, like #5604 #6167 #2834

Describe the solution you’d like Fully customize toast notification via slot as other ui components do.

I think it’s matter of few lines in this file: https://github.com/aws-amplify/amplify-js/blob/3642e6af455ee1848c1cc743a7a503e96baefa41/packages/amplify-ui-components/src/components/amplify-toast/amplify-toast.tsx

render() {
    return (
      <slot name="toast-notification">
        <div class="toast">
          <amplify-icon class="toast-icon" name="warning" />
          {this.message ? <span>{this.message}</span> : null}
          <slot />
          <button class="toast-close" onClick={this.handleClose} />
        </div>
      </slot name="toast-notification">
    );
  }

Could you consider a PR?

[Luke-Davies]

You can now prevent the default toast from showing using the hideToast prop on AmplifyAuthenticator.

See this simple example from #7129 for how to implement your own notification/alert component in react (typescript):

import React, { useState, useEffect } from 'react';
import { Hub, HubCallback } from '@aws-amplify/core';
import {
  AmplifyAuthenticator,
} from '@aws-amplify/ui-react';
import {
 UI_AUTH_CHANNEL, TOAST_AUTH_ERROR_EVENT
} from '@aws-amplify/ui-components';

const MyAuth: React.FC = ({ children }) => {

  const [alertMessage, setAlertMessage] = useState('');

  const handleToastErrors: HubCallback = ({ payload }) => {
    if (payload.event === TOAST_AUTH_ERROR_EVENT && payload.message) {
      setAlertMessage(payload.message);
    }
  };

  useEffect(() => {
    Hub.listen(UI_AUTH_CHANNEL, handleToastErrors);
    return () => Hub.remove(UI_AUTH_CHANNEL, handleToastErrors);
  });

  return (
    <>
      {alertMessage && (<div>{alertMessage}</div>)}
      <AmplifyAuthenticator hideToast>
        // ...........
      </AmplifyAuthenticator>
    </>
  );
}

You can just replace <div>{alertMessage}</div> with your own component, using your own styles etc (for example a modal).

For anyone wondering why this ended up as a prop instead of a slot as suggested at the top of this issue; a slot approach was investigated (#7601) but the implementation would have required making trade-offs that the prop approach simply avoids.

[1443658]

I have solved the problem.

It should listen to UI Auth instead of auth channel, then check whether the res.payload.event is ToastAuthError. It would literally captured all events related to authorization including case that no actual auth request is sent.

Here is the code :

Hub.listen("UI Auth", (res) => {  //Listen to UI Auth channel
      if (res?.payload?.event === 'ToastAuthError') {
        let errorMsg = res?.payload?.message
          ? res.payload.message
          : null;

        switch (res.payload.message?.trim()) {
          case "Custom auth lambda trigger is not configured for the user pool.":
            errorMsg = "Password cannot be empty";
            break;
           .......  // The rest is the same

On hiding the default Toast, I’ve changed to use interval to loop on it instead of just once, so that it is still safe to set a shorter waiting time (Not sure whether it has significant improvement though).

  const hideToast = () => {
    const target: HTMLElement = document.getElementsByTagName("amplify-authenticator")[0];
    if (target?.shadowRoot?.children) {
      let el!: HTMLElement;

      let interval = setInterval(function () {
        el = target!.shadowRoot!.children[0] as HTMLElement;
        if (el.tagName.toLocaleLowerCase() === "amplify-toast") {
          el.style.display = "none";
          clearInterval(interval);
        }
      }, 1);  // delay time = 1
    }
  }