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

Author: tmilewski

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