feat(clerk-js): Password manager autofill OTP codes

.changeset/polite-pants-talk.md

@@ -0,0 +1,5 @@
+---
+'@clerk/clerk-js': minor
+---
+
+Password managers will now autofill OTP code verifications.

integration/templates/elements-next/src/app/otp/page.tsx

@@ -87,7 +87,6 @@ export default function OTP() {
  className='segmented-otp-with-props-wrapper flex justify-center has-[:disabled]:opacity-50'
  type='otp'
  data-testid='segmented-otp-with-props'
- passwordManagerOffset={4}
  length={4}
  render={({ value, status }) => {
  return (

integration/tests/elements/otp.test.ts

@@ -221,12 +221,5 @@ testAgainstRunningApps({ withEnv: [appConfigs.envs.withEmailCodes] })('OTP @elem
  // Check that only 4 segments are rendered
  await expect(otpSegmentsWrapper.locator('> div')).toHaveCount(4);
  });
-
- test('passwordManagerOffset', async ({ page }) => {
- const otp = page.getByTestId(otpTypes.segmentedOtpWithProps);
-
- // The computed styles are different on CI/local etc. so it's not use to check the exact value
- await expect(otp).toHaveCSS('clip-path', /inset\(0px \d+\.\d+px 0px 0px\)/i);
- });
  });
 });

packages/clerk-js/bundlewatch.config.json

@@ -5,6 +5,7 @@
  { "path": "./dist/clerk.legacy.browser.js", "maxSize": "115KB" },
  { "path": "./dist/clerk.headless*.js", "maxSize": "55KB" },
  { "path": "./dist/ui-common*.js", "maxSize": "111.8KB" },
+ { "path": "./dist/ui-common*.legacy.*.js", "maxSize": "112.1KB" },
  { "path": "./dist/vendors*.js", "maxSize": "40.2KB" },
  { "path": "./dist/coinbase*.js", "maxSize": "38KB" },
  { "path": "./dist/stripe-vendors*.js", "maxSize": "1KB" },

packages/clerk-js/src/ui/customizables/elementDescriptors.ts

@@ -98,6 +98,7 @@ export const APPEARANCE_KEYS = containsAllElementsConfigKeys([
  'otpCodeField',
  'otpCodeFieldInputs',
  'otpCodeFieldInput',
+ 'otpCodeFieldInputContainer',
  'otpCodeFieldErrorText',
  'formResendCodeLink',
 

packages/clerk-js/src/ui/elements/CodeControl.tsx

@@ -3,7 +3,7 @@ import type { PropsWithChildren } from 'react';
 import React, { useCallback } from 'react';
 
 import type { LocalizationKey } from '../customizables';
-import { descriptors, Flex, Input } from '../customizables';
+import { Box, descriptors, Flex, Input } from '../customizables';
 import { useCardState } from '../elements/contexts';
 import { useLoadingStatus } from '../hooks';
 import type { PropsOfComponent } from '../styledSystem';
@@ -160,6 +160,7 @@ export const OTPResendButton = () => {
 export const OTPCodeControl = React.forwardRef<{ reset: any }>((_, ref) => {
  const [disabled, setDisabled] = React.useState(false);
  const refs = React.useRef<Array<HTMLInputElement | null>>([]);
+ const hiddenInputRef = React.useRef<HTMLInputElement>(null);
  const firstClickRef = React.useRef(false);
 
  const { otpControl, isLoading, isDisabled, centerAlign = true } = useOTPInputContext();
@@ -169,6 +170,11 @@ export const OTPCodeControl = React.forwardRef<{ reset: any }>((_, ref) => {
  reset: () => {
  setValues(values.map(() => ''));
  setDisabled(false);
+
+ if (hiddenInputRef.current) {
+ hiddenInputRef.current.value = '';
+ }
+
  setTimeout(() => focusInputAt(0), 0);
  },
  }));
@@ -183,6 +189,13 @@ export const OTPCodeControl = React.forwardRef<{ reset: any }>((_, ref) => {
  }
  }, [feedback]);
 
+ // Update hidden input when values change
+ React.useEffect(() => {
+ if (hiddenInputRef.current) {
+ hiddenInputRef.current.value = values.join('');
+ }
+ }, [values]);
+
  const handleMultipleCharValue = ({ eventValue, inputPosition }: { eventValue: string; inputPosition: number }) => {
  const eventValues = (eventValue || '').split('');
 
@@ -274,40 +287,91 @@ export const OTPCodeControl = React.forwardRef<{ reset: any }>((_, ref) => {
  }
  };
 
+ // Handle hidden input changes (for password manager autofill)
+ const handleHiddenInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+ const value = e.target.value.replace(/\D/g, '').slice(0, length);
+ const newValues = value.split('').concat(Array.from({ length: length - value.length }, () => ''));
+ setValues(newValues);
+
+ // Focus the appropriate visible input
+ if (value.length > 0) {
+ focusInputAt(Math.min(value.length - 1, length - 1));
+ }
+ };
+
  const centerSx = centerAlign ? { justifyContent: 'center', alignItems: 'center' } : {};
 
  return (
- <Flex
- isLoading={isLoading}
- hasError={feedbackType === 'error'}
- elementDescriptor={descriptors.otpCodeFieldInputs}
- gap={2}
- sx={t => ({ direction: 'ltr', padding: t.space.$1, marginLeft: `-${t.space.$1}`, ...centerSx })}
+ <Box
+ elementDescriptor={descriptors.otpCodeFieldInputContainer}
+ sx={{ position: 'relative' }}
  >
- {values.map((value, index: number) => (
- <SingleCharInput
- elementDescriptor={descriptors.otpCodeFieldInput}
- key={index}
- value={value}
- onClick={handleOnClick(index)}
- onChange={handleOnChange(index)}
- onKeyDown={handleOnKeyDown(index)}
- onInput={handleOnInput(index)}
- onPaste={handleOnPaste(index)}
- id={`digit-${index}-field`}
- ref={node => (refs.current[index] = node)}
- autoFocus={index === 0 || undefined}
- autoComplete='one-time-code'
- aria-label={`${index === 0 ? 'Enter verification code. ' : ''}Digit ${index + 1}`}
- isDisabled={isDisabled || isLoading || disabled || feedbackType === 'success'}
- hasError={feedbackType === 'error'}
- isSuccessfullyFilled={feedbackType === 'success'}
- type='text'
- inputMode='numeric'
- name={`codeInput-${index}`}
- />
- ))}
- </Flex>
+ {/* Hidden input for password manager compatibility */}
+ <Input
+ ref={hiddenInputRef}
+ type='text'
+ autoComplete='one-time-code'
+ data-otp-hidden-input
+ inputMode='numeric'
+ pattern={`[0-9]{${length}}`}
+ minLength={length}
+ maxLength={length}
+ spellCheck={false}
+ aria-hidden='true'
+ tabIndex={-1}
+ onChange={handleHiddenInputChange}
+ onFocus={() => {
+ // When password manager focuses the hidden input, focus the first visible input
+ focusInputAt(0);
+ }}
+ sx={() => ({
+ ...common.visuallyHidden(),
+ left: '-9999px',
+ pointerEvents: 'none',
+ })}
+ />
+
+ <Flex
+ isLoading={isLoading}
+ hasError={feedbackType === 'error'}
+ elementDescriptor={descriptors.otpCodeFieldInputs}
+ gap={2}
+ sx={t => ({ direction: 'ltr', padding: t.space.$1, marginLeft: `-${t.space.$1}`, ...centerSx })}
+ role='group'
+ aria-label='Verification code input'
+ >
+ {values.map((value: string, index: number) => (
+ <SingleCharInput
+ elementDescriptor={descriptors.otpCodeFieldInput}
+ // eslint-disable-next-line react/no-array-index-key
+ key={index}
+ value={value}
+ onClick={handleOnClick(index)}
+ onChange={handleOnChange(index)}
+ onKeyDown={handleOnKeyDown(index)}
+ onInput={handleOnInput(index)}
+ onPaste={handleOnPaste(index)}
+ id={`digit-${index}-field`}
+ ref={node => (refs.current[index] = node)}
+ // eslint-disable-next-line jsx-a11y/no-autofocus
+ autoFocus={index === 0 || undefined}
+ autoComplete='off'
+ aria-label={`${index === 0 ? 'Enter verification code. ' : ''}Digit ${index + 1}`}
+ isDisabled={isDisabled || isLoading || disabled || feedbackType === 'success'}
+ hasError={feedbackType === 'error'}
+ isSuccessfullyFilled={feedbackType === 'success'}
+ type='text'
+ inputMode='numeric'
+ name={`codeInput-${index}`}
+ data-otp-segment
+ data-1p-ignore
+ data-lpignore='true'
+ maxLength={1}
+ pattern='[0-9]'
+ />
+ ))}
+ </Flex>
+ </Box>
  );
 });
 

.changeset/polite-pants-talk.md

@@ -0,0 +1,5 @@
+---
+'@clerk/clerk-js': minor
+---
+
+Password managers will now autofill OTP code verifications.

integration/templates/elements-next/src/app/otp/page.tsx

@@ -87,7 +87,6 @@ export default function OTP() {
  className='segmented-otp-with-props-wrapper flex justify-center has-[:disabled]:opacity-50'
  type='otp'
  data-testid='segmented-otp-with-props'
- passwordManagerOffset={4}
  length={4}
  render={({ value, status }) => {
  return (

integration/tests/elements/otp.test.ts

@@ -221,12 +221,5 @@ testAgainstRunningApps({ withEnv: [appConfigs.envs.withEmailCodes] })('OTP @elem
  // Check that only 4 segments are rendered
  await expect(otpSegmentsWrapper.locator('> div')).toHaveCount(4);
  });
-
- test('passwordManagerOffset', async ({ page }) => {
- const otp = page.getByTestId(otpTypes.segmentedOtpWithProps);
-
- // The computed styles are different on CI/local etc. so it's not use to check the exact value
- await expect(otp).toHaveCSS('clip-path', /inset\(0px \d+\.\d+px 0px 0px\)/i);
- });
  });
 });

packages/clerk-js/bundlewatch.config.json

@@ -5,6 +5,7 @@
  { "path": "./dist/clerk.legacy.browser.js", "maxSize": "115KB" },
  { "path": "./dist/clerk.headless*.js", "maxSize": "55KB" },
  { "path": "./dist/ui-common*.js", "maxSize": "111.8KB" },
+ { "path": "./dist/ui-common*.legacy.*.js", "maxSize": "112.1KB" },
  { "path": "./dist/vendors*.js", "maxSize": "40.2KB" },
  { "path": "./dist/coinbase*.js", "maxSize": "38KB" },
  { "path": "./dist/stripe-vendors*.js", "maxSize": "1KB" },

packages/clerk-js/src/ui/customizables/elementDescriptors.ts

@@ -98,6 +98,7 @@ export const APPEARANCE_KEYS = containsAllElementsConfigKeys([
  'otpCodeField',
  'otpCodeFieldInputs',
  'otpCodeFieldInput',
+ 'otpCodeFieldInputContainer',
  'otpCodeFieldErrorText',
  'formResendCodeLink',
 

packages/clerk-js/src/ui/elements/CodeControl.tsx

@@ -3,7 +3,7 @@ import type { PropsWithChildren } from 'react';
 import React, { useCallback } from 'react';
 
 import type { LocalizationKey } from '../customizables';
-import { descriptors, Flex, Input } from '../customizables';
+import { Box, descriptors, Flex, Input } from '../customizables';
 import { useCardState } from '../elements/contexts';
 import { useLoadingStatus } from '../hooks';
 import type { PropsOfComponent } from '../styledSystem';
@@ -160,6 +160,7 @@ export const OTPResendButton = () => {
 export const OTPCodeControl = React.forwardRef<{ reset: any }>((_, ref) => {
  const [disabled, setDisabled] = React.useState(false);
  const refs = React.useRef<Array<HTMLInputElement | null>>([]);
+ const hiddenInputRef = React.useRef<HTMLInputElement>(null);
  const firstClickRef = React.useRef(false);
 
  const { otpControl, isLoading, isDisabled, centerAlign = true } = useOTPInputContext();
@@ -169,6 +170,11 @@ export const OTPCodeControl = React.forwardRef<{ reset: any }>((_, ref) => {
  reset: () => {
  setValues(values.map(() => ''));
  setDisabled(false);
+
+ if (hiddenInputRef.current) {
+ hiddenInputRef.current.value = '';
+ }
+
  setTimeout(() => focusInputAt(0), 0);
  },
  }));
@@ -183,6 +189,13 @@ export const OTPCodeControl = React.forwardRef<{ reset: any }>((_, ref) => {
  }
  }, [feedback]);
 
+ // Update hidden input when values change
+ React.useEffect(() => {
+ if (hiddenInputRef.current) {
+ hiddenInputRef.current.value = values.join('');
+ }
+ }, [values]);
+
  const handleMultipleCharValue = ({ eventValue, inputPosition }: { eventValue: string; inputPosition: number }) => {
  const eventValues = (eventValue || '').split('');
 
@@ -274,40 +287,91 @@ export const OTPCodeControl = React.forwardRef<{ reset: any }>((_, ref) => {
  }
  };
 
+ // Handle hidden input changes (for password manager autofill)
+ const handleHiddenInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+ const value = e.target.value.replace(/\D/g, '').slice(0, length);
+ const newValues = value.split('').concat(Array.from({ length: length - value.length }, () => ''));
+ setValues(newValues);
+
+ // Focus the appropriate visible input
+ if (value.length > 0) {
+ focusInputAt(Math.min(value.length - 1, length - 1));
+ }
+ };
+
  const centerSx = centerAlign ? { justifyContent: 'center', alignItems: 'center' } : {};
 
  return (
- <Flex
- isLoading={isLoading}
- hasError={feedbackType === 'error'}
- elementDescriptor={descriptors.otpCodeFieldInputs}
- gap={2}
- sx={t => ({ direction: 'ltr', padding: t.space.$1, marginLeft: `-${t.space.$1}`, ...centerSx })}
+ <Box
+ elementDescriptor={descriptors.otpCodeFieldInputContainer}
+ sx={{ position: 'relative' }}
  >
- {values.map((value, index: number) => (
- <SingleCharInput
- elementDescriptor={descriptors.otpCodeFieldInput}
- key={index}
- value={value}
- onClick={handleOnClick(index)}
- onChange={handleOnChange(index)}
- onKeyDown={handleOnKeyDown(index)}
- onInput={handleOnInput(index)}
- onPaste={handleOnPaste(index)}
- id={`digit-${index}-field`}
- ref={node => (refs.current[index] = node)}
- autoFocus={index === 0 || undefined}
- autoComplete='one-time-code'
- aria-label={`${index === 0 ? 'Enter verification code. ' : ''}Digit ${index + 1}`}
- isDisabled={isDisabled || isLoading || disabled || feedbackType === 'success'}
- hasError={feedbackType === 'error'}
- isSuccessfullyFilled={feedbackType === 'success'}
- type='text'
- inputMode='numeric'
- name={`codeInput-${index}`}
- />
- ))}
- </Flex>
+ {/* Hidden input for password manager compatibility */}
+ <Input
+ ref={hiddenInputRef}
+ type='text'
+ autoComplete='one-time-code'
+ data-otp-hidden-input
+ inputMode='numeric'
+ pattern={`[0-9]{${length}}`}
+ minLength={length}
+ maxLength={length}
+ spellCheck={false}
+ aria-hidden='true'
+ tabIndex={-1}
+ onChange={handleHiddenInputChange}
+ onFocus={() => {
+ // When password manager focuses the hidden input, focus the first visible input
+ focusInputAt(0);
+ }}
+ sx={() => ({
+ ...common.visuallyHidden(),
+ left: '-9999px',
+ pointerEvents: 'none',
+ })}
+ />
+
+ <Flex
+ isLoading={isLoading}
+ hasError={feedbackType === 'error'}
+ elementDescriptor={descriptors.otpCodeFieldInputs}
+ gap={2}
+ sx={t => ({ direction: 'ltr', padding: t.space.$1, marginLeft: `-${t.space.$1}`, ...centerSx })}
+ role='group'
+ aria-label='Verification code input'
+ >
+ {values.map((value: string, index: number) => (
+ <SingleCharInput
+ elementDescriptor={descriptors.otpCodeFieldInput}
+ // eslint-disable-next-line react/no-array-index-key
+ key={index}
+ value={value}
+ onClick={handleOnClick(index)}
+ onChange={handleOnChange(index)}
+ onKeyDown={handleOnKeyDown(index)}
+ onInput={handleOnInput(index)}
+ onPaste={handleOnPaste(index)}
+ id={`digit-${index}-field`}
+ ref={node => (refs.current[index] = node)}
+ // eslint-disable-next-line jsx-a11y/no-autofocus
+ autoFocus={index === 0 || undefined}
+ autoComplete='off'
+ aria-label={`${index === 0 ? 'Enter verification code. ' : ''}Digit ${index + 1}`}
+ isDisabled={isDisabled || isLoading || disabled || feedbackType === 'success'}
+ hasError={feedbackType === 'error'}
+ isSuccessfullyFilled={feedbackType === 'success'}
+ type='text'
+ inputMode='numeric'
+ name={`codeInput-${index}`}
+ data-otp-segment
+ data-1p-ignore
+ data-lpignore='true'
+ maxLength={1}
+ pattern='[0-9]'
+ />
+ ))}
+ </Flex>
+ </Box>
  );
 });
 

.changeset/polite-pants-talk.md

@@ -0,0 +1,5 @@
+---
+'@clerk/clerk-js': minor
+---
+
+Password managers will now autofill OTP code verifications.

integration/templates/elements-next/src/app/otp/page.tsx

@@ -87,7 +87,6 @@ export default function OTP() {
  className='segmented-otp-with-props-wrapper flex justify-center has-[:disabled]:opacity-50'
  type='otp'
  data-testid='segmented-otp-with-props'
- passwordManagerOffset={4}
  length={4}
  render={({ value, status }) => {
  return (

integration/tests/elements/otp.test.ts

@@ -221,12 +221,5 @@ testAgainstRunningApps({ withEnv: [appConfigs.envs.withEmailCodes] })('OTP @elem
  // Check that only 4 segments are rendered
  await expect(otpSegmentsWrapper.locator('> div')).toHaveCount(4);
  });
-
- test('passwordManagerOffset', async ({ page }) => {
- const otp = page.getByTestId(otpTypes.segmentedOtpWithProps);
-
- // The computed styles are different on CI/local etc. so it's not use to check the exact value
- await expect(otp).toHaveCSS('clip-path', /inset\(0px \d+\.\d+px 0px 0px\)/i);
- });
  });
 });

packages/clerk-js/bundlewatch.config.json

@@ -5,6 +5,7 @@
  { "path": "./dist/clerk.legacy.browser.js", "maxSize": "115KB" },
  { "path": "./dist/clerk.headless*.js", "maxSize": "55KB" },
  { "path": "./dist/ui-common*.js", "maxSize": "111.8KB" },
+ { "path": "./dist/ui-common*.legacy.*.js", "maxSize": "112.1KB" },
  { "path": "./dist/vendors*.js", "maxSize": "40.2KB" },
  { "path": "./dist/coinbase*.js", "maxSize": "38KB" },
  { "path": "./dist/stripe-vendors*.js", "maxSize": "1KB" },

packages/clerk-js/src/ui/customizables/elementDescriptors.ts

@@ -98,6 +98,7 @@ export const APPEARANCE_KEYS = containsAllElementsConfigKeys([
  'otpCodeField',
  'otpCodeFieldInputs',
  'otpCodeFieldInput',
+ 'otpCodeFieldInputContainer',
  'otpCodeFieldErrorText',
  'formResendCodeLink',
 

packages/clerk-js/src/ui/elements/CodeControl.tsx

@@ -3,7 +3,7 @@ import type { PropsWithChildren } from 'react';
 import React, { useCallback } from 'react';
 
 import type { LocalizationKey } from '../customizables';
-import { descriptors, Flex, Input } from '../customizables';
+import { Box, descriptors, Flex, Input } from '../customizables';
 import { useCardState } from '../elements/contexts';
 import { useLoadingStatus } from '../hooks';
 import type { PropsOfComponent } from '../styledSystem';
@@ -160,6 +160,7 @@ export const OTPResendButton = () => {
 export const OTPCodeControl = React.forwardRef<{ reset: any }>((_, ref) => {
  const [disabled, setDisabled] = React.useState(false);
  const refs = React.useRef<Array<HTMLInputElement | null>>([]);
+ const hiddenInputRef = React.useRef<HTMLInputElement>(null);
  const firstClickRef = React.useRef(false);
 
  const { otpControl, isLoading, isDisabled, centerAlign = true } = useOTPInputContext();
@@ -169,6 +170,11 @@ export const OTPCodeControl = React.forwardRef<{ reset: any }>((_, ref) => {
  reset: () => {
  setValues(values.map(() => ''));
  setDisabled(false);
+
+ if (hiddenInputRef.current) {
+ hiddenInputRef.current.value = '';
+ }
+
  setTimeout(() => focusInputAt(0), 0);
  },
  }));
@@ -183,6 +189,13 @@ export const OTPCodeControl = React.forwardRef<{ reset: any }>((_, ref) => {
  }
  }, [feedback]);
 
+ // Update hidden input when values change
+ React.useEffect(() => {
+ if (hiddenInputRef.current) {
+ hiddenInputRef.current.value = values.join('');
+ }
+ }, [values]);
+
  const handleMultipleCharValue = ({ eventValue, inputPosition }: { eventValue: string; inputPosition: number }) => {
  const eventValues = (eventValue || '').split('');
 
@@ -274,40 +287,91 @@ export const OTPCodeControl = React.forwardRef<{ reset: any }>((_, ref) => {
  }
  };
 
+ // Handle hidden input changes (for password manager autofill)
+ const handleHiddenInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+ const value = e.target.value.replace(/\D/g, '').slice(0, length);
+ const newValues = value.split('').concat(Array.from({ length: length - value.length }, () => ''));
+ setValues(newValues);
+
+ // Focus the appropriate visible input
+ if (value.length > 0) {
+ focusInputAt(Math.min(value.length - 1, length - 1));
+ }
+ };
+
  const centerSx = centerAlign ? { justifyContent: 'center', alignItems: 'center' } : {};
 
  return (
- <Flex
- isLoading={isLoading}
- hasError={feedbackType === 'error'}
- elementDescriptor={descriptors.otpCodeFieldInputs}
- gap={2}
- sx={t => ({ direction: 'ltr', padding: t.space.$1, marginLeft: `-${t.space.$1}`, ...centerSx })}
+ <Box
+ elementDescriptor={descriptors.otpCodeFieldInputContainer}
+ sx={{ position: 'relative' }}
  >
- {values.map((value, index: number) => (
- <SingleCharInput
- elementDescriptor={descriptors.otpCodeFieldInput}
- key={index}
- value={value}
- onClick={handleOnClick(index)}
- onChange={handleOnChange(index)}
- onKeyDown={handleOnKeyDown(index)}
- onInput={handleOnInput(index)}
- onPaste={handleOnPaste(index)}
- id={`digit-${index}-field`}
- ref={node => (refs.current[index] = node)}
- autoFocus={index === 0 || undefined}
- autoComplete='one-time-code'
- aria-label={`${index === 0 ? 'Enter verification code. ' : ''}Digit ${index + 1}`}
- isDisabled={isDisabled || isLoading || disabled || feedbackType === 'success'}
- hasError={feedbackType === 'error'}
- isSuccessfullyFilled={feedbackType === 'success'}
- type='text'
- inputMode='numeric'
- name={`codeInput-${index}`}
- />
- ))}
- </Flex>
+ {/* Hidden input for password manager compatibility */}
+ <Input
+ ref={hiddenInputRef}
+ type='text'
+ autoComplete='one-time-code'
+ data-otp-hidden-input
+ inputMode='numeric'
+ pattern={`[0-9]{${length}}`}
+ minLength={length}
+ maxLength={length}
+ spellCheck={false}
+ aria-hidden='true'
+ tabIndex={-1}
+ onChange={handleHiddenInputChange}
+ onFocus={() => {
+ // When password manager focuses the hidden input, focus the first visible input
+ focusInputAt(0);
+ }}
+ sx={() => ({
+ ...common.visuallyHidden(),
+ left: '-9999px',
+ pointerEvents: 'none',
+ })}
+ />
+
+ <Flex
+ isLoading={isLoading}
+ hasError={feedbackType === 'error'}
+ elementDescriptor={descriptors.otpCodeFieldInputs}
+ gap={2}
+ sx={t => ({ direction: 'ltr', padding: t.space.$1, marginLeft: `-${t.space.$1}`, ...centerSx })}
+ role='group'
+ aria-label='Verification code input'
+ >
+ {values.map((value: string, index: number) => (
+ <SingleCharInput
+ elementDescriptor={descriptors.otpCodeFieldInput}
+ // eslint-disable-next-line react/no-array-index-key
+ key={index}
+ value={value}
+ onClick={handleOnClick(index)}
+ onChange={handleOnChange(index)}
+ onKeyDown={handleOnKeyDown(index)}
+ onInput={handleOnInput(index)}
+ onPaste={handleOnPaste(index)}
+ id={`digit-${index}-field`}
+ ref={node => (refs.current[index] = node)}
+ // eslint-disable-next-line jsx-a11y/no-autofocus
+ autoFocus={index === 0 || undefined}
+ autoComplete='off'
+ aria-label={`${index === 0 ? 'Enter verification code. ' : ''}Digit ${index + 1}`}
+ isDisabled={isDisabled || isLoading || disabled || feedbackType === 'success'}
+ hasError={feedbackType === 'error'}
+ isSuccessfullyFilled={feedbackType === 'success'}
+ type='text'
+ inputMode='numeric'
+ name={`codeInput-${index}`}
+ data-otp-segment
+ data-1p-ignore
+ data-lpignore='true'
+ maxLength={1}
+ pattern='[0-9]'
+ />
+ ))}
+ </Flex>
+ </Box>
  );
 });
 

.changeset/polite-pants-talk.md

@@ -0,0 +1,5 @@
+---
+'@clerk/clerk-js': minor
+---
+
+Password managers will now autofill OTP code verifications.

integration/templates/elements-next/src/app/otp/page.tsx

@@ -87,7 +87,6 @@ export default function OTP() {
  className='segmented-otp-with-props-wrapper flex justify-center has-[:disabled]:opacity-50'
  type='otp'
  data-testid='segmented-otp-with-props'
- passwordManagerOffset={4}
  length={4}
  render={({ value, status }) => {
  return (

integration/tests/elements/otp.test.ts

@@ -221,12 +221,5 @@ testAgainstRunningApps({ withEnv: [appConfigs.envs.withEmailCodes] })('OTP @elem
  // Check that only 4 segments are rendered
  await expect(otpSegmentsWrapper.locator('> div')).toHaveCount(4);
  });
-
- test('passwordManagerOffset', async ({ page }) => {
- const otp = page.getByTestId(otpTypes.segmentedOtpWithProps);
-
- // The computed styles are different on CI/local etc. so it's not use to check the exact value
- await expect(otp).toHaveCSS('clip-path', /inset\(0px \d+\.\d+px 0px 0px\)/i);
- });
  });
 });

packages/clerk-js/bundlewatch.config.json

@@ -5,6 +5,7 @@
  { "path": "./dist/clerk.legacy.browser.js", "maxSize": "115KB" },
  { "path": "./dist/clerk.headless*.js", "maxSize": "55KB" },
  { "path": "./dist/ui-common*.js", "maxSize": "111.8KB" },
+ { "path": "./dist/ui-common*.legacy.*.js", "maxSize": "112.1KB" },
  { "path": "./dist/vendors*.js", "maxSize": "40.2KB" },
  { "path": "./dist/coinbase*.js", "maxSize": "38KB" },
  { "path": "./dist/stripe-vendors*.js", "maxSize": "1KB" },

packages/clerk-js/src/ui/customizables/elementDescriptors.ts

@@ -98,6 +98,7 @@ export const APPEARANCE_KEYS = containsAllElementsConfigKeys([
  'otpCodeField',
  'otpCodeFieldInputs',
  'otpCodeFieldInput',
+ 'otpCodeFieldInputContainer',
  'otpCodeFieldErrorText',
  'formResendCodeLink',
 

packages/clerk-js/src/ui/elements/CodeControl.tsx

@@ -3,7 +3,7 @@ import type { PropsWithChildren } from 'react';
 import React, { useCallback } from 'react';
 
 import type { LocalizationKey } from '../customizables';
-import { descriptors, Flex, Input } from '../customizables';
+import { Box, descriptors, Flex, Input } from '../customizables';
 import { useCardState } from '../elements/contexts';
 import { useLoadingStatus } from '../hooks';
 import type { PropsOfComponent } from '../styledSystem';
@@ -160,6 +160,7 @@ export const OTPResendButton = () => {
 export const OTPCodeControl = React.forwardRef<{ reset: any }>((_, ref) => {
  const [disabled, setDisabled] = React.useState(false);
  const refs = React.useRef<Array<HTMLInputElement | null>>([]);
+ const hiddenInputRef = React.useRef<HTMLInputElement>(null);
  const firstClickRef = React.useRef(false);
 
  const { otpControl, isLoading, isDisabled, centerAlign = true } = useOTPInputContext();
@@ -169,6 +170,11 @@ export const OTPCodeControl = React.forwardRef<{ reset: any }>((_, ref) => {
  reset: () => {
  setValues(values.map(() => ''));
  setDisabled(false);
+
+ if (hiddenInputRef.current) {
+ hiddenInputRef.current.value = '';
+ }
+
  setTimeout(() => focusInputAt(0), 0);
  },
  }));
@@ -183,6 +189,13 @@ export const OTPCodeControl = React.forwardRef<{ reset: any }>((_, ref) => {
  }
  }, [feedback]);
 
+ // Update hidden input when values change
+ React.useEffect(() => {
+ if (hiddenInputRef.current) {
+ hiddenInputRef.current.value = values.join('');
+ }
+ }, [values]);
+
  const handleMultipleCharValue = ({ eventValue, inputPosition }: { eventValue: string; inputPosition: number }) => {
  const eventValues = (eventValue || '').split('');
 
@@ -274,40 +287,91 @@ export const OTPCodeControl = React.forwardRef<{ reset: any }>((_, ref) => {
  }
  };
 
+ // Handle hidden input changes (for password manager autofill)
+ const handleHiddenInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+ const value = e.target.value.replace(/\D/g, '').slice(0, length);
+ const newValues = value.split('').concat(Array.from({ length: length - value.length }, () => ''));
+ setValues(newValues);
+
+ // Focus the appropriate visible input
+ if (value.length > 0) {
+ focusInputAt(Math.min(value.length - 1, length - 1));
+ }
+ };
+
  const centerSx = centerAlign ? { justifyContent: 'center', alignItems: 'center' } : {};
 
  return (
- <Flex
- isLoading={isLoading}
- hasError={feedbackType === 'error'}
- elementDescriptor={descriptors.otpCodeFieldInputs}
- gap={2}
- sx={t => ({ direction: 'ltr', padding: t.space.$1, marginLeft: `-${t.space.$1}`, ...centerSx })}
+ <Box
+ elementDescriptor={descriptors.otpCodeFieldInputContainer}
+ sx={{ position: 'relative' }}
  >
- {values.map((value, index: number) => (
- <SingleCharInput
- elementDescriptor={descriptors.otpCodeFieldInput}
- key={index}
- value={value}
- onClick={handleOnClick(index)}
- onChange={handleOnChange(index)}
- onKeyDown={handleOnKeyDown(index)}
- onInput={handleOnInput(index)}
- onPaste={handleOnPaste(index)}
- id={`digit-${index}-field`}
- ref={node => (refs.current[index] = node)}
- autoFocus={index === 0 || undefined}
- autoComplete='one-time-code'
- aria-label={`${index === 0 ? 'Enter verification code. ' : ''}Digit ${index + 1}`}
- isDisabled={isDisabled || isLoading || disabled || feedbackType === 'success'}
- hasError={feedbackType === 'error'}
- isSuccessfullyFilled={feedbackType === 'success'}
- type='text'
- inputMode='numeric'
- name={`codeInput-${index}`}
- />
- ))}
- </Flex>
+ {/* Hidden input for password manager compatibility */}
+ <Input
+ ref={hiddenInputRef}
+ type='text'
+ autoComplete='one-time-code'
+ data-otp-hidden-input
+ inputMode='numeric'
+ pattern={`[0-9]{${length}}`}
+ minLength={length}
+ maxLength={length}
+ spellCheck={false}
+ aria-hidden='true'
+ tabIndex={-1}
+ onChange={handleHiddenInputChange}
+ onFocus={() => {
+ // When password manager focuses the hidden input, focus the first visible input
+ focusInputAt(0);
+ }}
+ sx={() => ({
+ ...common.visuallyHidden(),
+ left: '-9999px',
+ pointerEvents: 'none',
+ })}
+ />
+
+ <Flex
+ isLoading={isLoading}
+ hasError={feedbackType === 'error'}
+ elementDescriptor={descriptors.otpCodeFieldInputs}
+ gap={2}
+ sx={t => ({ direction: 'ltr', padding: t.space.$1, marginLeft: `-${t.space.$1}`, ...centerSx })}
+ role='group'
+ aria-label='Verification code input'
+ >
+ {values.map((value: string, index: number) => (
+ <SingleCharInput
+ elementDescriptor={descriptors.otpCodeFieldInput}
+ // eslint-disable-next-line react/no-array-index-key
+ key={index}
+ value={value}
+ onClick={handleOnClick(index)}
+ onChange={handleOnChange(index)}
+ onKeyDown={handleOnKeyDown(index)}
+ onInput={handleOnInput(index)}
+ onPaste={handleOnPaste(index)}
+ id={`digit-${index}-field`}
+ ref={node => (refs.current[index] = node)}
+ // eslint-disable-next-line jsx-a11y/no-autofocus
+ autoFocus={index === 0 || undefined}
+ autoComplete='off'
+ aria-label={`${index === 0 ? 'Enter verification code. ' : ''}Digit ${index + 1}`}
+ isDisabled={isDisabled || isLoading || disabled || feedbackType === 'success'}
+ hasError={feedbackType === 'error'}
+ isSuccessfullyFilled={feedbackType === 'success'}
+ type='text'
+ inputMode='numeric'
+ name={`codeInput-${index}`}
+ data-otp-segment
+ data-1p-ignore
+ data-lpignore='true'
+ maxLength={1}
+ pattern='[0-9]'
+ />
+ ))}
+ </Flex>
+ </Box>
  );
 });
 

.changeset/polite-pants-talk.md

@@ -0,0 +1,5 @@
+---
+'@clerk/clerk-js': minor
+---
+
+Password managers will now autofill OTP code verifications.

integration/templates/elements-next/src/app/otp/page.tsx

@@ -87,7 +87,6 @@ export default function OTP() {
  className='segmented-otp-with-props-wrapper flex justify-center has-[:disabled]:opacity-50'
  type='otp'
  data-testid='segmented-otp-with-props'
- passwordManagerOffset={4}
  length={4}
  render={({ value, status }) => {
  return (

integration/tests/elements/otp.test.ts

@@ -221,12 +221,5 @@ testAgainstRunningApps({ withEnv: [appConfigs.envs.withEmailCodes] })('OTP @elem
  // Check that only 4 segments are rendered
  await expect(otpSegmentsWrapper.locator('> div')).toHaveCount(4);
  });
-
- test('passwordManagerOffset', async ({ page }) => {
- const otp = page.getByTestId(otpTypes.segmentedOtpWithProps);
-
- // The computed styles are different on CI/local etc. so it's not use to check the exact value
- await expect(otp).toHaveCSS('clip-path', /inset\(0px \d+\.\d+px 0px 0px\)/i);
- });
  });
 });

packages/clerk-js/bundlewatch.config.json

@@ -5,6 +5,7 @@
  { "path": "./dist/clerk.legacy.browser.js", "maxSize": "115KB" },
  { "path": "./dist/clerk.headless*.js", "maxSize": "55KB" },
  { "path": "./dist/ui-common*.js", "maxSize": "111.8KB" },
+ { "path": "./dist/ui-common*.legacy.*.js", "maxSize": "112.1KB" },
  { "path": "./dist/vendors*.js", "maxSize": "40.2KB" },
  { "path": "./dist/coinbase*.js", "maxSize": "38KB" },
  { "path": "./dist/stripe-vendors*.js", "maxSize": "1KB" },

packages/clerk-js/src/ui/customizables/elementDescriptors.ts

@@ -98,6 +98,7 @@ export const APPEARANCE_KEYS = containsAllElementsConfigKeys([
  'otpCodeField',
  'otpCodeFieldInputs',
  'otpCodeFieldInput',
+ 'otpCodeFieldInputContainer',
  'otpCodeFieldErrorText',
  'formResendCodeLink',
 

packages/clerk-js/src/ui/elements/CodeControl.tsx

@@ -3,7 +3,7 @@ import type { PropsWithChildren } from 'react';
 import React, { useCallback } from 'react';
 
 import type { LocalizationKey } from '../customizables';
-import { descriptors, Flex, Input } from '../customizables';
+import { Box, descriptors, Flex, Input } from '../customizables';
 import { useCardState } from '../elements/contexts';
 import { useLoadingStatus } from '../hooks';
 import type { PropsOfComponent } from '../styledSystem';
@@ -160,6 +160,7 @@ export const OTPResendButton = () => {
 export const OTPCodeControl = React.forwardRef<{ reset: any }>((_, ref) => {
  const [disabled, setDisabled] = React.useState(false);
  const refs = React.useRef<Array<HTMLInputElement | null>>([]);
+ const hiddenInputRef = React.useRef<HTMLInputElement>(null);
  const firstClickRef = React.useRef(false);
 
  const { otpControl, isLoading, isDisabled, centerAlign = true } = useOTPInputContext();
@@ -169,6 +170,11 @@ export const OTPCodeControl = React.forwardRef<{ reset: any }>((_, ref) => {
  reset: () => {
  setValues(values.map(() => ''));
  setDisabled(false);
+
+ if (hiddenInputRef.current) {
+ hiddenInputRef.current.value = '';
+ }
+
  setTimeout(() => focusInputAt(0), 0);
  },
  }));
@@ -183,6 +189,13 @@ export const OTPCodeControl = React.forwardRef<{ reset: any }>((_, ref) => {
  }
  }, [feedback]);
 
+ // Update hidden input when values change
+ React.useEffect(() => {
+ if (hiddenInputRef.current) {
+ hiddenInputRef.current.value = values.join('');
+ }
+ }, [values]);
+
  const handleMultipleCharValue = ({ eventValue, inputPosition }: { eventValue: string; inputPosition: number }) => {
  const eventValues = (eventValue || '').split('');
 
@@ -274,40 +287,91 @@ export const OTPCodeControl = React.forwardRef<{ reset: any }>((_, ref) => {
  }
  };
 
+ // Handle hidden input changes (for password manager autofill)
+ const handleHiddenInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+ const value = e.target.value.replace(/\D/g, '').slice(0, length);
+ const newValues = value.split('').concat(Array.from({ length: length - value.length }, () => ''));
+ setValues(newValues);
+
+ // Focus the appropriate visible input
+ if (value.length > 0) {
+ focusInputAt(Math.min(value.length - 1, length - 1));
+ }
+ };
+
  const centerSx = centerAlign ? { justifyContent: 'center', alignItems: 'center' } : {};
 
  return (
- <Flex
- isLoading={isLoading}
- hasError={feedbackType === 'error'}
- elementDescriptor={descriptors.otpCodeFieldInputs}
- gap={2}
- sx={t => ({ direction: 'ltr', padding: t.space.$1, marginLeft: `-${t.space.$1}`, ...centerSx })}
+ <Box
+ elementDescriptor={descriptors.otpCodeFieldInputContainer}
+ sx={{ position: 'relative' }}
  >
- {values.map((value, index: number) => (
- <SingleCharInput
- elementDescriptor={descriptors.otpCodeFieldInput}
- key={index}
- value={value}
- onClick={handleOnClick(index)}
- onChange={handleOnChange(index)}
- onKeyDown={handleOnKeyDown(index)}
- onInput={handleOnInput(index)}
- onPaste={handleOnPaste(index)}
- id={`digit-${index}-field`}
- ref={node => (refs.current[index] = node)}
- autoFocus={index === 0 || undefined}
- autoComplete='one-time-code'
- aria-label={`${index === 0 ? 'Enter verification code. ' : ''}Digit ${index + 1}`}
- isDisabled={isDisabled || isLoading || disabled || feedbackType === 'success'}
- hasError={feedbackType === 'error'}
- isSuccessfullyFilled={feedbackType === 'success'}
- type='text'
- inputMode='numeric'
- name={`codeInput-${index}`}
- />
- ))}
- </Flex>
+ {/* Hidden input for password manager compatibility */}
+ <Input
+ ref={hiddenInputRef}
+ type='text'
+ autoComplete='one-time-code'
+ data-otp-hidden-input
+ inputMode='numeric'
+ pattern={`[0-9]{${length}}`}
+ minLength={length}
+ maxLength={length}
+ spellCheck={false}
+ aria-hidden='true'
+ tabIndex={-1}
+ onChange={handleHiddenInputChange}
+ onFocus={() => {
+ // When password manager focuses the hidden input, focus the first visible input
+ focusInputAt(0);
+ }}
+ sx={() => ({
+ ...common.visuallyHidden(),
+ left: '-9999px',
+ pointerEvents: 'none',
+ })}
+ />
+
+ <Flex
+ isLoading={isLoading}
+ hasError={feedbackType === 'error'}
+ elementDescriptor={descriptors.otpCodeFieldInputs}
+ gap={2}
+ sx={t => ({ direction: 'ltr', padding: t.space.$1, marginLeft: `-${t.space.$1}`, ...centerSx })}
+ role='group'
+ aria-label='Verification code input'
+ >
+ {values.map((value: string, index: number) => (
+ <SingleCharInput
+ elementDescriptor={descriptors.otpCodeFieldInput}
+ // eslint-disable-next-line react/no-array-index-key
+ key={index}
+ value={value}
+ onClick={handleOnClick(index)}
+ onChange={handleOnChange(index)}
+ onKeyDown={handleOnKeyDown(index)}
+ onInput={handleOnInput(index)}
+ onPaste={handleOnPaste(index)}
+ id={`digit-${index}-field`}
+ ref={node => (refs.current[index] = node)}
+ // eslint-disable-next-line jsx-a11y/no-autofocus
+ autoFocus={index === 0 || undefined}
+ autoComplete='off'
+ aria-label={`${index === 0 ? 'Enter verification code. ' : ''}Digit ${index + 1}`}
+ isDisabled={isDisabled || isLoading || disabled || feedbackType === 'success'}
+ hasError={feedbackType === 'error'}
+ isSuccessfullyFilled={feedbackType === 'success'}
+ type='text'
+ inputMode='numeric'
+ name={`codeInput-${index}`}
+ data-otp-segment
+ data-1p-ignore
+ data-lpignore='true'
+ maxLength={1}
+ pattern='[0-9]'
+ />
+ ))}
+ </Flex>
+ </Box>
  );
 });
 

.changeset/polite-pants-talk.md

@@ -0,0 +1,5 @@
+---
+'@clerk/clerk-js': minor
+---
+
+Password managers will now autofill OTP code verifications.

integration/templates/elements-next/src/app/otp/page.tsx

@@ -87,7 +87,6 @@ export default function OTP() {
  className='segmented-otp-with-props-wrapper flex justify-center has-[:disabled]:opacity-50'
  type='otp'
  data-testid='segmented-otp-with-props'
- passwordManagerOffset={4}
  length={4}
  render={({ value, status }) => {
  return (

integration/tests/elements/otp.test.ts

@@ -221,12 +221,5 @@ testAgainstRunningApps({ withEnv: [appConfigs.envs.withEmailCodes] })('OTP @elem
  // Check that only 4 segments are rendered
  await expect(otpSegmentsWrapper.locator('> div')).toHaveCount(4);
  });
-
- test('passwordManagerOffset', async ({ page }) => {
- const otp = page.getByTestId(otpTypes.segmentedOtpWithProps);
-
- // The computed styles are different on CI/local etc. so it's not use to check the exact value
- await expect(otp).toHaveCSS('clip-path', /inset\(0px \d+\.\d+px 0px 0px\)/i);
- });
  });
 });

packages/clerk-js/bundlewatch.config.json

@@ -5,6 +5,7 @@
  { "path": "./dist/clerk.legacy.browser.js", "maxSize": "115KB" },
  { "path": "./dist/clerk.headless*.js", "maxSize": "55KB" },
  { "path": "./dist/ui-common*.js", "maxSize": "111.8KB" },
+ { "path": "./dist/ui-common*.legacy.*.js", "maxSize": "112.1KB" },
  { "path": "./dist/vendors*.js", "maxSize": "40.2KB" },
  { "path": "./dist/coinbase*.js", "maxSize": "38KB" },
  { "path": "./dist/stripe-vendors*.js", "maxSize": "1KB" },

packages/clerk-js/src/ui/customizables/elementDescriptors.ts

@@ -98,6 +98,7 @@ export const APPEARANCE_KEYS = containsAllElementsConfigKeys([
  'otpCodeField',
  'otpCodeFieldInputs',
  'otpCodeFieldInput',
+ 'otpCodeFieldInputContainer',
  'otpCodeFieldErrorText',
  'formResendCodeLink',
 

packages/clerk-js/src/ui/elements/CodeControl.tsx

@@ -3,7 +3,7 @@ import type { PropsWithChildren } from 'react';
 import React, { useCallback } from 'react';
 
 import type { LocalizationKey } from '../customizables';
-import { descriptors, Flex, Input } from '../customizables';
+import { Box, descriptors, Flex, Input } from '../customizables';
 import { useCardState } from '../elements/contexts';
 import { useLoadingStatus } from '../hooks';
 import type { PropsOfComponent } from '../styledSystem';
@@ -160,6 +160,7 @@ export const OTPResendButton = () => {
 export const OTPCodeControl = React.forwardRef<{ reset: any }>((_, ref) => {
  const [disabled, setDisabled] = React.useState(false);
  const refs = React.useRef<Array<HTMLInputElement | null>>([]);
+ const hiddenInputRef = React.useRef<HTMLInputElement>(null);
  const firstClickRef = React.useRef(false);
 
  const { otpControl, isLoading, isDisabled, centerAlign = true } = useOTPInputContext();
@@ -169,6 +170,11 @@ export const OTPCodeControl = React.forwardRef<{ reset: any }>((_, ref) => {
  reset: () => {
  setValues(values.map(() => ''));
  setDisabled(false);
+
+ if (hiddenInputRef.current) {
+ hiddenInputRef.current.value = '';
+ }
+
  setTimeout(() => focusInputAt(0), 0);
  },
  }));
@@ -183,6 +189,13 @@ export const OTPCodeControl = React.forwardRef<{ reset: any }>((_, ref) => {
  }
  }, [feedback]);
 
+ // Update hidden input when values change
+ React.useEffect(() => {
+ if (hiddenInputRef.current) {
+ hiddenInputRef.current.value = values.join('');
+ }
+ }, [values]);
+
  const handleMultipleCharValue = ({ eventValue, inputPosition }: { eventValue: string; inputPosition: number }) => {
  const eventValues = (eventValue || '').split('');
 
@@ -274,40 +287,91 @@ export const OTPCodeControl = React.forwardRef<{ reset: any }>((_, ref) => {
  }
  };
 
+ // Handle hidden input changes (for password manager autofill)
+ const handleHiddenInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+ const value = e.target.value.replace(/\D/g, '').slice(0, length);
+ const newValues = value.split('').concat(Array.from({ length: length - value.length }, () => ''));
+ setValues(newValues);
+
+ // Focus the appropriate visible input
+ if (value.length > 0) {
+ focusInputAt(Math.min(value.length - 1, length - 1));
+ }
+ };
+
  const centerSx = centerAlign ? { justifyContent: 'center', alignItems: 'center' } : {};
 
  return (
- <Flex
- isLoading={isLoading}
- hasError={feedbackType === 'error'}
- elementDescriptor={descriptors.otpCodeFieldInputs}
- gap={2}
- sx={t => ({ direction: 'ltr', padding: t.space.$1, marginLeft: `-${t.space.$1}`, ...centerSx })}
+ <Box
+ elementDescriptor={descriptors.otpCodeFieldInputContainer}
+ sx={{ position: 'relative' }}
  >
- {values.map((value, index: number) => (
- <SingleCharInput
- elementDescriptor={descriptors.otpCodeFieldInput}
- key={index}
- value={value}
- onClick={handleOnClick(index)}
- onChange={handleOnChange(index)}
- onKeyDown={handleOnKeyDown(index)}
- onInput={handleOnInput(index)}
- onPaste={handleOnPaste(index)}
- id={`digit-${index}-field`}
- ref={node => (refs.current[index] = node)}
- autoFocus={index === 0 || undefined}
- autoComplete='one-time-code'
- aria-label={`${index === 0 ? 'Enter verification code. ' : ''}Digit ${index + 1}`}
- isDisabled={isDisabled || isLoading || disabled || feedbackType === 'success'}
- hasError={feedbackType === 'error'}
- isSuccessfullyFilled={feedbackType === 'success'}
- type='text'
- inputMode='numeric'
- name={`codeInput-${index}`}
- />
- ))}
- </Flex>
+ {/* Hidden input for password manager compatibility */}
+ <Input
+ ref={hiddenInputRef}
+ type='text'
+ autoComplete='one-time-code'
+ data-otp-hidden-input
+ inputMode='numeric'
+ pattern={`[0-9]{${length}}`}
+ minLength={length}
+ maxLength={length}
+ spellCheck={false}
+ aria-hidden='true'
+ tabIndex={-1}
+ onChange={handleHiddenInputChange}
+ onFocus={() => {
+ // When password manager focuses the hidden input, focus the first visible input
+ focusInputAt(0);
+ }}
+ sx={() => ({
+ ...common.visuallyHidden(),
+ left: '-9999px',
+ pointerEvents: 'none',
+ })}
+ />
+
+ <Flex
+ isLoading={isLoading}
+ hasError={feedbackType === 'error'}
+ elementDescriptor={descriptors.otpCodeFieldInputs}
+ gap={2}
+ sx={t => ({ direction: 'ltr', padding: t.space.$1, marginLeft: `-${t.space.$1}`, ...centerSx })}
+ role='group'
+ aria-label='Verification code input'
+ >
+ {values.map((value: string, index: number) => (
+ <SingleCharInput
+ elementDescriptor={descriptors.otpCodeFieldInput}
+ // eslint-disable-next-line react/no-array-index-key
+ key={index}
+ value={value}
+ onClick={handleOnClick(index)}
+ onChange={handleOnChange(index)}
+ onKeyDown={handleOnKeyDown(index)}
+ onInput={handleOnInput(index)}
+ onPaste={handleOnPaste(index)}
+ id={`digit-${index}-field`}
+ ref={node => (refs.current[index] = node)}
+ // eslint-disable-next-line jsx-a11y/no-autofocus
+ autoFocus={index === 0 || undefined}
+ autoComplete='off'
+ aria-label={`${index === 0 ? 'Enter verification code. ' : ''}Digit ${index + 1}`}
+ isDisabled={isDisabled || isLoading || disabled || feedbackType === 'success'}
+ hasError={feedbackType === 'error'}
+ isSuccessfullyFilled={feedbackType === 'success'}
+ type='text'
+ inputMode='numeric'
+ name={`codeInput-${index}`}
+ data-otp-segment
+ data-1p-ignore
+ data-lpignore='true'
+ maxLength={1}
+ pattern='[0-9]'
+ />
+ ))}
+ </Flex>
+ </Box>
  );
 });
 

.changeset/polite-pants-talk.md

@@ -0,0 +1,5 @@
+---
+'@clerk/clerk-js': minor
+---
+
+Password managers will now autofill OTP code verifications.

integration/templates/elements-next/src/app/otp/page.tsx

@@ -87,7 +87,6 @@ export default function OTP() {
  className='segmented-otp-with-props-wrapper flex justify-center has-[:disabled]:opacity-50'
  type='otp'
  data-testid='segmented-otp-with-props'
- passwordManagerOffset={4}
  length={4}
  render={({ value, status }) => {
  return (

integration/tests/elements/otp.test.ts

@@ -221,12 +221,5 @@ testAgainstRunningApps({ withEnv: [appConfigs.envs.withEmailCodes] })('OTP @elem
  // Check that only 4 segments are rendered
  await expect(otpSegmentsWrapper.locator('> div')).toHaveCount(4);
  });
-
- test('passwordManagerOffset', async ({ page }) => {
- const otp = page.getByTestId(otpTypes.segmentedOtpWithProps);
-
- // The computed styles are different on CI/local etc. so it's not use to check the exact value
- await expect(otp).toHaveCSS('clip-path', /inset\(0px \d+\.\d+px 0px 0px\)/i);
- });
  });
 });

packages/clerk-js/bundlewatch.config.json

@@ -5,6 +5,7 @@
  { "path": "./dist/clerk.legacy.browser.js", "maxSize": "115KB" },
  { "path": "./dist/clerk.headless*.js", "maxSize": "55KB" },
  { "path": "./dist/ui-common*.js", "maxSize": "111.8KB" },
+ { "path": "./dist/ui-common*.legacy.*.js", "maxSize": "112.1KB" },
  { "path": "./dist/vendors*.js", "maxSize": "40.2KB" },
  { "path": "./dist/coinbase*.js", "maxSize": "38KB" },
  { "path": "./dist/stripe-vendors*.js", "maxSize": "1KB" },

packages/clerk-js/src/ui/customizables/elementDescriptors.ts

@@ -98,6 +98,7 @@ export const APPEARANCE_KEYS = containsAllElementsConfigKeys([
  'otpCodeField',
  'otpCodeFieldInputs',
  'otpCodeFieldInput',
+ 'otpCodeFieldInputContainer',
  'otpCodeFieldErrorText',
  'formResendCodeLink',
 

packages/clerk-js/src/ui/elements/CodeControl.tsx

@@ -3,7 +3,7 @@ import type { PropsWithChildren } from 'react';
 import React, { useCallback } from 'react';
 
 import type { LocalizationKey } from '../customizables';
-import { descriptors, Flex, Input } from '../customizables';
+import { Box, descriptors, Flex, Input } from '../customizables';
 import { useCardState } from '../elements/contexts';
 import { useLoadingStatus } from '../hooks';
 import type { PropsOfComponent } from '../styledSystem';
@@ -160,6 +160,7 @@ export const OTPResendButton = () => {
 export const OTPCodeControl = React.forwardRef<{ reset: any }>((_, ref) => {
  const [disabled, setDisabled] = React.useState(false);
  const refs = React.useRef<Array<HTMLInputElement | null>>([]);
+ const hiddenInputRef = React.useRef<HTMLInputElement>(null);
  const firstClickRef = React.useRef(false);
 
  const { otpControl, isLoading, isDisabled, centerAlign = true } = useOTPInputContext();
@@ -169,6 +170,11 @@ export const OTPCodeControl = React.forwardRef<{ reset: any }>((_, ref) => {
  reset: () => {
  setValues(values.map(() => ''));
  setDisabled(false);
+
+ if (hiddenInputRef.current) {
+ hiddenInputRef.current.value = '';
+ }
+
  setTimeout(() => focusInputAt(0), 0);
  },
  }));
@@ -183,6 +189,13 @@ export const OTPCodeControl = React.forwardRef<{ reset: any }>((_, ref) => {
  }
  }, [feedback]);
 
+ // Update hidden input when values change
+ React.useEffect(() => {
+ if (hiddenInputRef.current) {
+ hiddenInputRef.current.value = values.join('');
+ }
+ }, [values]);
+
  const handleMultipleCharValue = ({ eventValue, inputPosition }: { eventValue: string; inputPosition: number }) => {
  const eventValues = (eventValue || '').split('');
 
@@ -274,40 +287,91 @@ export const OTPCodeControl = React.forwardRef<{ reset: any }>((_, ref) => {
  }
  };
 
+ // Handle hidden input changes (for password manager autofill)
+ const handleHiddenInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+ const value = e.target.value.replace(/\D/g, '').slice(0, length);
+ const newValues = value.split('').concat(Array.from({ length: length - value.length }, () => ''));
+ setValues(newValues);
+
+ // Focus the appropriate visible input
+ if (value.length > 0) {
+ focusInputAt(Math.min(value.length - 1, length - 1));
+ }
+ };
+
  const centerSx = centerAlign ? { justifyContent: 'center', alignItems: 'center' } : {};
 
  return (
- <Flex
- isLoading={isLoading}
- hasError={feedbackType === 'error'}
- elementDescriptor={descriptors.otpCodeFieldInputs}
- gap={2}
- sx={t => ({ direction: 'ltr', padding: t.space.$1, marginLeft: `-${t.space.$1}`, ...centerSx })}
+ <Box
+ elementDescriptor={descriptors.otpCodeFieldInputContainer}
+ sx={{ position: 'relative' }}
  >
- {values.map((value, index: number) => (
- <SingleCharInput
- elementDescriptor={descriptors.otpCodeFieldInput}
- key={index}
- value={value}
- onClick={handleOnClick(index)}
- onChange={handleOnChange(index)}
- onKeyDown={handleOnKeyDown(index)}
- onInput={handleOnInput(index)}
- onPaste={handleOnPaste(index)}
- id={`digit-${index}-field`}
- ref={node => (refs.current[index] = node)}
- autoFocus={index === 0 || undefined}
- autoComplete='one-time-code'
- aria-label={`${index === 0 ? 'Enter verification code. ' : ''}Digit ${index + 1}`}
- isDisabled={isDisabled || isLoading || disabled || feedbackType === 'success'}
- hasError={feedbackType === 'error'}
- isSuccessfullyFilled={feedbackType === 'success'}
- type='text'
- inputMode='numeric'
- name={`codeInput-${index}`}
- />
- ))}
- </Flex>
+ {/* Hidden input for password manager compatibility */}
+ <Input
+ ref={hiddenInputRef}
+ type='text'
+ autoComplete='one-time-code'
+ data-otp-hidden-input
+ inputMode='numeric'
+ pattern={`[0-9]{${length}}`}
+ minLength={length}
+ maxLength={length}
+ spellCheck={false}
+ aria-hidden='true'
+ tabIndex={-1}
+ onChange={handleHiddenInputChange}
+ onFocus={() => {
+ // When password manager focuses the hidden input, focus the first visible input
+ focusInputAt(0);
+ }}
+ sx={() => ({
+ ...common.visuallyHidden(),
+ left: '-9999px',
+ pointerEvents: 'none',
+ })}
+ />
+
+ <Flex
+ isLoading={isLoading}
+ hasError={feedbackType === 'error'}
+ elementDescriptor={descriptors.otpCodeFieldInputs}
+ gap={2}
+ sx={t => ({ direction: 'ltr', padding: t.space.$1, marginLeft: `-${t.space.$1}`, ...centerSx })}
+ role='group'
+ aria-label='Verification code input'
+ >
+ {values.map((value: string, index: number) => (
+ <SingleCharInput
+ elementDescriptor={descriptors.otpCodeFieldInput}
+ // eslint-disable-next-line react/no-array-index-key
+ key={index}
+ value={value}
+ onClick={handleOnClick(index)}
+ onChange={handleOnChange(index)}
+ onKeyDown={handleOnKeyDown(index)}
+ onInput={handleOnInput(index)}
+ onPaste={handleOnPaste(index)}
+ id={`digit-${index}-field`}
+ ref={node => (refs.current[index] = node)}
+ // eslint-disable-next-line jsx-a11y/no-autofocus
+ autoFocus={index === 0 || undefined}
+ autoComplete='off'
+ aria-label={`${index === 0 ? 'Enter verification code. ' : ''}Digit ${index + 1}`}
+ isDisabled={isDisabled || isLoading || disabled || feedbackType === 'success'}
+ hasError={feedbackType === 'error'}
+ isSuccessfullyFilled={feedbackType === 'success'}
+ type='text'
+ inputMode='numeric'
+ name={`codeInput-${index}`}
+ data-otp-segment
+ data-1p-ignore
+ data-lpignore='true'
+ maxLength={1}
+ pattern='[0-9]'
+ />
+ ))}
+ </Flex>
+ </Box>
  );
 });
 

.changeset/polite-pants-talk.md

@@ -0,0 +1,5 @@
+---
+'@clerk/clerk-js': minor
+---
+
+Password managers will now autofill OTP code verifications.

integration/templates/elements-next/src/app/otp/page.tsx

@@ -87,7 +87,6 @@ export default function OTP() {
  className='segmented-otp-with-props-wrapper flex justify-center has-[:disabled]:opacity-50'
  type='otp'
  data-testid='segmented-otp-with-props'
- passwordManagerOffset={4}
  length={4}
  render={({ value, status }) => {
  return (

integration/tests/elements/otp.test.ts

@@ -221,12 +221,5 @@ testAgainstRunningApps({ withEnv: [appConfigs.envs.withEmailCodes] })('OTP @elem
  // Check that only 4 segments are rendered
  await expect(otpSegmentsWrapper.locator('> div')).toHaveCount(4);
  });
-
- test('passwordManagerOffset', async ({ page }) => {
- const otp = page.getByTestId(otpTypes.segmentedOtpWithProps);
-
- // The computed styles are different on CI/local etc. so it's not use to check the exact value
- await expect(otp).toHaveCSS('clip-path', /inset\(0px \d+\.\d+px 0px 0px\)/i);
- });
  });
 });

packages/clerk-js/bundlewatch.config.json

@@ -5,6 +5,7 @@
  { "path": "./dist/clerk.legacy.browser.js", "maxSize": "115KB" },
  { "path": "./dist/clerk.headless*.js", "maxSize": "55KB" },
  { "path": "./dist/ui-common*.js", "maxSize": "111.8KB" },
+ { "path": "./dist/ui-common*.legacy.*.js", "maxSize": "112.1KB" },
  { "path": "./dist/vendors*.js", "maxSize": "40.2KB" },
  { "path": "./dist/coinbase*.js", "maxSize": "38KB" },
  { "path": "./dist/stripe-vendors*.js", "maxSize": "1KB" },

packages/clerk-js/src/ui/customizables/elementDescriptors.ts

@@ -98,6 +98,7 @@ export const APPEARANCE_KEYS = containsAllElementsConfigKeys([
  'otpCodeField',
  'otpCodeFieldInputs',
  'otpCodeFieldInput',
+ 'otpCodeFieldInputContainer',
  'otpCodeFieldErrorText',
  'formResendCodeLink',
 

packages/clerk-js/src/ui/elements/CodeControl.tsx

@@ -3,7 +3,7 @@ import type { PropsWithChildren } from 'react';
 import React, { useCallback } from 'react';
 
 import type { LocalizationKey } from '../customizables';
-import { descriptors, Flex, Input } from '../customizables';
+import { Box, descriptors, Flex, Input } from '../customizables';
 import { useCardState } from '../elements/contexts';
 import { useLoadingStatus } from '../hooks';
 import type { PropsOfComponent } from '../styledSystem';
@@ -160,6 +160,7 @@ export const OTPResendButton = () => {
 export const OTPCodeControl = React.forwardRef<{ reset: any }>((_, ref) => {
  const [disabled, setDisabled] = React.useState(false);
  const refs = React.useRef<Array<HTMLInputElement | null>>([]);
+ const hiddenInputRef = React.useRef<HTMLInputElement>(null);
  const firstClickRef = React.useRef(false);
 
  const { otpControl, isLoading, isDisabled, centerAlign = true } = useOTPInputContext();
@@ -169,6 +170,11 @@ export const OTPCodeControl = React.forwardRef<{ reset: any }>((_, ref) => {
  reset: () => {
  setValues(values.map(() => ''));
  setDisabled(false);
+
+ if (hiddenInputRef.current) {
+ hiddenInputRef.current.value = '';
+ }
+
  setTimeout(() => focusInputAt(0), 0);
  },
  }));
@@ -183,6 +189,13 @@ export const OTPCodeControl = React.forwardRef<{ reset: any }>((_, ref) => {
  }
  }, [feedback]);
 
+ // Update hidden input when values change
+ React.useEffect(() => {
+ if (hiddenInputRef.current) {
+ hiddenInputRef.current.value = values.join('');
+ }
+ }, [values]);
+
  const handleMultipleCharValue = ({ eventValue, inputPosition }: { eventValue: string; inputPosition: number }) => {
  const eventValues = (eventValue || '').split('');
 
@@ -274,40 +287,91 @@ export const OTPCodeControl = React.forwardRef<{ reset: any }>((_, ref) => {
  }
  };
 
+ // Handle hidden input changes (for password manager autofill)
+ const handleHiddenInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+ const value = e.target.value.replace(/\D/g, '').slice(0, length);
+ const newValues = value.split('').concat(Array.from({ length: length - value.length }, () => ''));
+ setValues(newValues);
+
+ // Focus the appropriate visible input
+ if (value.length > 0) {
+ focusInputAt(Math.min(value.length - 1, length - 1));
+ }
+ };
+
  const centerSx = centerAlign ? { justifyContent: 'center', alignItems: 'center' } : {};
 
  return (
- <Flex
- isLoading={isLoading}
- hasError={feedbackType === 'error'}
- elementDescriptor={descriptors.otpCodeFieldInputs}
- gap={2}
- sx={t => ({ direction: 'ltr', padding: t.space.$1, marginLeft: `-${t.space.$1}`, ...centerSx })}
+ <Box
+ elementDescriptor={descriptors.otpCodeFieldInputContainer}
+ sx={{ position: 'relative' }}
  >
- {values.map((value, index: number) => (
- <SingleCharInput
- elementDescriptor={descriptors.otpCodeFieldInput}
- key={index}
- value={value}
- onClick={handleOnClick(index)}
- onChange={handleOnChange(index)}
- onKeyDown={handleOnKeyDown(index)}
- onInput={handleOnInput(index)}
- onPaste={handleOnPaste(index)}
- id={`digit-${index}-field`}
- ref={node => (refs.current[index] = node)}
- autoFocus={index === 0 || undefined}
- autoComplete='one-time-code'
- aria-label={`${index === 0 ? 'Enter verification code. ' : ''}Digit ${index + 1}`}
- isDisabled={isDisabled || isLoading || disabled || feedbackType === 'success'}
- hasError={feedbackType === 'error'}
- isSuccessfullyFilled={feedbackType === 'success'}
- type='text'
- inputMode='numeric'
- name={`codeInput-${index}`}
- />
- ))}
- </Flex>
+ {/* Hidden input for password manager compatibility */}
+ <Input
+ ref={hiddenInputRef}
+ type='text'
+ autoComplete='one-time-code'
+ data-otp-hidden-input
+ inputMode='numeric'
+ pattern={`[0-9]{${length}}`}
+ minLength={length}
+ maxLength={length}
+ spellCheck={false}
+ aria-hidden='true'
+ tabIndex={-1}
+ onChange={handleHiddenInputChange}
+ onFocus={() => {
+ // When password manager focuses the hidden input, focus the first visible input
+ focusInputAt(0);
+ }}
+ sx={() => ({
+ ...common.visuallyHidden(),
+ left: '-9999px',
+ pointerEvents: 'none',
+ })}
+ />
+
+ <Flex
+ isLoading={isLoading}
+ hasError={feedbackType === 'error'}
+ elementDescriptor={descriptors.otpCodeFieldInputs}
+ gap={2}
+ sx={t => ({ direction: 'ltr', padding: t.space.$1, marginLeft: `-${t.space.$1}`, ...centerSx })}
+ role='group'
+ aria-label='Verification code input'
+ >
+ {values.map((value: string, index: number) => (
+ <SingleCharInput
+ elementDescriptor={descriptors.otpCodeFieldInput}
+ // eslint-disable-next-line react/no-array-index-key
+ key={index}
+ value={value}
+ onClick={handleOnClick(index)}
+ onChange={handleOnChange(index)}
+ onKeyDown={handleOnKeyDown(index)}
+ onInput={handleOnInput(index)}
+ onPaste={handleOnPaste(index)}
+ id={`digit-${index}-field`}
+ ref={node => (refs.current[index] = node)}
+ // eslint-disable-next-line jsx-a11y/no-autofocus
+ autoFocus={index === 0 || undefined}
+ autoComplete='off'
+ aria-label={`${index === 0 ? 'Enter verification code. ' : ''}Digit ${index + 1}`}
+ isDisabled={isDisabled || isLoading || disabled || feedbackType === 'success'}
+ hasError={feedbackType === 'error'}
+ isSuccessfullyFilled={feedbackType === 'success'}
+ type='text'
+ inputMode='numeric'
+ name={`codeInput-${index}`}
+ data-otp-segment
+ data-1p-ignore
+ data-lpignore='true'
+ maxLength={1}
+ pattern='[0-9]'
+ />
+ ))}
+ </Flex>
+ </Box>
  );
 });