Better Auth UI

Enable multiple concurrent sessions with account switching. Allow users to sign in to multiple accounts simultaneously and switch between them seamlessly.

The multi-session plugin enables users to maintain multiple active sessions simultaneously. Users can switch between accounts without signing out, manage all their device sessions, and quickly add new accounts from the user menu.

It contributes:

A "Switch Account" submenu in the user button dropdown showing all active device sessions
A <ManageAccounts /> card in account settings for viewing and revoking device sessions
useListDeviceSessions, useSetActiveSession, and useRevokeMultiSession hooks

Setup

Install the Better Auth plugin

Add the Multi Session plugin to your Better Auth server config:

lib/auth.ts

import { betterAuth } from "better-auth"
import { multiSession } from "better-auth/plugins"

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

Install the matching client plugin

Add multiSessionClient() to your auth client so authClient.multiSession.* methods are available:

lib/auth-client.ts

import { createAuthClient } from "better-auth/react"
import { multiSessionClient } from "better-auth/client/plugins"

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

Install the UI plugin

Run the shadcn CLI to install the multi-session management components and the multiSessionPlugin() factory into your project:

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

This drops the following into your codebase:

src/lib/auth/auth-plugin.ts — local AuthPlugin typing widener
src/lib/auth/multi-session-plugin.ts — multiSessionPlugin() factory
src/components/multi-session/manage-accounts.tsx — the account management card
src/components/multi-session/manage-account.tsx — individual account row
src/components/multi-session/switch-account-submenu.tsx — the submenu trigger
src/components/multi-session/switch-account-submenu-content.tsx — the submenu content
src/components/multi-session/switch-account-submenu-item.tsx — individual session item

Register the plugin

Pass multiSessionPlugin() to <AuthProvider>:

components/providers.tsx

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

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

Components

`<UserButton />`

The "Switch Account" submenu is automatically added to the <UserButton /> dropdown when the plugin is registered. It shows all active device sessions and lets users switch between them with one click, add a new account, and see which account is currently active.

Usage

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

<SwitchAccountSubmenu />

Props

Prop

Type

`<ManageAccounts />`

Manage accounts

The <ManageAccounts /> card is rendered in account settings when your layout renders plugin-contributed accountCards and multiSessionPlugin() is in plugins.

Usage

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

<ManageAccounts />

Props

Prop

Type

Options

multiSessionPlugin({
  // Override any of the plugin's localization strings.
  localization: {
    switchAccount: "Switch Account",
    addAccount: "Add Account",
    manageAccounts: "Manage Accounts"
  }
})

Prop

Type

Localization

Prop

Type

Session management

The plugin provides hooks for managing multiple sessions:

useListDeviceSessions - List all device sessions for the current user
useSetActiveSession - Switch to a different session
useRevokeMultiSession - Sign out from a specific session

Multi Session

Manage accounts

On this page