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