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

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

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

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

pages/index.js
import { SignOutButton } from "gatsby-plugin-clerk";
 
export default function Home() {
  return (
    <div>
      <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>
      <SignOutButton>
        <button>Sign out</button>
      </SignOutButton>
    </div>
  );
}

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

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

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

pages/index.js
import { SignOutButton } from "gatsby-plugin-clerk";
 
export default function Home() {
  return (
    <div>
      <SignOutButton>
        <button>Sign out</button>
      </SignOutButton>
    </div>
  );
}

Multi-session usage

Sign out of all sessions

Clicking the <SignOutButton> component signs the user out of all sessions. This is the default behavior.

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>
      <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>
      <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>
      <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>
      <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>
      <SignOutButton signOutOptions={{ sessionId }} />
    </div>
  );
}

Properties

Name	Type	Description
`redirectUrl?`	`string`	Full URL or path to navigate to after successful sign-in or sign-up.
`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.