diff --git a/.changeset/beige-bananas-look.md b/.changeset/beige-bananas-look.md
new file mode 100644
index 0000000000..555726fa3b
--- /dev/null
+++ b/.changeset/beige-bananas-look.md
@@ -0,0 +1,5 @@
+---
+"@clerk/clerk-react": patch
+---
+
+Fix `signOutOptions` prop usage in `` component
diff --git a/packages/react/src/components/SignOutButton.tsx b/packages/react/src/components/SignOutButton.tsx
index 19dd6f9bf7..6676684eba 100644
--- a/packages/react/src/components/SignOutButton.tsx
+++ b/packages/react/src/components/SignOutButton.tsx
@@ -18,7 +18,7 @@ export const SignOutButton = withClerk(
children = normalizeWithDefaultValue(children, 'Sign out');
const child = assertSingleChild(children)('SignOutButton');
- const clickHandler = () => clerk.signOut({ redirectUrl });
+ const clickHandler = () => clerk.signOut({ redirectUrl, ...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 686873c480..88058dbd77 100644
--- a/packages/react/src/components/__tests__/SignOutButton.test.tsx
+++ b/packages/react/src/components/__tests__/SignOutButton.test.tsx
@@ -24,6 +24,8 @@ jest.mock('../withClerk', () => {
};
});
+const url = 'https://www.clerk.com';
+
describe('', () => {
beforeAll(() => {
console.error = jest.fn();
@@ -46,6 +48,24 @@ describe('', () => {
});
});
+ it('handles redirectUrl prop', async () => {
+ render();
+ const btn = screen.getByText('Sign out');
+ userEvent.click(btn);
+ await waitFor(() => {
+ expect(mockSignOut).toHaveBeenCalledWith({ redirectUrl: url });
+ });
+ });
+
+ it('handles signOutOptions prop', async () => {
+ render();
+ const btn = screen.getByText('Sign out');
+ userEvent.click(btn);
+ await waitFor(() => {
+ expect(mockSignOut).toHaveBeenCalledWith({ redirectUrl: url, sessionId: 'sess_1yDceUR8SIKtQ0gIOO8fNsW7nhe' });
+ });
+ });
+
it('uses text passed as children', async () => {
render(text);
screen.getByText('text');