chore(clerk-js,clerk-react): Consolidate afterSignOut*Url and avoid using DisplayConfig settings

Author: dimkl

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: navigateAfterSignOut,
       navigateAfterSwitchSession: navigateAfterSignIn,
       userProfileUrl,
       signInUrl,

packages/clerk-js/src/ui/components/UserProfile/DeleteUserPage.tsx

@@ -1,20 +1,17 @@
-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 { Form, FormButtons, FormContent, useCardState, withCardStateProvider } from '../../elements';
 import { useActionContext } from '../../elements/Action/ActionRoot';
-import { useRouter } from '../../router';
 import { handleError, useFormControl } from '../../utils';
 import { UserProfileBreadcrumbs } from './UserProfileNavbar';
 
 export const DeleteUserForm = withCardStateProvider(() => {
   const card = useCardState();
   const { close } = useActionContext();
-  const environment = useEnvironment();
-  const router = useRouter();
+  const { navigateAfterSignOut } = useSignOutContext();
   const { user } = useUser();
-  const clerk = useClerk();
 
   const deleteUser = async () => {
     try {
@@ -23,11 +20,7 @@ export const DeleteUserForm = withCardStateProvider(() => {
       }
 
       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);
     }

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

packages/react/src/components/controlComponents.tsx

@@ -143,15 +143,11 @@ export const Protect = ({ children, fallback, ...restAuthorizedParams }: Protect
 
 export const RedirectToSignIn = withClerk(({ clerk, ...props }: WithClerkProp<RedirectToSignInProps>) => {
   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);
     }