Sign out

Learn how to sign-out users

Overview

Once you have a signed-in user, you need to give them a way to sign out.

Please note that the sign-out flow only deactivates the current session. Other valid sessions that correspond to the same user (e.g. if the user is signed in on another computer) will continue to work.

You can either sign out users in Clerk via the Clerk Components or build a completely custom flow using ClerkJS or Clerk React.

Before you start

You need to create a Clerk Application in your Clerk Dashboard. For more information, check out our Set up your application guide.
You need to install Clerk React or ClerkJS to your application.

Using Clerk Components

The simplest way to sign out users is via the <UserButton /> component. The user button is a pre-built UI component that gives a signed-in user a way to manage their account. One of the options is a Sign out button.

1
import { UserButton } from "@clerk/clerk-react";
2

3
const Header = () => {
4
  return (
5
    <header>
6
      <h1>My application</h1>
7
      <UserButton />
8
    </header>
9
  );
10
};

1
<html>
2
<body>
3
    <header>
4
        <h1>My application</h1>
5
        <div id="user-button"></div>
6
    </header>
7
    
8
    <script>
9
        const el = document.getElementById("user-button");
10
        // Mount the pre-built Clerk UserButton component
11
        // in an HTMLElement on your page. 
12
        window.Clerk.mountUserButton(el);
13
    </script>
14
</body>
15
</html>

Note that you don't need to pass any special options to the <UserButton /> component. For more details on the available component options as well as how you can customize them, please visit the UserButton component guide.

Custom sign-out

In case the pre-built user button doesn't cover your needs and you prefer a custom sign-out flow, you can easily make use of our SDKs.

1
import { useClerk } from "@clerk/clerk-react";
2

3
const SignOutButton = () => {
4
  const { signOut } = useClerk();
5
  return (
6
    <button onClick={() => signOut()} >
7
      Sign out
8
    </button>
9
  );
10
};

1
// Signs-out the current user.
2
await window.Clerk.signOut();

For more information on session management, please check our detailed session management guide.