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(opens in a new tab). 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 <UserButton /> 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 multi-session 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

If the pre-built <UserButton /> doesn't cover your needs, you can use the signOut() function to build a custom solution.

In this example, the useClerk() hook is used to access the signOut()(opens in a new tab) function. We then use the useRouter()(opens in a new tab) hook from Next.js to redirect the user to the home page (/) after they sign out.


import { useClerk } from "@clerk/clerk-react";
import { useRouter } from 'next/navigation'
 
const SignOutButton = () => {
  const { signOut } = useClerk();
  const router = useRouter()
 
  return (
    // Clicking on this button will sign out a user and reroute them to the "/" (home) page.
    <button onClick={() => signOut(() => router.push("/"))}>
      Sign out
    </button>
  );
};


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

Last updated on March 6, 2024