BETTER-AUTH. UI
Plugins

Multi Session

Add account switching and multi-session management to your Solid/Zaidan auth UI.

The Multi Session plugin lets users stay signed in to multiple accounts at once, switch the active account from the user menu, and manage device sessions from account settings.

It contributes:

  • A plugin-injected switch-account submenu inside <UserButton />
  • A plugin-injected <ManageAccounts /> card inside <AccountSettings />
  • Solid runtime helpers for listing, switching, and revoking device sessions

Setup

Install the Better Auth plugin

Add multiSession() to your Better Auth server config:

src/lib/auth.ts
import { betterAuth } from "better-auth"
import { multiSession } from "better-auth/plugins"

export const auth = betterAuth({
  // ...
  plugins: [
    multiSession() 
  ]
})

Install the matching Solid client plugin

Add multiSessionClient() so authClient.multiSession.* methods are available to the copied Solid components:

src/lib/auth-client.ts
import { createAuthClient } from "@better-auth-ui/solid"
import { multiSessionClient } from "better-auth/client/plugins"

export const authClient = createAuthClient({
  plugins: [multiSessionClient()] 
})

Install the Solid/Zaidan components

npx shadcn@latest add https://better-auth-ui.com/r/solid/multi-session.json

This copies the following files into your project:

  • src/lib/auth/multi-session-plugin.ts
  • src/components/auth/multi-session/manage-account.tsx
  • src/components/auth/multi-session/manage-accounts.tsx
  • src/components/auth/multi-session/switch-account-submenu.tsx
  • src/components/auth/multi-session/switch-account-submenu-content.tsx
  • src/components/auth/multi-session/switch-account-submenu-item.tsx
  • src/components/auth/settings/shared/helpers.ts
  • src/components/auth/settings/shared/types.ts
  • copied UI primitives under src/components/ui/**

Register the copied UI plugin

Register the local multiSessionPlugin() wrapper in your copied provider:

src/components/providers.tsx
import { AuthProvider } from "@/components/auth/auth-provider"
import { multiSessionPlugin } from "@/lib/auth/multi-session-plugin"

<AuthProvider
  authClient={authClient}
  plugins={[multiSessionPlugin()]} 
>
  {children}
</AuthProvider>

The copied wrapper composes the core Better Auth UI metadata and injects Solid UI slots for account settings and the user menu.

Components

<UserButton />

When multiSessionPlugin() is registered, <UserButton /> renders plugin-contributed user menu items, including the switch-account submenu.

import { UserButton } from "@/components/auth/user/user-button"

<UserButton />

<SwitchAccountSubmenu />

import { SwitchAccountSubmenu } from "@/components/auth/multi-session/switch-account-submenu"

<SwitchAccountSubmenu />

Prop

Type

<ManageAccounts />

<ManageAccounts /> is rendered through plugin-contributed accountCards, so it appears inside <AccountSettings /> when the plugin is registered.

import { ManageAccounts } from "@/components/auth/multi-session/manage-accounts"

<ManageAccounts />

Prop

Type

Options

The copied local wrapper accepts the same core plugin options:

src/lib/auth/multi-session-plugin.ts
multiSessionPlugin({
  localization: {
    switchAccount: "Switch Account",
    addAccount: "Add account",
    manageAccounts: "Manage accounts"
  }
})

Prop

Type

Localization

Prop

Type

The copied submenu and manage-accounts components read localization from the registered plugin first, then fall back to the core defaults.

Session management

The copied Solid components use the Solid runtime helpers directly:

  • listDeviceSessionsOptions
  • setActiveSessionOptions
  • revokeMultiSessionOptions

References:

These APIs power the switch-account submenu, current-session indicator, add-account navigation, and device-session revoke/switch actions.

Last updated on

On this page