Skip to Content
Clerk logo

Clerk Docs

Ctrl + K
Go to clerkstage.dev

<SignOutButton>

The <SignOutButton> component is a button that signs a user out. By default, it is a <button> tag that says Sign Out, but it is completely customizable by passing children.

Usage

Basic usage

The example below shows how to use the <SignOutButton> component.

app/page.js
import { SignOutButton } from "@clerk/nextjs"; export default function Home() { return ( <div> <h1> Sign out </h1> <SignOutButton> </div> ); }
pages/index.js
import { SignOutButton } from "@clerk/nextjs"; export default function Home() { return ( <div> <h1> Sign out </h1> <SignOutButton> </div> ); }

Custom usage

You can create a custom button by wrapping your own button, or button text, in the <SignOutButton> component.

app/page.js
import { SignOutButton } from "@clerk/nextjs"; export default function Home() { return ( <div> <h1> Sign out </h1> <SignOutButton> <button>Sign out</button> </SignOutButton> </div> ); }
pages/index.js
import { SignOutButton } from "@clerk/nextjs"; export default function Home() { return ( <div> <h1> Sign out </h1> <SignOutButton> <button>Sign out</button> </SignOutButton> </div> ); }

Multi-session usage

Sign out of a specific session

You can sign out of a specific session by passing in a sessionId to the signOutOptions prop. This is useful for signing a single account out of a multi-session (multiple account) application.

In the example below, the sessionId is retrieved from the useAuth() hook.

app/page.tsx
"use client" import { SignInButton, SignOutButton, useAuth } from "@clerk/nextjs"; export default function Home() { const { sessionId } = useAuth(); if (!sessionId) { return ( <div> <h1> Sign in </h1> <SignInButton> </div> ); } return ( <div> <h1> Sign out </h1> <SignOutButton signOutOptions={{ sessionId }} /> </div> ); }
pages/index.tsx
import { SignInButton, SignOutButton, useAuth } from "@clerk/nextjs"; export default function Home() { const { sessionId } = useAuth(); if (!sessionId) { return ( <div> <h1> Sign in </h1> <SignInButton> </div> ); } return ( <div> <h1> Sign out </h1> <SignOutButton signOutOptions={{ sessionId }} /> </div> ); }

Sign out of all sessions

You can sign out of all currently active sessions by passing a callback that returns the signOut() method to the signOutCallback prop. This is useful for signing out all currently active accounts from a multi-session (multiple account) application.

In the example below, the signOut() method is retrieved from the useClerk() hook.

app/page.tsx
"use client"; import { SignOutButton, useClerk } from "@clerk/nextjs"; export default function Home() { const { signOut } = useClerk(); return ( <div> <h1> Sign out </h1> <SignOutButton signOutCallback={() => signOut()} /> </div> ); }
pages/index.tsx
import { SignOutButton, useClerk } from "@clerk/nextjs"; export default function Home() { const { signOut } = useClerk(); return ( <div> <h1> Sign out </h1> <SignOutButton signOutCallback={() => signOut()} /> </div> ); }

Properties

NameTypeDescription
signOutCallback?() => (void | Promise<any>)A promise to handle after the sign out has successfully happened.
children?React.ReactNodechildren you want to wrap the <SignOutButton> in.
signOutOptions?SignOutOptionsObject that has a sessionId property. The sessionId can be passed in to sign out a specific session, which is useful for multisession applications.

What did you think of this content?

Clerk © 2024