diff --git a/.changeset/bright-dragons-join.md b/.changeset/bright-dragons-join.md new file mode 100644 index 00000000000..a27b92f435f --- /dev/null +++ b/.changeset/bright-dragons-join.md @@ -0,0 +1,35 @@ +--- +"@clerk/clerk-react": major +--- + +Replace the `signOutCallback` prop on the `` with `redirectUrl`. This aligns the API surface with other UI components provided by `@clerk/clerk-react`. + +If you previously used the `signOutCallback` prop to navigate to another page, you can migrate as shown below. + +Before: + +```jsx +import { SignOutButton } from "@clerk/clerk-react"; + +export const Signout = () => { + return ( + { window.location.href = "/your-path" }}> + + + ) +} +``` + +After: + +```jsx +import { SignOutButton } from "@clerk/clerk-react"; + +export const Signout = () => { + return ( + + + + ) +} +``` diff --git a/packages/react/src/components/SignOutButton.tsx b/packages/react/src/components/SignOutButton.tsx index d82f1cbccd9..f3ed4e611a3 100644 --- a/packages/react/src/components/SignOutButton.tsx +++ b/packages/react/src/components/SignOutButton.tsx @@ -1,4 +1,4 @@ -import type { SignOutCallback, SignOutOptions } from '@clerk/types'; +import type { SignOutOptions } from '@clerk/types'; import React from 'react'; import type { WithClerkProp } from '../types'; @@ -6,20 +6,24 @@ import { assertSingleChild, normalizeWithDefaultValue, safeExecute } from '../ut import { withClerk } from './withClerk'; export type SignOutButtonProps = { - signOutCallback?: SignOutCallback; + redirectUrl?: string; signOutOptions?: SignOutOptions; children?: React.ReactNode; }; export const SignOutButton = withClerk( ({ clerk, children, ...props }: React.PropsWithChildren>) => { - const { signOutCallback, signOutOptions, ...rest } = props; + const { redirectUrl = '/', signOutOptions, ...rest } = props; children = normalizeWithDefaultValue(children, 'Sign out'); const child = assertSingleChild(children)('SignOutButton'); + const navigateToRedirectUrl = () => { + return clerk.navigate(redirectUrl); + }; + const clickHandler = () => { - return clerk.signOut(signOutCallback, signOutOptions); + return clerk.signOut(navigateToRedirectUrl, signOutOptions); }; const wrappedChildClickHandler: React.MouseEventHandler = async e => {