diff --git a/.changeset/deprecate-signout-options.md b/.changeset/deprecate-signout-options.md
new file mode 100644
index 00000000000..c7f7a6fecd6
--- /dev/null
+++ b/.changeset/deprecate-signout-options.md
@@ -0,0 +1,5 @@
+---
+"@clerk/react": patch
+---
+
+Deprecate the `signOutOptions` prop on `` in favor of top-level `redirectUrl` and `sessionId` props. The `signOutOptions` prop still works but now emits a deprecation warning.
diff --git a/packages/react/src/components/SignOutButton.tsx b/packages/react/src/components/SignOutButton.tsx
index 70951ab6e4e..5212e61636b 100644
--- a/packages/react/src/components/SignOutButton.tsx
+++ b/packages/react/src/components/SignOutButton.tsx
@@ -1,3 +1,4 @@
+import { deprecated } from '@clerk/shared/deprecated';
import type { SignOutOptions } from '@clerk/shared/types';
import React from 'react';
@@ -7,18 +8,31 @@ import { withClerk } from './withClerk';
export type SignOutButtonProps = {
redirectUrl?: string;
+ sessionId?: string;
+ /**
+ * @deprecated Use the `redirectUrl` and `sessionId` props directly instead.
+ */
signOutOptions?: SignOutOptions;
children?: React.ReactNode;
};
export const SignOutButton = withClerk(
({ clerk, children, ...props }: React.PropsWithChildren>) => {
- const { redirectUrl = '/', signOutOptions, getContainer, component, ...rest } = props;
+ const { redirectUrl = '/', sessionId, signOutOptions, getContainer, component, ...rest } = props;
+
+ if (signOutOptions) {
+ deprecated('SignOutButton `signOutOptions`', 'Use the `redirectUrl` and `sessionId` props directly instead.');
+ }
children = normalizeWithDefaultValue(children, 'Sign out');
const child = assertSingleChild(children)('SignOutButton');
- const clickHandler = () => clerk.signOut({ redirectUrl, ...signOutOptions });
+ const clickHandler = () =>
+ clerk.signOut({
+ redirectUrl,
+ ...(sessionId !== undefined && { sessionId }),
+ ...signOutOptions,
+ });
const wrappedChildClickHandler: React.MouseEventHandler = async e => {
await safeExecute((child as any).props.onClick)(e);
return clickHandler();
diff --git a/packages/react/src/components/__tests__/SignOutButton.test.tsx b/packages/react/src/components/__tests__/SignOutButton.test.tsx
index 2d3813ee62c..914189e27c3 100644
--- a/packages/react/src/components/__tests__/SignOutButton.test.tsx
+++ b/packages/react/src/components/__tests__/SignOutButton.test.tsx
@@ -58,6 +58,18 @@ describe('', () => {
});
});
+ it('handles sessionId prop', async () => {
+ render();
+ const btn = screen.getByText('Sign out');
+ await userEvent.click(btn);
+ await waitFor(() => {
+ expect(mockSignOut).toHaveBeenCalledWith({
+ redirectUrl: '/',
+ sessionId: 'sess_1yDceUR8SIKtQ0gIOO8fNsW7nhe',
+ });
+ });
+ });
+
it('handles signOutOptions prop', async () => {
render();
const btn = screen.getByText('Sign out');