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

When signed out, the component renders as an inline sign in button within the dashboard layout. 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

Customization

Components

Account can take different labels for the sign in and sign out buttons through the signInLabel and signOutLabel props. Deeper changes can be made by passing in slotProps to the underlying components.

<AuthenticationContext.Provider value={authentication}>
  <SessionContext.Provider value={session}>
    <Account
      slotProps={{
        signInButton: {
          color: 'info',
          variant: 'outlined',
          sx: {
            color: 'primaryDark',
            fontFamily: 'Inter',
            fontSize: '1em',
          },
        },
        signOutButton: { color: 'primary', variant: 'outlined' },
      }}
      signInLabel="Login"
      signOutLabel="Logout"
    />
  </SessionContext.Provider>
</AuthenticationContext.Provider>

<AuthenticationContext.Provider value={authentication}>
  <SessionContext.Provider value={session}>
    <Account
      slotProps={{
        signInButton: {
          color: 'info',
          variant: 'outlined',
          sx: {
            color: 'primaryDark',
            fontFamily: 'Inter',
            fontSize: '1em',
          },
        },
        signOutButton: { color: 'primary', variant: 'outlined' },
      }}
      signInLabel="Login"
      signOutLabel="Logout"
    />
  </SessionContext.Provider>
</AuthenticationContext.Provider>

Press Enter to start editing

🚧 Composition

The Account component allows adding your own menu options, including deeply nested options. This is in progress.

API

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

<Account />