Several accounts

Better Auth's Multi Session plugin: people sign in to more than one account in the same browser, a work and a personal one for example, and switch between them without signing out.

Turning it on

export default defineNuxtConfig({
  betterAuthUi: {
    multiSession: { enabled: true }
  }
})

No migration needed.

How people use it

• Adding an account: "Add another account" opens the sign-in page, which signed-in people can use for this. It says they'll stay signed in to the account they're using. Any way of signing in works, and signing up a new account too. Afterwards they're back where they started, using the new account.
• Switching: the account page's Devices tab lists the accounts signed in on this device, with Switch and Sign out for each. Switching reloads the page as the other account.
• Signing out signs out of every account on the device. To leave just one, use its Sign out on the Devices tab.
• The admin's menu gets a "Switch account" submenu, for staff with a personal account and a staff one.

Signing in to an account that's already on the device replaces its old session instead of adding it twice.

In your app

<AuthAccountSwitcher /> shows the account in use, and opens to switch, add an account, or sign out of them all. Put it in your header or sidebar:

<template>
  <header class="flex items-center justify-between">
    <AppLogo />
    <AuthAccountSwitcher />
  </header>
</template>

For your own UI, useAuthDeviceAccounts() gives the accounts and the actions:

<script setup lang="ts">
const { accounts, switchTo, signOutOf, addAccountLink } = useAuthDeviceAccounts()
</script>

<template>
  <ul>
    <li v-for="account in accounts" :key="account.token">
      {{ account.user.name }}
      <UButton v-if="!account.current" label="Switch" @click="switchTo(account)" />
    </li>
  </ul>
  <UButton v-if="addAccountLink" label="Add another account" :to="addAccountLink" />
</template>

Both show nothing without the plugin.

Options