diff --git a/.changeset/silly-zebras-dream.md b/.changeset/silly-zebras-dream.md new file mode 100644 index 0000000000..6338c93f19 --- /dev/null +++ b/.changeset/silly-zebras-dream.md @@ -0,0 +1,6 @@ +--- +'@clerk/clerk-js': major +'@clerk/clerk-react': major +--- + +Consolidate `afterSignOutOneUrl` & `afterSignOutAllUrl` to `afterSignOutUrl` and drop usage of Dashboard settings in ClerkJS components. The Dashboard settings should only apply to the Account Portal application. diff --git a/packages/clerk-js/src/ui/components/SignIn/SignInAccountSwitcher.tsx b/packages/clerk-js/src/ui/components/SignIn/SignInAccountSwitcher.tsx index 61831d7622..5852c8f08e 100644 --- a/packages/clerk-js/src/ui/components/SignIn/SignInAccountSwitcher.tsx +++ b/packages/clerk-js/src/ui/components/SignIn/SignInAccountSwitcher.tsx @@ -1,21 +1,20 @@ import { withRedirectToAfterSignIn } from '../../common'; -import { useEnvironment, useSignInContext } from '../../contexts'; +import { useEnvironment, useSignInContext, useSignOutContext } from '../../contexts'; import { Col, descriptors, Flow, Icon } from '../../customizables'; import { Card, Header, PreviewButton, UserPreview, withCardStateProvider } from '../../elements'; import { ArrowBlockButton } from '../../elements/ArrowBlockButton'; import { useCardState } from '../../elements/contexts'; import { Plus, SignOutDouble } from '../../icons'; -import { useRouter } from '../../router'; import { useMultisessionActions } from '../UserButton/useMultisessionActions'; const _SignInAccountSwitcher = () => { const card = useCardState(); - const { navigate } = useRouter(); - const { applicationName, userProfileUrl, signInUrl, afterSignOutAllUrl } = useEnvironment().displayConfig; + const { applicationName, userProfileUrl, signInUrl } = useEnvironment().displayConfig; const { navigateAfterSignIn } = useSignInContext(); + const { navigateAfterSignOut } = useSignOutContext(); const { handleSignOutAllClicked, handleSessionClicked, activeSessions, handleAddAccountClicked } = useMultisessionActions({ - navigateAfterSignOut: () => navigate(afterSignOutAllUrl), + navigateAfterSignOut, navigateAfterSwitchSession: navigateAfterSignIn, userProfileUrl, signInUrl, diff --git a/packages/clerk-js/src/ui/components/UserProfile/DeleteUserForm.tsx b/packages/clerk-js/src/ui/components/UserProfile/DeleteUserForm.tsx index 05e309f666..b0c9221e05 100644 --- a/packages/clerk-js/src/ui/components/UserProfile/DeleteUserForm.tsx +++ b/packages/clerk-js/src/ui/components/UserProfile/DeleteUserForm.tsx @@ -1,10 +1,9 @@ -import { useClerk, useUser } from '@clerk/shared/react'; +import { useUser } from '@clerk/shared/react'; -import { useEnvironment } from '../../contexts'; +import { useSignOutContext } from '../../contexts'; import { Col, localizationKeys, Text } from '../../customizables'; import type { FormProps } from '../../elements'; import { Form, FormButtons, FormContent, useCardState, withCardStateProvider } from '../../elements'; -import { useRouter } from '../../router'; import { handleError, useFormControl } from '../../utils'; import { UserProfileBreadcrumbs } from './UserProfileNavbar'; @@ -12,10 +11,8 @@ type DeleteUserFormProps = FormProps; export const DeleteUserForm = withCardStateProvider((props: DeleteUserFormProps) => { const { onReset } = props; const card = useCardState(); - const environment = useEnvironment(); - const router = useRouter(); + const { navigateAfterSignOut } = useSignOutContext(); const { user } = useUser(); - const clerk = useClerk(); const deleteUser = async () => { try { @@ -24,11 +21,7 @@ export const DeleteUserForm = withCardStateProvider((props: DeleteUserFormProps) } await user.delete(); - if (clerk.client.activeSessions.length > 0) { - await router.navigate(environment.displayConfig.afterSignOutOneUrl); - } else { - await router.navigate(environment.displayConfig.afterSignOutAllUrl); - } + await navigateAfterSignOut(); } catch (e) { handleError(e, [], card.setError); } diff --git a/packages/clerk-js/src/ui/contexts/ClerkUIComponentsContext.tsx b/packages/clerk-js/src/ui/contexts/ClerkUIComponentsContext.tsx index 5cde066a9e..6bc4e628e2 100644 --- a/packages/clerk-js/src/ui/contexts/ClerkUIComponentsContext.tsx +++ b/packages/clerk-js/src/ui/contexts/ClerkUIComponentsContext.tsx @@ -184,6 +184,19 @@ export const useSignInContext = (): SignInContextType => { }; }; +export type SignOutContextType = { + navigateAfterSignOut: () => any; +}; + +export const useSignOutContext = (): SignOutContextType => { + const { navigate } = useRouter(); + const clerk = useClerk(); + + const navigateAfterSignOut = () => navigate(clerk.buildAfterSignOutUrl()); + + return { navigateAfterSignOut }; +}; + type PagesType = { routes: NavbarRoute[]; contents: CustomPageContent[]; @@ -229,12 +242,12 @@ export const useUserButtonContext = () => { const signInUrl = pickRedirectionProp('signInUrl', { ctx, options, displayConfig }, false); const userProfileUrl = ctx.userProfileUrl || displayConfig.userProfileUrl; - const afterMultiSessionSingleSignOutUrl = ctx.afterMultiSessionSingleSignOutUrl || displayConfig.afterSignOutOneUrl; - const navigateAfterMultiSessionSingleSignOut = () => clerk.redirectWithAuth(afterMultiSessionSingleSignOutUrl); - const afterSignOutUrl = ctx.afterSignOutUrl || clerk.buildAfterSignOutUrl(); const navigateAfterSignOut = () => navigate(afterSignOutUrl); + const afterMultiSessionSingleSignOutUrl = ctx.afterMultiSessionSingleSignOutUrl || afterSignOutUrl; + const navigateAfterMultiSessionSingleSignOut = () => clerk.redirectWithAuth(afterMultiSessionSingleSignOutUrl); + const afterSwitchSessionUrl = ctx.afterSwitchSessionUrl || displayConfig.afterSwitchSessionUrl; const navigateAfterSwitchSession = () => navigate(afterSwitchSessionUrl); diff --git a/packages/react/src/components/controlComponents.tsx b/packages/react/src/components/controlComponents.tsx index 56e776d664..2bfa02362e 100644 --- a/packages/react/src/components/controlComponents.tsx +++ b/packages/react/src/components/controlComponents.tsx @@ -143,15 +143,11 @@ export const Protect = ({ children, fallback, ...restAuthorizedParams }: Protect export const RedirectToSignIn = withClerk(({ clerk, ...props }: WithClerkProp) => { const { client, session } = clerk; - // TODO: Remove temp use of __unstable__environment - const { __unstable__environment } = clerk as any; - const hasActiveSessions = client.activeSessions && client.activeSessions.length > 0; React.useEffect(() => { - if (session === null && hasActiveSessions && __unstable__environment) { - const { afterSignOutOneUrl } = __unstable__environment.displayConfig; - void clerk.navigate(afterSignOutOneUrl); + if (session === null && hasActiveSessions) { + void clerk.redirectToAfterSignOut(); } else { void clerk.redirectToSignIn(props); }