<SignOutButton> properties
1. SignOutOptions
How to use the <SignOutButton> component

`<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.

`<SignOutButton>` properties

Name
signOutCallback?
Type
() => (void | Promise<any>)
Description
A promise to handle after the sign out has successfully happened.
Name
signOutOptions?
Type
SignOutOptions
Description
Options for signing out. Includes sessionId which if passed, signs the user out of a specific session. Useful for multi-session applications.
Name
children?
Type
React.ReactNode
Description
Children you want to wrap the <SignOutButton> in.

`SignOutOptions`

The type of the signOutOptions prop for the <SignOutButton> component is defined as follows:

Name
sessionId?
Type
string
Description
The ID of a specific session to sign out of. Useful for multi-session applications.

How to use the `<SignOutButton>` component

Basic usage

Next.js

React

Remix

Gatsby

App Router

Pages Router

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.

Next.js

React

Remix

Gatsby

App Router

Pages Router

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. If the user is not signed in, the sessionId will be null, and the user is shown the <SignInButton> component. If the user is signed in, the user is shown the <SignOutButton> component, which when clicked, signs the user out of that specific session.

Next.js

React

Remix

Gatsby

App Router

Pages Router

app/page.tsx

"use client"

import { SignInButton, SignOutButton, useAuth } from "@clerk/nextjs";

export default function Home() {
  const { sessionId } = useAuth();

  if (!sessionId) {
    return (
      <div>
        <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>
        <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>
        <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>
        <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>
        <SignInButton />
      </div>
    );
  }

  return (
    <div>
      <SignOutButton signOutOptions={{ sessionId }} />
    </div>
  );
}

Edit this page on GitHub

Last updated on Aug 20, 2024

<SignOutButton>

Feedback

`<SignOutButton>`