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

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.

Clerk's open User Button.
Clerk React
ClerkJS
Clerk React
import { UserButton } from "@clerk/clerk-react";
const Header = () => {
return (
<header>
<h1>My application</h1>
<UserButton />
</header>
);
};
ClerkJS
<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>

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.

Clerk React
ClerkJS
Clerk React
import { useClerk } from "@clerk/clerk-react";
const SignOutButton = () => {
const { signOut } = useClerk();
return (
<button onClick={() => signOut()} >
Sign out
</button>
);
};
ClerkJS
// Signs-out the current user.
await window.Clerk.signOut();

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