feat(clerk-js): Update OTP to use a single transparent field

.changeset/chilly-cities-write.md

@@ -0,0 +1,7 @@
+---
+'@clerk/clerk-js': minor
+---
+
+Rework the OTP input to use a single transparent input (via `input-otp`) to improve password manager compatibility and iOS/Android SMS-based autofill. Removes individual digit fields; a single invisible input drives the six visual slots.
+
+If you're using `@clerk/testing`, please ensure that you're using the latest version.

.changeset/rare-books-jam.md

@@ -0,0 +1,5 @@
+---
+'@clerk/testing': minor
+---
+
+Update `enterOtpCode` to support new OTP input. Please ensure you're testing against the latest versions of each @clerk package.

integration/playwright.config.ts

@@ -13,10 +13,11 @@ export const common: PlaywrightTestConfig = {
   fullyParallel: true,
   forbidOnly: !!process.env.CI,
   retries: process.env.CI ? 5 : 0,
-  timeout: 90_000,
   maxFailures: process.env.CI ? 5 : undefined,
   workers: process.env.CI ? '50%' : '70%',
   use: {
+    actionTimeout: 10_000,
+    navigationTimeout: 30_000,
     ignoreHTTPSErrors: true,
     trace: 'retain-on-failure',
     bypassCSP: true, // We probably need to limit this to specific tests

integration/tests/components.test.ts

@@ -103,7 +103,10 @@ testAgainstRunningApps({ withEnv: [appConfigs.envs.withEmailCodes] })('component
       await u.page.goToRelative(component.path, { waitUntil: 'commit' });
       await expect(u.page.getByText(component.fallback)).toBeVisible();
 
-      await signOut({ app, page, context });
+      // eslint-disable-next-line playwright/no-conditional-in-test
+      if (component.protected) {
+        await signOut({ app, page, context });
+      }
     });
   }
 });

integration/tests/dynamic-keys.test.ts

@@ -9,6 +9,7 @@ test.describe('dynamic keys @nextjs', () => {
   let app: Application;
 
   test.beforeAll(async () => {
+    test.setTimeout(90_000); // Wait for app to be ready
     app = await appConfigs.next.appRouter
       .clone()
       .addFile(

integration/tests/elements/next-sign-in.test.ts

@@ -75,9 +75,8 @@ testAgainstRunningApps({ withEnv: [appConfigs.envs.withEmailCodes] })('Next.js S
 
     await u.page.getByRole('button', { name: /use another method/i }).click();
     await u.po.signIn.getAltMethodsEmailCodeButton().click();
-    await u.po.signIn.fillTestOtpCode('Enter email verification code');
-    await page.waitForTimeout(2000);
-    // TODO: In original test the input has autoSubmit and this step is not needed. Not used right now because it didn't work.
+    await page.getByRole('textbox', { name: 'Enter email verification code' }).click();
+    await page.keyboard.type('424242', { delay: 100 });
     await u.po.signIn.continue();
 
     await u.page.waitForAppUrl('/');
@@ -110,8 +109,8 @@ testAgainstRunningApps({ withEnv: [appConfigs.envs.withEmailCodes] })('Next.js S
     await u.page.getByRole('button', { name: /^use phone/i }).click();
     await u.po.signIn.getIdentifierInput().fill(fakeUserWithoutPassword.phoneNumber);
     await u.po.signIn.continue();
-    await u.po.signIn.fillTestOtpCode('Enter phone verification code');
-    await page.waitForTimeout(2000);
+    await page.getByRole('textbox', { name: 'Enter phone verification code' }).click();
+    await page.keyboard.type('424242', { delay: 100 });
     await u.po.signIn.continue();
 
     await u.po.expect.toBeSignedIn();
@@ -146,9 +145,8 @@ testAgainstRunningApps({ withEnv: [appConfigs.envs.withEmailCodes] })('Next.js S
     await u.po.signIn.continue();
     await u.page.getByRole('button', { name: /^forgot password/i }).click();
     await u.po.signIn.getResetPassword().click();
-    await u.po.signIn.fillTestOtpCode('Enter email verification code');
-    await page.waitForTimeout(2000);
-    // TODO: In original test the input has autoSubmit and this step is not needed. Not used right now because it didn't work.
+    await page.getByRole('textbox', { name: 'Enter email verification code' }).click();
+    await page.keyboard.type('424242', { delay: 100 });
     await u.po.signIn.continue();
 
     await u.po.signIn.setPassword(`${fakeUserWithPasword.password}_reset`);
@@ -187,9 +185,8 @@ testAgainstRunningApps({ withEnv: [appConfigs.envs.withEmailCodes] })('Next.js S
 
     await u.page.getByRole('button', { name: /use another method/i }).click();
     await u.po.signIn.getAltMethodsEmailCodeButton().click();
-    await u.po.signIn.fillTestOtpCode('Enter email verification code');
-    await page.waitForTimeout(2000);
-    // TODO: In original test the input has autoSubmit and this step is not needed. Not used right now because it didn't work.
+    await page.getByRole('textbox', { name: 'Enter email verification code' }).click();
+    await page.keyboard.type('424242', { delay: 100 });
     await u.po.signIn.continue();
 
     await u.po.expect.toBeSignedIn();

integration/tests/elements/next-sign-up.test.ts

@@ -25,9 +25,8 @@ testAgainstRunningApps({ withEnv: [appConfigs.envs.withEmailCodes] })('Next.js S
       password: fakeUser.password,
     });
 
-    await u.po.signUp.fillTestOtpCode('Enter email verification code');
-    await page.waitForTimeout(2000);
-    // TODO: In original test the input has autoSubmit and this step is not needed. Not used right now because it didn't work.
+    await page.getByRole('textbox', { name: 'Enter email verification code' }).click();
+    await page.keyboard.type('424242', { delay: 100 });
     await u.po.signUp.continue();
 
     await u.page.waitForAppUrl('/');
@@ -54,9 +53,8 @@ testAgainstRunningApps({ withEnv: [appConfigs.envs.withEmailCodes] })('Next.js S
       password: fakeUser.password,
     });
 
-    await u.po.signUp.fillTestOtpCode('Enter email verification code');
-    await page.waitForTimeout(2000);
-    // TODO: In original test the input has autoSubmit and this step is not needed. Not used right now because it didn't work.
+    await page.getByRole('textbox', { name: 'Enter email verification code' }).click();
+    await page.keyboard.type('424242', { delay: 100 });
     await u.po.signUp.continue();
 
     await u.page.waitForAppUrl('/');
@@ -104,14 +102,12 @@ testAgainstRunningApps({ withEnv: [appConfigs.envs.withEmailCodes] })('Next.js S
       password: fakeUser.password,
     });
 
-    await u.po.signUp.fillTestOtpCode('Enter phone verification code');
-    await page.waitForTimeout(2000);
-    // TODO: In original test the input has autoSubmit and this step is not needed. Not used right now because it didn't work.
+    await page.getByRole('textbox', { name: 'Enter phone verification code' }).click();
+    await page.keyboard.type('424242', { delay: 100 });
     await u.po.signUp.continue();
-    await page.waitForTimeout(2000);
-    await u.po.signUp.fillTestOtpCode('Enter email verification code');
-    await page.waitForTimeout(2000);
-    // TODO: In original test the input has autoSubmit and this step is not needed. Not used right now because it didn't work.
+
+    await page.getByRole('textbox', { name: 'Enter email verification code' }).click();
+    await page.keyboard.type('424242', { delay: 100 });
     await u.po.signUp.continue();
 
     await u.po.expect.toBeSignedIn();
@@ -135,13 +131,12 @@ testAgainstRunningApps({ withEnv: [appConfigs.envs.withEmailCodes] })('Next.js S
       password: fakeUser.password,
     });
 
-    await u.po.signUp.fillTestOtpCode('Enter phone verification code');
-    await page.waitForTimeout(2000);
-    // TODO: In original test the input has autoSubmit and this step is not needed. Not used right now because it didn't work.
+    await page.getByRole('textbox', { name: 'Enter phone verification code' }).click();
+    await page.keyboard.type('424242', { delay: 100 });
     await u.po.signUp.continue();
-    await u.po.signUp.fillTestOtpCode('Enter email verification code');
-    await page.waitForTimeout(2000);
-    // TODO: In original test the input has autoSubmit and this step is not needed. Not used right now because it didn't work.
+
+    await page.getByRole('textbox', { name: 'Enter email verification code' }).click();
+    await page.keyboard.type('424242', { delay: 100 });
     await u.po.signUp.continue();
 
     await u.po.expect.toBeSignedIn();
@@ -166,13 +161,12 @@ testAgainstRunningApps({ withEnv: [appConfigs.envs.withEmailCodes] })('Next.js S
       password: fakeUser.password,
     });
 
-    await u.po.signUp.fillTestOtpCode('Enter phone verification code');
-    await page.waitForTimeout(2000);
-    // TODO: In original test the input has autoSubmit and this step is not needed. Not used right now because it didn't work.
+    await page.getByRole('textbox', { name: 'Enter phone verification code' }).click();
+    await page.keyboard.type('424242', { delay: 100 });
     await u.po.signUp.continue();
-    await u.po.signUp.fillTestOtpCode('Enter email verification code');
-    await page.waitForTimeout(2000);
-    // TODO: In original test the input has autoSubmit and this step is not needed. Not used right now because it didn't work.
+
+    await page.getByRole('textbox', { name: 'Enter email verification code' }).click();
+    await page.keyboard.type('424242', { delay: 100 });
     await u.po.signUp.continue();
 
     await u.po.expect.toBeSignedIn();

integration/tests/global.setup.ts

@@ -5,6 +5,8 @@ import { appConfigs } from '../presets';
 import { fs, parseEnvOptions, startClerkJsHttpServer } from '../scripts';
 
 setup('start long running apps', async () => {
+  setup.setTimeout(90_000);
+
   await fs.ensureDir(constants.TMP_DIR);
 
   await startClerkJsHttpServer();

integration/tests/global.teardown.ts

@@ -6,6 +6,8 @@ import { appConfigs } from '../presets';
 import { killClerkJsHttpServer, parseEnvOptions } from '../scripts';
 
 setup('teardown long running apps', async () => {
+  setup.setTimeout(90_000);
+
   const { appUrl } = parseEnvOptions();
   await killClerkJsHttpServer();
 

integration/tests/handshake.test.ts

@@ -27,6 +27,7 @@ test.describe('Client handshake @generic', () => {
   const devBrowserCookie = '__clerk_db_jwt=needstobeset;';
 
   test.beforeAll('setup local Clerk API mock', async () => {
+    test.setTimeout(90_000); // Wait for app to be ready
     const env = appConfigs.envs.withEmailCodes
       .clone()
       .setEnvVariable('private', 'CLERK_API_URL', `http://localhost:${PORT}`);
@@ -984,6 +985,7 @@ test.describe('Client handshake with organization activation @nextjs', () => {
   let app: Application;
 
   test.beforeAll('setup local jwks server', async () => {
+    test.setTimeout(90_000); // Wait for app to be ready
     // Start the jwks server
     await new Promise<void>(resolve => jwksServer.listen(0, resolve));
     const address = jwksServer.address();
@@ -1367,6 +1369,7 @@ test.describe('Client handshake with an organization activation avoids infinite
   let thisApp: Application;
 
   test.beforeAll('setup local jwks server', async () => {
+    test.setTimeout(90_000); // Wait for app to be ready
     // Start the jwks server
     await new Promise<void>(resolve => jwksServer.listen(0, resolve));
     const address = jwksServer.address();

integration/tests/legal-consent.test.ts

@@ -57,7 +57,7 @@ testAgainstRunningApps({ withEnv: [appConfigs.envs.withLegalConsent] })(
       });
 
       // We don't need to fill in the OTP code, because the user is not signed up
-      await expect(page.getByRole('textbox', { name: /digit 1/i })).toBeHidden();
+      await expect(page.getByLabel('Enter verification code')).toBeHidden();
 
       // Check if user is signed out
       await u.po.expect.toBeSignedOut();

integration/tests/localhost/localhost-different-port-different-instance.test.ts

@@ -23,6 +23,7 @@ test.describe('multiple apps running on localhost using different Clerk instance
   let apps: Array<{ app: Application; serverUrl: string }>;
 
   test.beforeAll(async () => {
+    test.setTimeout(90_000); // Wait for apps to be ready
     apps = await Promise.all([prepareApplication('sessions-dev-1'), prepareApplication('sessions-dev-2')]);
 
     const u = apps.map(a => createTestUtils({ app: a.app }));

integration/tests/localhost/localhost-different-port-same-instance.test.ts

@@ -21,6 +21,7 @@ test.describe('multiple apps running on localhost using same Clerk instance @loc
   let apps: Array<{ app: Application; serverUrl: string }>;
 
   test.beforeAll(async () => {
+    test.setTimeout(90_000); // Wait for apps to be ready
     apps = await Promise.all([prepareApplication('sessions-dev-1'), prepareApplication('sessions-dev-1')]);
 
     const u = apps.map(a => createTestUtils({ app: a.app }));

integration/tests/localhost/localhost-switch-instance.test.ts

@@ -24,6 +24,8 @@ test.describe('switching instances on localhost same port @localhost', () => {
   });
 
   test('apps can be used without clearing the cookies after instance switch', async ({ context }) => {
+    test.setTimeout(90_000); // Wait for app to be ready
+
     // We need both apps to run on the same port
     const port = await getPort();
     // Create app and user for the 1st app

integration/tests/machine-auth/api-keys.test.ts

@@ -15,6 +15,7 @@ test.describe('Next.js API key auth within clerkMiddleware() @machine', () => {
   let fakeAPIKey: FakeAPIKey;
 
   test.beforeAll(async () => {
+    test.setTimeout(90_000); // Wait for app to be ready
     app = await appConfigs.next.appRouter
       .clone()
       .addFile(
@@ -105,6 +106,8 @@ test.describe('Next.js API key auth within routes @nextjs', () => {
   let fakeAPIKey: FakeAPIKey;
 
   test.beforeAll(async () => {
+    test.setTimeout(90_000); // Wait for app to be ready
+
     app = await appConfigs.next.appRouter
       .clone()
       .addFile(

integration/tests/machine-auth/m2m.test.ts

@@ -17,6 +17,7 @@ test.describe('machine-to-machine auth @machine', () => {
   let analyticsServerM2MToken: M2MToken;
 
   test.beforeAll(async () => {
+    test.setTimeout(90_000); // Wait for app to be ready
     const fakeCompanyName = faker.company.name();
 
     // Create primary machine using instance secret key

integration/tests/middleware-placement.test.ts

@@ -20,6 +20,7 @@ test.describe('next start - missing middleware @quickstart', () => {
   let app: Application;
 
   test.beforeAll(async () => {
+    test.setTimeout(90_000);
     app = await commonSetup.commit();
     await app.setup();
     await app.withEnv(appConfigs.envs.withEmailCodesQuickstart);
@@ -44,6 +45,7 @@ test.describe('next start - invalid middleware at root on src/ @quickstart', ()
   let app: Application;
 
   test.beforeAll(async () => {
+    test.setTimeout(90_000);
     app = await commonSetup.addFile('middleware.ts', () => middlewareFileContents).commit();
     await app.setup();
     await app.withEnv(appConfigs.envs.withEmailCodesQuickstart);
@@ -74,6 +76,7 @@ test.describe('next start - invalid middleware inside app on src/ @quickstart',
   let app: Application;
 
   test.beforeAll(async () => {
+    test.setTimeout(90_000);
     app = await commonSetup.addFile('src/app/middleware.ts', () => middlewareFileContents).commit();
     await app.setup();
     await app.withEnv(appConfigs.envs.withEmailCodesQuickstart);

integration/tests/next-account-portal/clerk-v4-ap-core-1.test.ts

@@ -12,6 +12,7 @@ test.describe('Next with ClerkJS V4 <-> Account Portal Core 1 @ap-flows', () =>
   let fakeUser: FakeUser;
 
   test.beforeAll(async () => {
+    test.setTimeout(90_000); // Wait for app to be ready
     app = await appConfigs.next.appRouterAPWithClerkNextV4.clone().commit();
     await app.setup();
     await app.withEnv(appConfigs.envs.withAPCore1ClerkV4);

integration/tests/next-account-portal/clerk-v4-ap-core-2.test.ts

@@ -12,6 +12,7 @@ test.describe('Next with ClerkJS V4 <-> Account Portal Core 2 @ap-flows', () =>
   let fakeUser: FakeUser;
 
   test.beforeAll(async () => {
+    test.setTimeout(90_000); // Wait for app to be ready
     app = await appConfigs.next.appRouterAPWithClerkNextV4.clone().commit();
     await app.setup();
     await app.withEnv(appConfigs.envs.withAPCore2ClerkV4);

integration/tests/next-account-portal/clerk-v5-ap-core-1.test.ts

@@ -12,6 +12,7 @@ test.describe('Next with ClerkJS V5 <-> Account Portal Core 1 @ap-flows', () =>
   let fakeUser: FakeUser;
 
   test.beforeAll(async () => {
+    test.setTimeout(90_000); // Wait for app to be ready
     app = await appConfigs.next.appRouterAPWithClerkNextLatest.clone().commit();
     await app.setup();
     await app.withEnv(appConfigs.envs.withAPCore1ClerkLatest);

integration/tests/next-account-portal/clerk-v5-ap-core-2.test.ts

@@ -12,6 +12,7 @@ test.describe('Next with ClerkJS V5 <-> Account Portal Core 2 @ap-flows', () =>
   let fakeUser: FakeUser;
 
   test.beforeAll(async () => {
+    test.setTimeout(90_000); // Wait for app to be ready
     app = await appConfigs.next.appRouterAPWithClerkNextLatest.clone().commit();
     await app.setup();
     await app.withEnv(appConfigs.envs.withAPCore2ClerkLatest);

integration/tests/next-account-portal/common.ts

@@ -107,7 +107,8 @@ export const testSignUp = async ({ app, page, context }: TestParams) => {
 
   // Sign up with email and password
   await u.po.signUp.signUpWithEmailAndPassword({ email: tempUser.email, password: tempUser.password });
-  await u.po.signUp.enterOtpCode('424242');
+
+  await u.po.signUp.enterTestOtpCode();
 
   // Navigate back to localhost
   await u.page.waitForAppUrl('/');

integration/tests/next-build.test.ts

@@ -28,6 +28,7 @@ test.describe('next build - provider as client component @nextjs', () => {
   let app: Application;
 
   test.beforeAll(async () => {
+    test.setTimeout(90_000); // Wait for app to be ready
     app = await appConfigs.next.appRouter
       .clone()
       .addFile(
@@ -105,6 +106,7 @@ test.describe('next build - dynamic options @nextjs', () => {
   let app: Application;
 
   test.beforeAll(async () => {
+    test.setTimeout(90_000); // Wait for app to be ready
     app = await appConfigs.next.appRouter
       .clone()
       .addFile(

integration/tests/session-tasks-eject-flow.test.ts

@@ -11,6 +11,7 @@ test.describe('session tasks eject flow @nextjs', () => {
   let user: FakeUser;
 
   test.beforeAll(async () => {
+    test.setTimeout(90_000); // Wait for app to be ready
     app = await appConfigs.next.appRouter
       .clone()
       .addFile(

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

@@ -9,6 +9,7 @@ test.describe('sign-in-or-up component initialization flow @nextjs', () => {
   let app: Application;
 
   test.beforeAll(async () => {
+    test.setTimeout(90_000); // Wait for app to be ready
     app = await appConfigs.next.appRouter.clone().commit();
     await app.setup();
     await app.withEnv(appConfigs.envs.withEmailCodes);

integration/tests/sign-in-or-up-restricted-mode.test.ts

@@ -11,6 +11,7 @@ test.describe('sign-in-or-up restricted mode @nextjs', () => {
   let fakeUser: FakeUser;
 
   test.beforeAll(async () => {
+    test.setTimeout(90_000); // Wait for app to be ready
     app = await appConfigs.next.appRouter.clone().commit();
     await app.setup();
     await app.withEnv(appConfigs.envs.withSignInOrUpwithRestrictedModeFlow);

packages/clerk-js/bundlewatch.config.json

@@ -1,12 +1,12 @@
 {
   "files": [
-    { "path": "./dist/clerk.js", "maxSize": "629KB" },
+    { "path": "./dist/clerk.js", "maxSize": "631KB" },
     { "path": "./dist/clerk.browser.js", "maxSize": "78KB" },
     { "path": "./dist/clerk.legacy.browser.js", "maxSize": "119KB" },
     { "path": "./dist/clerk.headless*.js", "maxSize": "61KB" },
     { "path": "./dist/ui-common*.js", "maxSize": "117.1KB" },
     { "path": "./dist/ui-common*.legacy.*.js", "maxSize": "118KB" },
-    { "path": "./dist/vendors*.js", "maxSize": "41KB" },
+    { "path": "./dist/vendors*.js", "maxSize": "43.78KB" },
     { "path": "./dist/coinbase*.js", "maxSize": "38KB" },
     { "path": "./dist/stripe-vendors*.js", "maxSize": "1KB" },
     { "path": "./dist/createorganization*.js", "maxSize": "5KB" },