`<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>
  );
}

example.js
import { SignOutButton } from "@clerk/clerk-react";
 
export default function Example() {
  return (
    <div>
    <h1> Sign out </h1>
      <SignOutButton>
    </div>
  );
}

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

pages/index.js
import { SignOutButton } from "gatsby-plugin-clerk";
 
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>
  );
}

example.js
import { SignOutButton } from "@clerk/clerk-react";
 
export default function Example() {
  return (
    <div>
    <h1> Sign out </h1>
      <SignOutButton>
        <button>Sign out</button>
      </SignOutButton>
    </div>
  );
}

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

pages/index.js
import { SignOutButton } from "gatsby-plugin-clerk";
 
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>
  );
}

example.js
import { SignInButton, SignOutButton, useAuth } from "@clerk/clerk-react";
 
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.js
import { SignInButton, SignOutButton, useAuth } from "@clerk/remix";
 
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.js
import { SignInButton, SignOutButton, useAuth } from "gatsby-plugin-clerk";
 
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>
  );
}

example.js
import { SignOutButton, useClerk } from "@clerk/clerk-react";
 
export default function Home() {
  const { signOut } = useClerk();
 
  return (
    <div>
      <h1> Sign out </h1>
      <SignOutButton signOutCallback={() => signOut()} />
    </div>
  );
}

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

pages/index.js
import { SignOutButton, useClerk } from "gatsby-plugin-clerk";
 
export default function Home() {
  const { signOut } = useClerk();
 
  return (
    <div>
      <h1> Sign out </h1>
      <SignOutButton signOutCallback={() => signOut()} />
    </div>
  );
}

Properties

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