Logout Button from MSAL in TopNavigation

[jkintner25]

Thanks so much for giving us cloudscape! I've been enjoying using it while building out an application for work. I'm using @azure/msal-react to allow login and logout of internal employees using their microsoft 365 credentials. I'd love to allow these users to logout by simply clicking the logout button provided by the msal-react library (inside a TopNavigation dropdown menu). Here's what the logout component looks like:

export const AdminSignOutButton = () => {
    const { instance } = useMsal();

    const handleLogout = (logoutType) => {
        if (logoutType === "popup") {
            instance.logoutPopup({
                postLogoutRedirectUri: "/",
                mainWindowRedirectUri: "/" // redirects the top level app after logout
            });
        }
    }

    return (
        <Button variant="secondary" className="ml-auto" onClick={() => handleLogout("popup")}>Sign out</Button>
    );
}

Any help integrating this component into TopNavigation would be extremely appreciated.

[rubencarvalho]

Hello Jeffrey, thank you for reaching out.

Our Top Navigation component doesn't support a custom component to be used in the menu-dropdown.

Alternatively, I'd recommend you to use our supported button inside the menu-dropdown. It has a onClick property that specifies the event handler called when the utility is clicked. You could then use this to trigger your custom handleLogout logic.

Here's how it could look like:

          {
            type: 'button',
            variant: 'primary-button',
            text: 'Log out',
            onClick: () => handleLogout("popup"),
          },

Let me know if there's any other question you have.

Thank you!

[jkintner25]

Thanks, Ruben! I appreciate your response. Have a great Wednesday!

[jkintner25]

This solution is working for a button at the top level of utilities. After looking at the documentation again, I wonder if I need to use the onItemClick property in the menu-dropdown containing the logout button. Simply adding the onClick property with anon function doesn't seem to actually run. Could you maybe provide an example of using the onItemClick property?

[jkintner25]

I figured it out! I created a function for the 'onItemClick' property which checked the item.detail.id in order to run my logout function. Thanks again for your help!

[dinaftc]

Hello , I am using the Button dropdown from cloudscape and i have

const columns = [
    {
      id: "subject",
      header: "Subject",
      cell: (item) => item.subject,
      sortingField: "subject",
      isRowHeader: true,
    },
    {
      id: "reseller",
      header: "Reseller",
      cell: (item) => item.reseller,
      sortingField: "reseller",
    },
    {
      id: "start_date",
      header: "Start Date",
      cell: (item) => item.start_date,
      sortingField: "start_date",
    },
    {
      id: "end_date",
      header: "End Date",
      cell: (item) => item.end_date,
      sortingField: "end_date",
    },
    {
      id: "products",
      header: "Products",
      cell: (item) => item.products,
      sortingField: "products",
    },
    {
      id: "ref",
      header: "Reference",
      cell: (item) => item.ref,
      sortingField: "ref",
    },
    {
      id: "actions",
      header: "Actions",
      cell: (item) => (
        <ButtonDropdown
          expandToViewport={true}
          onItemClick={(id) => {
            if (id === "delete") {
              console.log("Clicked Delete for item:", item);
              handleDelete(item.ref); // Assuming item.ref is the property you want to pass
            }
          }}
          items={[
            {
              text: "Deactivate",
              id: "rm",
              disabled: false,
            },
            {
              text: "Activate",
              id: "mv",
              disabled: false,
            },
            {
              text: "Status 3",
              id: "rn",
              disabled: false,
            },
            {
              text: "View details",
              id: "rm",
              disabled: false,
            },
            {
              text: "Edit",
              id: "mv",
              disabled: false,
            },
            {
              
              id: "delete",
              text: "Delete",
              disabled: false,
              
            },
          ]}
          margin={{ bottom: "xxl" }}
        >
          Actions
        </ButtonDropdown>
      ),
      minWidth: 170,
    },
  ];

but the delete does not function for me , I'd appreciate any help provided