From 85a36a8ed615c968e9b381be97db797d96f69acc Mon Sep 17 00:00:00 2001 From: panteliselef Date: Thu, 12 Dec 2024 16:01:27 +0200 Subject: [PATCH] fix(clerk-js): Use `afterSwitchSessionUrl` switching sessions within `UserButton` (#4726) --- .changeset/neat-donkeys-wave.md | 5 +++ .../clerk-js/src/core/__tests__/clerk.test.ts | 9 +---- packages/clerk-js/src/core/clerk.ts | 36 +++++++++++-------- .../SignIn/SignInAccountSwitcher.tsx | 5 ++- .../UserButton/UserButtonPopover.tsx | 5 +-- .../UserButton/useMultisessionActions.tsx | 5 ++- .../src/ui/contexts/components/SignOut.ts | 2 -- .../src/ui/contexts/components/UserButton.ts | 2 -- 8 files changed, 35 insertions(+), 34 deletions(-) create mode 100644 .changeset/neat-donkeys-wave.md diff --git a/.changeset/neat-donkeys-wave.md b/.changeset/neat-donkeys-wave.md new file mode 100644 index 0000000000..806e76d727 --- /dev/null +++ b/.changeset/neat-donkeys-wave.md @@ -0,0 +1,5 @@ +--- +'@clerk/clerk-js': patch +--- + +Bug fix: Use `afterSwitchSessionUrl` instead of using`afterSignInUrl`when switching sessions within``. diff --git a/packages/clerk-js/src/core/__tests__/clerk.test.ts b/packages/clerk-js/src/core/__tests__/clerk.test.ts index 81638918f4..7583a873f7 100644 --- a/packages/clerk-js/src/core/__tests__/clerk.test.ts +++ b/packages/clerk-js/src/core/__tests__/clerk.test.ts @@ -564,7 +564,6 @@ describe('Clerk singleton', () => { expect(mockClientRemoveSessions).toHaveBeenCalled(); expect(sut.setActive).toHaveBeenCalledWith({ session: null, - beforeEmit: expect.any(Function), redirectUrl: '/', }); }); @@ -590,7 +589,6 @@ describe('Clerk singleton', () => { expect(mockSession1.remove).not.toHaveBeenCalled(); expect(sut.setActive).toHaveBeenCalledWith({ session: null, - beforeEmit: expect.any(Function), redirectUrl: '/', }); }); @@ -614,7 +612,6 @@ describe('Clerk singleton', () => { expect(mockClientDestroy).not.toHaveBeenCalled(); expect(sut.setActive).not.toHaveBeenCalledWith({ session: null, - beforeEmit: expect.any(Function), }); }); }); @@ -637,7 +634,6 @@ describe('Clerk singleton', () => { expect(mockClientDestroy).not.toHaveBeenCalled(); expect(sut.setActive).toHaveBeenCalledWith({ session: null, - beforeEmit: expect.any(Function), redirectUrl: '/', }); }); @@ -653,8 +649,7 @@ describe('Clerk singleton', () => { ); const sut = new Clerk(productionPublishableKey); - sut.setActive = jest.fn(async ({ beforeEmit }) => void (beforeEmit && beforeEmit())); - sut.navigate = jest.fn(); + sut.setActive = jest.fn(); await sut.load(); await sut.signOut({ sessionId: '1', redirectUrl: '/after-sign-out' }); await waitFor(() => { @@ -662,10 +657,8 @@ describe('Clerk singleton', () => { expect(mockClientDestroy).not.toHaveBeenCalled(); expect(sut.setActive).toHaveBeenCalledWith({ session: null, - beforeEmit: expect.any(Function), redirectUrl: '/after-sign-out', }); - expect(sut.navigate).toHaveBeenCalledWith('/after-sign-out'); }); }); }); diff --git a/packages/clerk-js/src/core/clerk.ts b/packages/clerk-js/src/core/clerk.ts index 70fcab33ac..4fb50c4fb5 100644 --- a/packages/clerk-js/src/core/clerk.ts +++ b/packages/clerk-js/src/core/clerk.ts @@ -369,8 +369,21 @@ export class Clerk implements ClerkInterface { const opts = callbackOrOptions && typeof callbackOrOptions === 'object' ? callbackOrOptions : options || {}; const redirectUrl = opts?.redirectUrl || this.buildAfterSignOutUrl(); - const defaultCb = () => this.navigate(redirectUrl); - const cb = typeof callbackOrOptions === 'function' ? callbackOrOptions : defaultCb; + + const handleSetActive = () => { + const signOutCallback = typeof callbackOrOptions === 'function' ? callbackOrOptions : undefined; + if (signOutCallback) { + return this.setActive({ + session: null, + beforeEmit: ignoreEventValue(signOutCallback), + }); + } + + return this.setActive({ + session: null, + redirectUrl, + }); + }; if (!opts.sessionId || this.client.activeSessions.length === 1) { if (this.#options.experimental?.persistClient ?? true) { @@ -379,22 +392,14 @@ export class Clerk implements ClerkInterface { await this.client.destroy(); } - return this.setActive({ - session: null, - beforeEmit: ignoreEventValue(cb), - redirectUrl, - }); + return handleSetActive(); } const session = this.client.activeSessions.find(s => s.id === opts.sessionId); const shouldSignOutCurrent = session?.id && this.session?.id === session.id; await session?.remove(); if (shouldSignOutCurrent) { - return this.setActive({ - session: null, - beforeEmit: ignoreEventValue(cb), - redirectUrl, - }); + return handleSetActive(); } }; @@ -906,12 +911,15 @@ export class Clerk implements ClerkInterface { if (beforeEmit) { beforeUnloadTracker?.startTracking(); this.#setTransitiveState(); - deprecated('beforeEmit', 'Use the `redirectUrl` property instead.'); + deprecated( + 'Clerk.setActive({beforeEmit})', + 'Use the `redirectUrl` property instead. Example `Clerk.setActive({redirectUrl:"/"})`', + ); await beforeEmit(newSession); beforeUnloadTracker?.stopTracking(); } - if (redirectUrl) { + if (redirectUrl && !beforeEmit) { beforeUnloadTracker?.startTracking(); this.#setTransitiveState(); diff --git a/packages/clerk-js/src/ui/components/SignIn/SignInAccountSwitcher.tsx b/packages/clerk-js/src/ui/components/SignIn/SignInAccountSwitcher.tsx index df1a14e22f..1bf0a3d806 100644 --- a/packages/clerk-js/src/ui/components/SignIn/SignInAccountSwitcher.tsx +++ b/packages/clerk-js/src/ui/components/SignIn/SignInAccountSwitcher.tsx @@ -10,13 +10,12 @@ import { useMultisessionActions } from '../UserButton/useMultisessionActions'; const _SignInAccountSwitcher = () => { const card = useCardState(); const { userProfileUrl } = useEnvironment().displayConfig; - const { navigateAfterSignIn, afterSignInUrl, path: signInPath } = useSignInContext(); + const { afterSignInUrl, path: signInPath } = useSignInContext(); const { navigateAfterSignOut } = useSignOutContext(); const { handleSignOutAllClicked, handleSessionClicked, activeSessions, handleAddAccountClicked } = useMultisessionActions({ navigateAfterSignOut, - navigateAfterSwitchSession: navigateAfterSignIn, - afterSignInUrl, + afterSwitchSessionUrl: afterSignInUrl, userProfileUrl, signInUrl: signInPath, user: undefined, diff --git a/packages/clerk-js/src/ui/components/UserButton/UserButtonPopover.tsx b/packages/clerk-js/src/ui/components/UserButton/UserButtonPopover.tsx index 36691da01b..e773bdf2e0 100644 --- a/packages/clerk-js/src/ui/components/UserButton/UserButtonPopover.tsx +++ b/packages/clerk-js/src/ui/components/UserButton/UserButtonPopover.tsx @@ -15,7 +15,8 @@ export const UserButtonPopover = React.forwardRef unsafeClose?.(false); const { session } = useSession() as { session: ActiveSessionResource }; - const { __experimental_asStandalone } = useUserButtonContext(); + const userButtonContext = useUserButtonContext(); + const { __experimental_asStandalone } = userButtonContext; const { authConfig } = useEnvironment(); const { user } = useUser(); const { @@ -26,7 +27,7 @@ export const UserButtonPopover = React.forwardRef diff --git a/packages/clerk-js/src/ui/components/UserButton/useMultisessionActions.tsx b/packages/clerk-js/src/ui/components/UserButton/useMultisessionActions.tsx index cb12f02081..c5acbd5ed2 100644 --- a/packages/clerk-js/src/ui/components/UserButton/useMultisessionActions.tsx +++ b/packages/clerk-js/src/ui/components/UserButton/useMultisessionActions.tsx @@ -12,8 +12,7 @@ type UseMultisessionActionsParams = { actionCompleteCallback?: () => void; navigateAfterSignOut?: () => any; navigateAfterMultiSessionSingleSignOut?: () => any; - navigateAfterSwitchSession?: () => any; - afterSignInUrl?: string; + afterSwitchSessionUrl?: string; userProfileUrl?: string; signInUrl?: string; } & Pick; @@ -69,7 +68,7 @@ export const useMultisessionActions = (opts: UseMultisessionActionsParams) => { const handleSessionClicked = (session: ActiveSessionResource) => async () => { card.setLoading(); - return setActive({ session, redirectUrl: opts.afterSignInUrl }).finally(() => { + return setActive({ session, redirectUrl: opts.afterSwitchSessionUrl }).finally(() => { card.setIdle(); opts.actionCompleteCallback?.(); }); diff --git a/packages/clerk-js/src/ui/contexts/components/SignOut.ts b/packages/clerk-js/src/ui/contexts/components/SignOut.ts index ca20eb4e4d..5e029e8c1c 100644 --- a/packages/clerk-js/src/ui/contexts/components/SignOut.ts +++ b/packages/clerk-js/src/ui/contexts/components/SignOut.ts @@ -12,10 +12,8 @@ export type SignOutContextType = { export const useSignOutContext = (): SignOutContextType => { const { navigate } = useRouter(); const clerk = useClerk(); - const navigateAfterSignOut = () => navigate(clerk.buildAfterSignOutUrl()); const navigateAfterMultiSessionSingleSignOutUrl = () => navigate(clerk.buildAfterMultiSessionSingleSignOutUrl()); - return { navigateAfterSignOut, navigateAfterMultiSessionSingleSignOutUrl, diff --git a/packages/clerk-js/src/ui/contexts/components/UserButton.ts b/packages/clerk-js/src/ui/contexts/components/UserButton.ts index 5b3e670211..bc954b35f8 100644 --- a/packages/clerk-js/src/ui/contexts/components/UserButton.ts +++ b/packages/clerk-js/src/ui/contexts/components/UserButton.ts @@ -44,7 +44,6 @@ export const useUserButtonContext = () => { const navigateAfterMultiSessionSingleSignOut = () => clerk.redirectWithAuth(afterMultiSessionSingleSignOutUrl); const afterSwitchSessionUrl = ctx.afterSwitchSessionUrl || displayConfig.afterSwitchSessionUrl; - const navigateAfterSwitchSession = () => navigate(afterSwitchSessionUrl); const userProfileMode = !!ctx.userProfileUrl && !ctx.userProfileMode ? 'navigation' : ctx.userProfileMode; @@ -57,7 +56,6 @@ export const useUserButtonContext = () => { componentName, navigateAfterMultiSessionSingleSignOut, navigateAfterSignOut, - navigateAfterSwitchSession, signInUrl, userProfileUrl, afterMultiSessionSingleSignOutUrl,