From 964268327e59311c9cde0d8df76661b6d2551855 Mon Sep 17 00:00:00 2001 From: LekoArts Date: Thu, 14 Dec 2023 13:34:58 +0100 Subject: [PATCH 1/6] feat(clerk-react): Replace signOutCallback with redirectUrl in SignOutButton --- packages/react/src/components/SignOutButton.tsx | 14 +++++++++----- 1 file changed, 9 insertions(+), 5 deletions(-) diff --git a/packages/react/src/components/SignOutButton.tsx b/packages/react/src/components/SignOutButton.tsx index d82f1cbccd9..a4df8372036 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,24 +6,28 @@ 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 => { - await safeExecute((child as any).props.onClick)(e); + await safeExecute(child.props.onClick)(e); return clickHandler(); }; From 56870cca92fea4a141bb45ce71d08b91e4985ce0 Mon Sep 17 00:00:00 2001 From: Lennart Date: Thu, 14 Dec 2023 13:46:48 +0100 Subject: [PATCH 2/6] Create bright-dragons-join.md --- .changeset/bright-dragons-join.md | 42 +++++++++++++++++++++++++++++++ 1 file changed, 42 insertions(+) create mode 100644 .changeset/bright-dragons-join.md diff --git a/.changeset/bright-dragons-join.md b/.changeset/bright-dragons-join.md new file mode 100644 index 00000000000..800b4493439 --- /dev/null +++ b/.changeset/bright-dragons-join.md @@ -0,0 +1,42 @@ +--- +"@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 the as shown below. + +Before: + +```jsx +"use client" + +import { useRouter } from "next/navigation" +import { SignOutButton } from "@clerk/nextjs"; + +export const Signout = () => { + const router = useRouter() + + return ( + router.push("/your-path")}> + + + ) +} +``` + +After: + +```jsx +"use client" + +import { SignOutButton } from "@clerk/nextjs"; + +export const Signout = () => { + return ( + + + + ) +} +``` From 762805368b9b2883f48f341af85e8a882af76274 Mon Sep 17 00:00:00 2001 From: LekoArts Date: Thu, 14 Dec 2023 13:59:27 +0100 Subject: [PATCH 3/6] fix(clerk-react): Type issue --- packages/react/src/components/SignOutButton.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react/src/components/SignOutButton.tsx b/packages/react/src/components/SignOutButton.tsx index a4df8372036..f3ed4e611a3 100644 --- a/packages/react/src/components/SignOutButton.tsx +++ b/packages/react/src/components/SignOutButton.tsx @@ -27,7 +27,7 @@ export const SignOutButton = withClerk( }; const wrappedChildClickHandler: React.MouseEventHandler = async e => { - await safeExecute(child.props.onClick)(e); + await safeExecute((child as any).props.onClick)(e); return clickHandler(); }; From 4b250a9c093faf3c5f850a8dc1d56b38fd65fe6a Mon Sep 17 00:00:00 2001 From: Lennart Date: Thu, 14 Dec 2023 14:05:01 +0100 Subject: [PATCH 4/6] typo --- .changeset/bright-dragons-join.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.changeset/bright-dragons-join.md b/.changeset/bright-dragons-join.md index 800b4493439..cb61a91ef99 100644 --- a/.changeset/bright-dragons-join.md +++ b/.changeset/bright-dragons-join.md @@ -4,7 +4,7 @@ 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 the as shown below. +If you previously used the `signOutCallback` prop to navigate to another page, you can migrate as shown below. Before: From f7ef2693b913f741d54f5935c6f526ce53c5eeed Mon Sep 17 00:00:00 2001 From: LekoArts Date: Thu, 14 Dec 2023 14:11:27 +0100 Subject: [PATCH 5/6] chore(repo): Do not use Next in changeset example --- .changeset/bright-dragons-join.md | 13 +++---------- 1 file changed, 3 insertions(+), 10 deletions(-) diff --git a/.changeset/bright-dragons-join.md b/.changeset/bright-dragons-join.md index cb61a91ef99..a26c6ae9eb3 100644 --- a/.changeset/bright-dragons-join.md +++ b/.changeset/bright-dragons-join.md @@ -9,16 +9,11 @@ If you previously used the `signOutCallback` prop to navigate to another page, y Before: ```jsx -"use client" - -import { useRouter } from "next/navigation" -import { SignOutButton } from "@clerk/nextjs"; +import { SignOutButton } from "@clerk/clerk-react"; export const Signout = () => { - const router = useRouter() - return ( - router.push("/your-path")}> + window.location.href = "/your-path"}> ) @@ -28,9 +23,7 @@ export const Signout = () => { After: ```jsx -"use client" - -import { SignOutButton } from "@clerk/nextjs"; +import { SignOutButton } from "@clerk/clerk-react"; export const Signout = () => { return ( From c6893579d522e2ab24ecc95645d8809f7b5bdd30 Mon Sep 17 00:00:00 2001 From: LekoArts Date: Thu, 14 Dec 2023 14:12:32 +0100 Subject: [PATCH 6/6] chore(repo): Typo --- .changeset/bright-dragons-join.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.changeset/bright-dragons-join.md b/.changeset/bright-dragons-join.md index a26c6ae9eb3..a27b92f435f 100644 --- a/.changeset/bright-dragons-join.md +++ b/.changeset/bright-dragons-join.md @@ -13,7 +13,7 @@ import { SignOutButton } from "@clerk/clerk-react"; export const Signout = () => { return ( - window.location.href = "/your-path"}> + { window.location.href = "/your-path" }}> )