Account

A component that renders an account management dropdown for your application.

The Account component is a quick and easy way to display an account management menu for authenticated users. It is deeply integrated with the SignInPage and DashboardLayout components, meaning that it automatically appears in the top navigation bar inside DashboardLayout once your users have signed in through the SignInPage.

States

Signed In

If a session object is present, the component is rendered as a dropdown containing the user's account details as well as an option to sign out.

<AuthenticationContext.Provider value={authentication}>
  <SessionContext.Provider value={session}>
    <Account />
  </SessionContext.Provider>
</AuthenticationContext.Provider>

<AuthenticationContext.Provider value={authentication}>
  <SessionContext.Provider value={session}>
    <Account />
  </SessionContext.Provider>
</AuthenticationContext.Provider>

Press Enter to start editing

Signed Out

When signed out, the component renders as an inline sign in button within the dashboard layout.

<AuthenticationContext.Provider value={authentication}>
  <SessionContext.Provider value={session}>
    <Account />
  </SessionContext.Provider>
</AuthenticationContext.Provider>

<AuthenticationContext.Provider value={authentication}>
  <SessionContext.Provider value={session}>
    <Account />
  </SessionContext.Provider>
</AuthenticationContext.Provider>

Press Enter to start editing

Customization

Slot Props

The underlying signInButton, signOutButton and iconButton components can be customized by passing in slotProps to the Account component.

Labels for the sign in and sign out buttons can be customized through the localeText prop.

Signed in

Signed out

<Account
  localeText={{
    signInLabel: 'Login',
    signOutLabel: 'Logout',
  }}
  slotProps={{
    signInButton: {
      color: 'info',
      variant: 'outlined',
      sx: {
        margin: 'auto',
        color: 'primaryDark',
        textTransform: 'capitalize',
        fontFamily: 'Inter',
        fontSize: '1em',
        height: 'fit-content',
        maxHeight: 'max-content',
      },
    },
    signOutButton: { color: 'primary', variant: 'outlined' },
  }}
/>

<Account
  localeText={{
    signInLabel: 'Login',
    signOutLabel: 'Logout',
  }}
  slotProps={{
    signInButton: {
      color: 'info',
      variant: 'outlined',
      sx: {
        margin: 'auto',
        color: 'primaryDark',
        textTransform: 'capitalize',
        fontFamily: 'Inter',
        fontSize: '1em',
        height: 'fit-content',
        maxHeight: 'max-content',
      },
    },
    signOutButton: { color: 'primary', variant: 'outlined' },
  }}
/>

Press Enter to start editing

Slots

You can pass in your own items to the Account menu through the menuItems slot to add additional menu items in the space between the user's account details and the sign out button, to create larger, more complex menus:

<AuthenticationContext.Provider value={authentication}>
  <SessionContext.Provider value={session}>
    <Account
      slots={{
        menuItems: CustomMenuItems,
      }}
    />
  </SessionContext.Provider>
</AuthenticationContext.Provider>

<AuthenticationContext.Provider value={authentication}>
  <SessionContext.Provider value={session}>
    <Account
      slots={{
        menuItems: CustomMenuItems,
      }}
    />
  </SessionContext.Provider>
</AuthenticationContext.Provider>

Press Enter to start editing

API

See the documentation below for a complete reference to all of the props and classes available to the components mentioned here.

<Account />