fix(clerk-react): Make signOutOptions prop functional (#4433)

.changeset/beige-bananas-look.md

@@ -0,0 +1,5 @@
+---
+"@clerk/clerk-react": patch
+---
+
+Fix `signOutOptions` prop usage in `<SignOutButton />` component

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();

packages/react/src/components/__tests__/SignOutButton.test.tsx

@@ -24,6 +24,8 @@ jest.mock('../withClerk', () => {
   };
 });
 
+const url = 'https://www.clerk.com';
+
 describe('<SignOutButton />', () => {
   beforeAll(() => {
     console.error = jest.fn();
@@ -46,6 +48,24 @@ describe('<SignOutButton />', () => {
     });
   });
 
+  it('handles redirectUrl prop', async () => {
+    render(<SignOutButton redirectUrl={url} />);
+    const btn = screen.getByText('Sign out');
+    userEvent.click(btn);
+    await waitFor(() => {
+      expect(mockSignOut).toHaveBeenCalledWith({ redirectUrl: url });
+    });
+  });
+
+  it('handles signOutOptions prop', async () => {
+    render(<SignOutButton signOutOptions={{ redirectUrl: url, sessionId: 'sess_1yDceUR8SIKtQ0gIOO8fNsW7nhe' }} />);
+    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(<SignOutButton>text</SignOutButton>);
     screen.getByText('text');