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:
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:
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.jsonThis copies the following files into your project:
src/lib/auth/multi-session-plugin.tssrc/components/auth/multi-session/manage-account.tsxsrc/components/auth/multi-session/manage-accounts.tsxsrc/components/auth/multi-session/switch-account-submenu.tsxsrc/components/auth/multi-session/switch-account-submenu-content.tsxsrc/components/auth/multi-session/switch-account-submenu-item.tsxsrc/components/auth/settings/shared/helpers.tssrc/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:
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 /><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:
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:
listDeviceSessionsOptionssetActiveSessionOptionsrevokeMultiSessionOptions
References:
These APIs power the switch-account submenu, current-session indicator, add-account navigation, and device-session revoke/switch actions.
Last updated on