chore(clerk-js): Enable UI Components to use setActive with router.navigate

.changeset/strange-eels-poke.md

@@ -0,0 +1,7 @@
+---
+'@clerk/clerk-js': patch
+'@clerk/clerk-react': patch
+'@clerk/types': patch
+---
+
+TODO

eslint.config.mjs

@@ -19,6 +19,117 @@ const ECMA_VERSION = 2021,
   TEST_FILES = ['**/*.test.js', '**/*.test.jsx', '**/*.test.ts', '**/*.test.tsx', '**/test/**', '**/__tests__/**'],
   TYPESCRIPT_FILES = ['**/*.cts', '**/*.mts', '**/*.ts', '**/*.tsx'];
 
+const noSetActiveRedirectUrl = {
+  meta: {
+    type: 'problem',
+    docs: {
+      description: 'Disallow calling `setActive` with `{ redirectUrl }` as a parameter.',
+      recommended: false,
+    },
+    messages: {
+      noRedirectUrl: 'Calling `setActive` with `{ redirectUrl }` as an argument is not allowed.',
+    },
+    schema: [],
+  },
+  create(context) {
+    return {
+      CallExpression(node) {
+        // Detect direct function calls: `setActive({ redirectUrl })`
+        const isDirectCall = node.callee.type === 'Identifier' && node.callee.name === 'setActive';
+
+        // Detect property calls: `clerk.setActive({ redirectUrl })` or `this.setActive({ redirectUrl })`
+        const isObjectCall = node.callee.type === 'MemberExpression' && node.callee.property.name === 'setActive';
+
+        if (!isDirectCall && !isObjectCall) {
+          return; // Exit if it's not a `setActive` call
+        }
+
+        // Ensure the first argument is an object containing `{ redirectUrl }`
+        const firstArg = node.arguments[0];
+
+        if (
+          firstArg &&
+          firstArg.type === 'ObjectExpression' &&
+          firstArg.properties.some(prop => prop.key.name === 'redirectUrl')
+        ) {
+          context.report({
+            node: firstArg,
+            messageId: 'noRedirectUrl',
+          });
+        }
+      },
+    };
+  },
+};
+
+const noNavigateUseClerk = {
+  meta: {
+    type: 'problem',
+    docs: {
+      description: 'Disallow any usage of `navigate` from `useClerk()`',
+      recommended: false,
+    },
+    messages: {
+      noNavigate: 'Usage of `navigate` from `useClerk()` is not allowed. Use `useRouter() instead`.',
+    },
+    schema: [],
+  },
+  create(context) {
+    const sourceCode = context.getSourceCode();
+
+    return {
+      // Case 1: Destructuring `navigate` from `useClerk()`
+      VariableDeclarator(node) {
+        if (
+          node.id.type === 'ObjectPattern' && // Checks if it's an object destructuring
+          node.init?.type === 'CallExpression' &&
+          node.init.callee.name === 'useClerk'
+        ) {
+          for (const property of node.id.properties) {
+            if (property.type === 'Property' && property.key.name === 'navigate') {
+              context.report({
+                node: property,
+                messageId: 'noNavigate',
+              });
+            }
+          }
+        }
+      },
+
+      // Case 2 & 3: Accessing `navigate` on a variable or directly calling `useClerk().navigate`
+      MemberExpression(node) {
+        if (
+          node.property.name === 'navigate' &&
+          node.object.type === 'CallExpression' &&
+          node.object.callee.name === 'useClerk'
+        ) {
+          // Case 3: Direct `useClerk().navigate`
+          context.report({
+            node,
+            messageId: 'noNavigate',
+          });
+        } else if (node.property.name === 'navigate' && node.object.type === 'Identifier') {
+          // Case 2: `clerk.navigate` where `clerk` is assigned `useClerk()`
+          const scope = sourceCode.scopeManager.acquire(node);
+          if (!scope) return;
+
+          const variable = scope.variables.find(v => v.name === node.object.name);
+
+          if (
+            variable?.defs?.[0]?.node?.init?.type === 'CallExpression' &&
+            variable.defs[0].node.init.callee.name === 'useClerk'
+          ) {
+            context.report({
+              node,
+              messageId: 'noNavigate',
+            });
+          }
+        }
+      },
+    };
+  },
+};
+
 export default tseslint.config([
   {
     name: 'repo/ignores',
@@ -285,6 +396,22 @@ export default tseslint.config([
       'react-hooks/rules-of-hooks': 'warn',
     },
   },
+  {
+    name: 'packages/clerk-js',
+    files: ['packages/clerk-js/src/ui/**/*'],
+    plugins: {
+      'custom-rules': {
+        rules: {
+          'no-navigate-useClerk': noNavigateUseClerk,
+          'no-setActive-redirectUrl': noSetActiveRedirectUrl,
+        },
+      },
+    },
+    rules: {
+      'custom-rules/no-navigate-useClerk': 'error',
+      'custom-rules/no-setActive-redirectUrl': 'error',
+    },
+  },
   {
     name: 'packages/expo-passkeys',
     files: ['packages/expo-passkeys/src/**/*'],

integration/testUtils/userProfilePageObject.ts

@@ -66,8 +66,10 @@ export const createUserProfileComponentPageObject = (testArgs: TestArgs) => {
     typeEmailAddress: (value: string) => {
       return page.getByLabel(/Email address/i).fill(value);
     },
-    waitForUserProfileModal: () => {
-      return page.waitForSelector('.cl-modalContent > .cl-userProfile-root', { state: 'visible' });
+    waitForUserProfileModal: (state?: 'open' | 'closed') => {
+      return page.waitForSelector('.cl-modalContent:has(.cl-userProfile-root)', {
+        state: state === 'closed' ? 'detached' : 'attached',
+      });
     },
   };
   return self;

integration/tests/user-profile.test.ts

@@ -311,4 +311,56 @@ export default function Page() {
 
     expect(sessionCookieList.length).toBe(0);
   });
+
+  test('closes the modal after delete', async ({ page, context }) => {
+    const m = createTestUtils({ app });
+    const delFakeUser = m.services.users.createFakeUser({
+      withUsername: true,
+      fictionalEmail: true,
+      withPhoneNumber: true,
+    });
+    await m.services.users.createBapiUser({
+      ...delFakeUser,
+      username: undefined,
+      phoneNumber: undefined,
+    });
+
+    const u = createTestUtils({ app, page, context });
+    await u.po.signIn.goTo();
+    await u.po.signIn.waitForMounted();
+    await u.po.signIn.signInWithEmailAndInstantPassword({ email: delFakeUser.email, password: delFakeUser.password });
+    await u.po.expect.toBeSignedIn();
+
+    await u.page.goToAppHome();
+
+    await u.po.userButton.waitForMounted();
+    await u.po.userButton.toggleTrigger();
+    await u.po.userButton.triggerManageAccount();
+
+    await u.po.userProfile.waitForUserProfileModal();
+    await u.po.userProfile.switchToSecurityTab();
+
+    await u.page
+      .getByRole('button', {
+        name: /delete account/i,
+      })
+      .click();
+
+    await u.page.locator('input[name=deleteConfirmation]').fill('Delete account');
+
+    await u.page
+      .getByRole('button', {
+        name: /delete account/i,
+      })
+      .click();
+
+    await u.po.expect.toBeSignedOut();
+    await u.po.userProfile.waitForUserProfileModal('closed');
+
+    await u.page.waitForAppUrl('/');
+
+    // Make sure that the session cookie is deleted
+    const sessionCookieList = (await u.page.context().cookies()).filter(cookie => cookie.name.startsWith('__session'));
+    expect(sessionCookieList.length).toBe(0);
+  });
 });

packages/clerk-js/src/core/clerk.ts

@@ -15,6 +15,7 @@ import type {
   AuthenticateWithGoogleOneTapParams,
   AuthenticateWithMetamaskParams,
   AuthenticateWithOKXWalletParams,
+  BeforeEmitCallback,
   Clerk as ClerkInterface,
   ClerkAPIError,
   ClerkAuthenticateWithWeb3Params,
@@ -100,6 +101,7 @@ import {
 import { assertNoLegacyProp } from '../utils/assertNoLegacyProp';
 import { memoizeListenerCallback } from '../utils/memoizeStateListenerCallback';
 import { RedirectUrls } from '../utils/redirectUrls';
+import { createScopedContext } from '../utils/scopedContext';
 import { AuthCookieService } from './auth/AuthCookieService';
 import { CaptchaHeartbeat } from './auth/CaptchaHeartbeat';
 import { CLERK_SATELLITE_URL, CLERK_SUFFIXED_COOKIES, CLERK_SYNCED, ERROR_CODES } from './constants';
@@ -170,6 +172,8 @@ export class Clerk implements ClerkInterface {
   public __internal_country?: string | null;
   public telemetry: TelemetryCollector | undefined;
 
+  public __internal_setActiveContext = createScopedContext<{ beforeEmit: BeforeEmitCallback }>();
+
   protected internal_last_error: ClerkAPIError | null = null;
   // converted to protected environment to support `updateEnvironment` type assertion
   protected environment?: EnvironmentResource | null;
@@ -906,17 +910,20 @@ export class Clerk implements ClerkInterface {
     //   automatic reloading when reloading shouldn't be happening.
     const beforeUnloadTracker = this.#options.standardBrowser ? createBeforeUnloadTracker() : undefined;
     if (beforeEmit) {
-      beforeUnloadTracker?.startTracking();
-      this.#setTransitiveState();
       deprecated(
         'Clerk.setActive({beforeEmit})',
         'Use the `redirectUrl` property instead. Example `Clerk.setActive({redirectUrl:"/"})`',
       );
-      await beforeEmit(newSession);
+    }
+    const __beforeEmit = beforeEmit || this.__internal_setActiveContext.get()?.beforeEmit;
+    if (__beforeEmit) {
+      beforeUnloadTracker?.startTracking();
+      this.#setTransitiveState();
+      await __beforeEmit(newSession);
       beforeUnloadTracker?.stopTracking();
     }
 
-    if (redirectUrl && !beforeEmit) {
+    if (redirectUrl && !__beforeEmit) {
       beforeUnloadTracker?.startTracking();
       this.#setTransitiveState();
 

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

@@ -11,11 +11,11 @@ type DeleteUserFormProps = FormProps;
 export const DeleteUserForm = withCardStateProvider((props: DeleteUserFormProps) => {
   const { onReset } = props;
   const card = useCardState();
-  const { afterSignOutUrl, afterMultiSessionSingleSignOutUrl } = useSignOutContext();
+  const { navigateAfterMultiSessionSingleSignOutUrl, navigateAfterSignOut } = useSignOutContext();
   const { user } = useUser();
   const { t } = useLocalizations();
   const { otherSessions } = useMultipleSessions({ user });
-  const { setActive } = useClerk();
+  const { setActive, __internal_setActiveContext } = useClerk();
   const [deleteUserWithReverification] = useReverification(() => user?.delete());
 
   const confirmationField = useFormControl('deleteConfirmation', '', {
@@ -36,11 +36,12 @@ export const DeleteUserForm = withCardStateProvider((props: DeleteUserFormProps)
 
     try {
       await deleteUserWithReverification();
-      const redirectUrl = otherSessions.length === 0 ? afterSignOutUrl : afterMultiSessionSingleSignOutUrl;
+      const beforeEmit = otherSessions.length === 0 ? navigateAfterSignOut : navigateAfterMultiSessionSingleSignOutUrl;
 
-      return await setActive({
-        session: null,
-        redirectUrl,
+      return __internal_setActiveContext.run({ beforeEmit }, () => {
+        return setActive({
+          session: null,
+        });
       });
     } catch (e) {
       handleError(e, [], card.setError);

packages/clerk-js/src/ui/router/BaseRouter.tsx

@@ -40,6 +40,8 @@ export const BaseRouter = ({
   urlStateParam,
   children,
 }: BaseRouterProps): JSX.Element => {
+  // Disabling is acceptable since this is a Router component
+  // eslint-disable-next-line custom-rules/no-navigate-useClerk
   const { navigate: externalNavigate } = useClerk();
 
   const [routeParts, setRouteParts] = React.useState({

packages/clerk-js/src/ui/router/PathRouter.tsx

@@ -12,6 +12,8 @@ interface PathRouterProps {
 }
 
 export const PathRouter = ({ basePath, preservedParams, children }: PathRouterProps): JSX.Element | null => {
+  // Disabling is acceptable since this is a Router component
+  // eslint-disable-next-line custom-rules/no-navigate-useClerk
   const { navigate } = useClerk();
   const [stripped, setStripped] = React.useState(false);