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({

.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({

.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({

.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({

.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({

.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({

.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({

.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({