Build a custom sign-out flow

Warning

This guide is for users who want to build a custom user interface using the Clerk API. To use a prebuilt UI, use the Account Portal pages or prebuilt components.

Clerk's <UserButton /> and <SignOutButton /> components provide an out-of-the-box solution for signing out users. However, if you're building a custom solution, you can use the signOut() function to handle the sign-out process.

The signOut() function signs a user out of all sessions in a multi-session application, or only the current session in a single-session context. You can also specify a specific session to sign out by passing the sessionId parameter.

Note

The sign-out flow deactivates only the current session. Other valid sessions associated with the same user (e.g., if the user is signed in on another device) will remain active.

Next.js

JavaScript

Expo

iOS (beta)

The useClerk() hook is used to access the signOut() function, which is called when the user clicks the sign-out button.

The Next.js useRouter() hook is used to redirect the user to the home page after they sign out.

This example is written for Next.js App Router but can be adapted for any React meta framework, such as Remix.

app/components/SignOutButton.tsx

'use client'

import { useClerk } from '@clerk/nextjs'

export const SignOutButton = () => {
  const { signOut } = useClerk()

  return (
    // Clicking this button signs out a user
    // and redirects them to the home page "/".
    <button onClick={() => signOut({ redirectUrl: '/' })}>Sign out</button>
  )
}

Edit this page on GitHub

Last updated on Feb 3, 2025

Build a custom sign-out flow

Feedback