fix(clerk-js,types): Close modals when setActive({redirectUrl}) is called

.changeset/beige-colts-fold.md

@@ -0,0 +1,5 @@
+---
+'@clerk/clerk-react': patch
+---
+
+Exclude `__internal_addNavigationListener` from `IsomorphicClerk`.

.changeset/eighty-pigs-sniff.md

@@ -0,0 +1,5 @@
+---
+'@clerk/types': minor
+---
+
+Introduce `__internal_addNavigationListener` method the `Clerk` singleton.

.changeset/violet-fishes-provide.md

@@ -0,0 +1,5 @@
+---
+'@clerk/clerk-js': patch
+---
+
+Bug fix: Close modals when calling `Clerk.navigate()` or `Clerk.setActive({redirectUrl})`.

eslint.config.mjs

@@ -19,6 +19,75 @@ const ECMA_VERSION = 2021,
   TEST_FILES = ['**/*.test.js', '**/*.test.jsx', '**/*.test.ts', '**/*.test.tsx', '**/test/**', '**/__tests__/**'],
   TYPESCRIPT_FILES = ['**/*.cts', '**/*.mts', '**/*.ts', '**/*.tsx'];
 
+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.\nUse `useRouter().navigate` to navigate in-between flows or `setActive({ redirectUrl })`.',
+    },
+    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 +354,20 @@ 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,
+        },
+      },
+    },
+    rules: {
+      'custom-rules/no-navigate-useClerk': 'error',
+    },
+  },
   {
     name: 'packages/expo-passkeys',
     files: ['packages/expo-passkeys/src/**/*'],

integration/templates/react-vite/src/buttons/index.tsx

@@ -0,0 +1,37 @@
+import { SignInButton, SignUpButton } from '@clerk/clerk-react';
+
+export default function Home() {
+  return (
+    <main>
+      <SignInButton
+        mode='modal'
+        forceRedirectUrl='/protected'
+        signUpForceRedirectUrl='/protected'
+      >
+        Sign in button (force)
+      </SignInButton>
+
+      <SignInButton
+        mode='modal'
+        fallbackRedirectUrl='/protected'
+      >
+        Sign in button (fallback)
+      </SignInButton>
+
+      <SignUpButton
+        mode='modal'
+        forceRedirectUrl='/protected'
+        signInForceRedirectUrl='/protected'
+      >
+        Sign up button (force)
+      </SignUpButton>
+
+      <SignUpButton
+        mode='modal'
+        fallbackRedirectUrl='/protected'
+      >
+        Sign up button (fallback)
+      </SignUpButton>
+    </main>
+  );
+}

integration/templates/react-vite/src/main.tsx

@@ -18,6 +18,7 @@ import OrganizationProfile from './organization-profile';
 import OrganizationList from './organization-list';
 import CreateOrganization from './create-organization';
 import OrganizationSwitcher from './organization-switcher';
+import Buttons from './buttons';
 
 const Root = () => {
   const navigate = useNavigate();
@@ -68,6 +69,10 @@ const router = createBrowserRouter([
         path: '/protected',
         element: <Protected />,
       },
+      {
+        path: '/buttons',
+        element: <Buttons />,
+      },
       {
         path: '/custom-user-profile/*',
         element: <UserProfileCustom />,

integration/testUtils/signInPageObject.ts

@@ -24,6 +24,11 @@ export const createSignInComponentPageObject = (testArgs: TestArgs) => {
     waitForMounted: (selector = '.cl-signIn-root') => {
       return page.waitForSelector(selector, { state: 'attached' });
     },
+    waitForModal: (state?: 'open' | 'closed') => {
+      return page.waitForSelector('.cl-modalContent:has(.cl-signIn-root)', {
+        state: state === 'closed' ? 'detached' : 'attached',
+      });
+    },
     setIdentifier: (val: string) => {
       return self.getIdentifierInput().fill(val);
     },

integration/testUtils/signUpPageObject.ts

@@ -27,6 +27,11 @@ export const createSignUpComponentPageObject = (testArgs: TestArgs) => {
     waitForMounted: (selector = '.cl-signUp-root') => {
       return page.waitForSelector(selector, { state: 'attached' });
     },
+    waitForModal: (state?: 'open' | 'closed') => {
+      return page.waitForSelector('.cl-modalContent:has(.cl-signUp-root)', {
+        state: state === 'closed' ? 'detached' : 'attached',
+      });
+    },
     signUpWithOauth: (provider: string) => {
       return page.getByRole('button', { name: new RegExp(`continue with ${provider}`, 'gi') });
     },

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/oauth-flows.test.ts

@@ -1,10 +1,10 @@
-import { test } from '@playwright/test';
 import { createClerkClient } from '@clerk/backend';
+import { test } from '@playwright/test';
 
 import { appConfigs } from '../presets';
+import { instanceKeys } from '../presets/envs';
 import type { FakeUser } from '../testUtils';
 import { createTestUtils, testAgainstRunningApps } from '../testUtils';
-import { instanceKeys } from '../presets/envs';
 import { createUserService } from '../testUtils/usersService';
 
 testAgainstRunningApps({ withEnv: [appConfigs.envs.withEmailCodes] })('oauth flows @nextjs', ({ app }) => {
@@ -78,7 +78,7 @@ testAgainstRunningApps({ withEnv: [appConfigs.envs.withEmailCodes] })('oauth flo
 
     await u.page.getByText('Sign in button (force)').click();
 
-    await u.po.signIn.waitForMounted();
+    await u.po.signIn.waitForModal();
     await u.page.getByRole('button', { name: 'E2E OAuth Provider' }).click();
     await u.page.getByText('Sign in to oauth-provider').waitFor();
 
@@ -103,7 +103,7 @@ testAgainstRunningApps({ withEnv: [appConfigs.envs.withEmailCodes] })('oauth flo
 
     await u.page.getByText('Sign up button (force)').click();
 
-    await u.po.signUp.waitForMounted();
+    await u.po.signUp.waitForModal();
     await u.page.getByRole('button', { name: 'E2E OAuth Provider' }).click();
     await u.page.getByText('Sign in to oauth-provider').waitFor();
 

integration/tests/sign-in-flow.test.ts

@@ -40,6 +40,16 @@ testAgainstRunningApps({ withEnv: [appConfigs.envs.withEmailCodes] })('sign in f
     await u.po.expect.toBeSignedIn();
   });
 
+  test('(modal) sign in with email and instant password', async ({ page, context }) => {
+    const u = createTestUtils({ app, page, context });
+    await u.page.goToRelative('/buttons');
+    await u.page.getByText('Sign in button (force)').click();
+    await u.po.signIn.waitForModal();
+    await u.po.signIn.signInWithEmailAndInstantPassword({ email: fakeUser.email, password: fakeUser.password });
+    await u.po.expect.toBeSignedIn();
+    await u.po.signIn.waitForModal('closed');
+  });
+
   test('sign in with email code', async ({ page, context }) => {
     const u = createTestUtils({ app, page, context });
     await u.po.signIn.goTo();

integration/tests/sign-in-or-up-flow.test.ts

@@ -61,6 +61,20 @@ testAgainstRunningApps({ withEnv: [appConfigs.envs.withSignInOrUpFlow] })('sign-
       await u.po.expect.toBeSignedIn();
     });
 
+    test('(modal) sign in with email code', async ({ page, context }) => {
+      const u = createTestUtils({ app, page, context });
+      await u.page.goToRelative('/buttons');
+      await u.page.getByText('Sign in button (fallback)').click();
+      await u.po.signIn.waitForModal();
+      await u.po.signIn.getIdentifierInput().fill(fakeUser.email);
+      await u.po.signIn.continue();
+      await u.po.signIn.getUseAnotherMethodLink().click();
+      await u.po.signIn.getAltMethodsEmailCodeButton().click();
+      await u.po.signIn.enterTestOtpCode();
+      await u.po.expect.toBeSignedIn();
+      await u.po.signIn.waitForModal('closed');
+    });
+
     test('sign in with phone number and password', async ({ page, context }) => {
       const u = createTestUtils({ app, page, context });
       await u.po.signIn.goTo();
@@ -221,6 +235,35 @@ testAgainstRunningApps({ withEnv: [appConfigs.envs.withSignInOrUpFlow] })('sign-
       await fakeUser.deleteIfExists();
     });
 
+    test('(modal) sign up with username, email, and password', async ({ page, context }) => {
+      const u = createTestUtils({ app, page, context });
+      const fakeUser = u.services.users.createFakeUser({
+        fictionalEmail: true,
+        withPassword: true,
+        withUsername: true,
+      });
+
+      await u.page.goToRelative('/buttons');
+      await u.page.getByText('Sign in button (fallback)').click();
+      await u.po.signIn.waitForModal();
+      await u.po.signIn.setIdentifier(fakeUser.username);
+      await u.po.signIn.continue();
+
+      const prefilledUsername = u.po.signUp.getUsernameInput();
+      await expect(prefilledUsername).toHaveValue(fakeUser.username);
+
+      await u.po.signUp.setEmailAddress(fakeUser.email);
+      await u.po.signUp.setPassword(fakeUser.password);
+      await u.po.signUp.continue();
+
+      await u.po.signUp.enterTestOtpCode();
+
+      await u.po.expect.toBeSignedIn();
+      await u.po.signIn.waitForModal('closed');
+
+      await fakeUser.deleteIfExists();
+    });
+
     test('sign up, sign out and sign in again', async ({ page, context }) => {
       const u = createTestUtils({ app, page, context });
       const fakeUser = u.services.users.createFakeUser({

integration/tests/sign-up-flow.test.ts

@@ -4,7 +4,7 @@ import { appConfigs } from '../presets';
 import { createTestUtils, testAgainstRunningApps } from '../testUtils';
 
 testAgainstRunningApps({ withEnv: [appConfigs.envs.withEmailCodes] })('sign up flow @generic @nextjs', ({ app }) => {
-  test.describe.configure({ mode: 'serial' });
+  test.describe.configure({ mode: 'parallel' });
 
   test.afterAll(async () => {
     await app.teardown();
@@ -90,6 +90,37 @@ testAgainstRunningApps({ withEnv: [appConfigs.envs.withEmailCodes] })('sign up f
     await fakeUser.deleteIfExists();
   });
 
+  test('(modal) can sign up with phone number', async ({ page, context }) => {
+    const u = createTestUtils({ app, page, context });
+    const fakeUser = u.services.users.createFakeUser({
+      fictionalEmail: true,
+      withPhoneNumber: true,
+      withUsername: true,
+    });
+
+    // Open modal
+    await u.page.goToRelative('/buttons');
+    await u.page.getByText('Sign up button (fallback)').click();
+    await u.po.signUp.waitForModal();
+
+    // Fill in sign up form
+    await u.po.signUp.signUp({
+      email: fakeUser.email,
+      phoneNumber: fakeUser.phoneNumber,
+      password: fakeUser.password,
+    });
+
+    // Verify email
+    await u.po.signUp.enterTestOtpCode();
+    // Verify phone number
+    await u.po.signUp.enterTestOtpCode();
+
+    // Check if user is signed in
+    await u.po.expect.toBeSignedIn();
+    await u.po.signUp.waitForModal('closed');
+    await fakeUser.deleteIfExists();
+  });
+
   test('sign up with first name, last name, email, phone and password', async ({ page, context }) => {
     const u = createTestUtils({ app, page, context });
     const fakeUser = u.services.users.createFakeUser({