Skip to Content
Clerk logo

Clerk Docs

Ctrl + K
Go to

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

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 multisession enabled and with more than one account signed in, the <UserButton /> component will also display a Sign out of all accounts option.

The User Button component with multiple accounts signed in.
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 January 8, 2024

What did you think of this content?

Clerk © 2024