Offer a standard sign-out action without implementing sign-out state or API calls.
Account menus
Clerk · Component
SignOutButton
SignOutButton is a Clerk React component that signs users out when activated. It supports default or custom content, targeted session sign-out, and redirecting after successful sign-out.
How it works
SignOutButton renders a sign-out control and performs Clerk sign-out when activated. It can use its default button or wrap custom content, sign out all sessions by default, target one session through options, and redirect after completion.
Syntax
<SignOutButton signOutOptions={{ sessionId?, redirectUrl? }}>{children}</SignOutButton>Parameters
| Name | Type | Description |
|---|---|---|
children | React.ReactNode | Children to wrap inside the component; the documented type is React.ReactNode. |
signOutOptions | { sessionId?: string, redirectUrl?: string } | Options passed to Clerk sign-out, including optional sessionId and redirectUrl. |
Returns
A button component that initiates sign-out when activated.
Key points
- It provides a ready-made control that initiates Clerk sign-out.
- Without custom content, it renders a button labeled Sign Out; children let you replace that presentation.
- The default click behavior terminates all sessions.
- A session identifier enables targeted sign-out in a multi-session application.
- Configure post-sign-out navigation with a redirect URL or path.
- The sign-out options object carries settings such as the session ID and redirect destination.
Example: Custom sign-out button
import { SignOutButton } from '@clerk/nextjs'
export default function AccountActions() {
return (
<SignOutButton signOutOptions={{ redirectUrl: '/signed-out' }}>
<button type="button">Sign out</button>
</SignOutButton>
)
}Wrap a custom button to sign out and redirect after success.
When to use it
Wrap an application-styled button or custom label inside the component.
Branded interfaces
End one selected session while leaving other sessions active.
Multi-session products
Send users to a chosen path after sign-out completes.
Post-authentication routing
Interview questions
QWhat does SignOutButton do by default?
SignOutButton is a Clerk component that signs a user out when clicked. Without session-specific options, its documented default is to sign out all sessions.
Follow-up: How would you sign out only one account in a multi-session application? Pass that session's ID through the sign-out options.
QHow do you customize the rendered control?
Use the component's children to provide custom button content. The component can wrap either a button element or custom button text instead of relying on its default label.
Follow-up: What must be checked when using custom children? Verify the framework's documented child-rendering requirement, such as asChild where specified.
QHow can sign-out behavior and post-sign-out navigation be configured?
Provide signOutOptions with a redirectUrl to choose the full URL or path used after successful sign-out. The same options object can include a sessionId for targeted sign-out.
Follow-up: What does sessionId change? It narrows the operation from the default all-session behavior to the specified session.
Related
UserButtonsignOut()sessionIdredirectUrl