How to build a sign out flow

Using the User Button

The simplest way is to use the pre-built User Button component

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

Create a custom button

To create a custom button, you can use the signOut method directly

React
Vanilla JS
React
// import
import { useClerk } from "@clerk/clerk-react";
// must be used inside ClerkProvider
const SignOutButton = () => {
const { signOut } = useClerk();
return (
<button onClick={() => { signOut() } >
Sign out
</button>
);
};
Vanilla JS
window.Clerk.signOut()

Using the API directly

You can also use the API directly to trigger a sign out.

POST https://clerk.[your-domain]/v1/client/sessions/:session_id/end