Skip to content

<SignOutButton />

The Sign out button on a card, as the user menu shows it

<SignOutButton /> renders a Sign out button. It calls Better Auth’s signOut() and then refreshes the current page. <UserButton /> already includes it in its account menu, so add it yourself only where you want sign-out outside that menu.

Quick start

src/routes/settings/+page.svelte
src/app/settings/page.tsx

In SvelteKit, the component reads authClient from an <AuthProvider> ancestor, which the base item’s src/routes/+layout.svelte provides.

The Next.js component imports authClient from src/lib/auth/api/auth-client.ts and uses next/navigation, so it runs in a client component.

Props

  • onSuccess runs after Better Auth confirms the sign-out, before the refresh. <UserButton /> uses it to close its menu.
  • onError runs when signOut() doesn’t report success.
  • The classclassName prop is merged with the button’s default classes.

Behavior

After a successful sign-out, SvelteKit calls refreshAll()Next.js calls router.refresh(), so the server side of the current page runs again without the session cookie. The visitor stays on the current URL; the button doesn’t navigate anywhere itself.

The label is fixed to “Sign out”. The component is a file in your repository, so change the label or markup there.