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