Sign out

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 by utilizing Clerk Components or by building a completely custom flow.

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 the correct SDK for your application. You can find steps on how to do so through Clerk's quickstart guides.

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.

The User Button component with the 'Sign out' option hovered over.

In an application with multisession enabled and with more than one account signed in, the <UserButton /> component will also display a Sign out of all accounts option.


import { UserButton } from "@clerk/clerk-react";
 
const Header = () => {
  return (
    <header>
      <h1>My application</h1>
 
      <UserButton />
    </header>
  );
};


<html>
<body>
    <header>
        <h1>My application</h1>
 
        <div id="user-button"></div>
    </header>
    
    <script>
        const el = document.getElementById("user-button");
        
        // Mount the pre-built Clerk UserButton component
        // in an HTMLElement on your page. 
        window.Clerk.mountUserButton(el);
    </script>
</body>
</html>

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.


import { useClerk } from "@clerk/clerk-react";
 
const SignOutButton = () => {
  const { signOut } = useClerk();
 
  return (
    <button onClick={() => signOut()} >
      Sign out
    </button>
  );
};


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