chore(clerk-js): Rename userVerification to reverification (#4634)

Author: brkalow

.changeset/friendly-chairs-tie.md

@@ -5,10 +5,10 @@
 Drop experimental tag related to reverification.
 
 Properties of Clerk class:
-- `__experimental_openUserVerification` -> `__internal_openUserVerification`
-- `__experimental_closeUserVerification` -> `__internal_closeUserVerification`
-- `__experimental_UserVerificationProps` -> `__internal_UserVerificationProps`
-- `__experimental_UserVerificationModalProps` -> `__internal_UserVerificationModalProps`
+- `__experimental_openUserVerification` -> `__internal_openReverification`
+- `__experimental_closeUserVerification` -> `__internal_closeReverification`
+- `__experimental_UserVerificationProps` -> `__internal_ReverificationProps`
+- `__experimental_UserVerificationModalProps` -> `__internal_ReverificationModalProps`
 
 Properties of `Session`:
 - `__experimental_factorVerificationAge` -> `factorVerificationAge`
@@ -30,4 +30,4 @@ Properties of  `IntialState`:
 - `__experimental_factorVerificationAge` -> `factorVerificationAge`
 
 Localization types:
-All properties of `__experimental_userVerification` are moved to `userVerification` 
+All properties of `__experimental_userVerification` are moved to `reverification` 

.changeset/hungry-beds-prove.md

@@ -5,10 +5,10 @@
 Drop experimental tag related to reverification.
 
 Properties of Clerk class:
-- `__experimental_openUserVerification` -> `__internal_openUserVerification`
-- `__experimental_closeUserVerification` -> `__internal_closeUserVerification`
-- `__experimental_UserVerificationProps` -> `__internal_UserVerificationProps`
-- `__experimental_UserVerificationModalProps` -> `__internal_UserVerificationModalProps`
+- `__experimental_openUserVerification` -> `__internal_openReverification`
+- `__experimental_closeUserVerification` -> `__internal_closeReverification`
+- `__experimental_UserVerificationProps` -> `__internal_ReverificationProps`
+- `__experimental_UserVerificationModalProps` -> `__internal_ReverificationModalProps`
 
 Properties of `Session`:
 - `__experimental_factorVerificationAge` -> `factorVerificationAge`

.changeset/small-suits-knock.md

@@ -2,4 +2,4 @@
 '@clerk/localizations': minor
 ---
 
-Moves all properties under `__experimental_userVerification` to `userVerification`. This affects all languages.
+Moves all properties under `__experimental_userVerification` to `reverification`. This affects all languages.

.changeset/strange-days-kneel.md

@@ -0,0 +1,9 @@
+---
+'@clerk/localizations': patch
+'@clerk/clerk-js': patch
+'@clerk/shared': patch
+'@clerk/clerk-react': patch
+'@clerk/types': patch
+---
+
+Rename userVerification to reverification to align with the feature name.

packages/clerk-js/src/core/clerk.ts

@@ -425,7 +425,7 @@ export class Clerk implements ClerkInterface {
     void this.#componentControls.ensureMounted().then(controls => controls.closeModal('signIn'));
   };
 
-  public __internal_openUserVerification = (props?: __internal_UserVerificationModalProps): void => {
+  public __internal_openReverification = (props?: __internal_UserVerificationModalProps): void => {
     this.assertComponentsReady(this.#componentControls);
     if (noUserExists(this)) {
       if (this.#instanceType === 'development') {
@@ -440,7 +440,7 @@ export class Clerk implements ClerkInterface {
       .then(controls => controls.openModal('userVerification', props || {}));
   };
 
-  public __internal_closeUserVerification = (): void => {
+  public __internal_closeReverification = (): void => {
     this.assertComponentsReady(this.#componentControls);
     void this.#componentControls.ensureMounted().then(controls => controls.closeModal('userVerification'));
   };

packages/clerk-js/src/ui/components/UserVerification/AlternativeMethods.tsx

@@ -39,8 +39,8 @@ const AlternativeMethodsList = (props: AlternativeMethodListProps) => {
       <Card.Root>
         <Card.Content>
           <Header.Root showLogo>
-            <Header.Title localizationKey={localizationKeys('userVerification.alternativeMethods.title')} />
-            <Header.Subtitle localizationKey={localizationKeys('userVerification.alternativeMethods.subtitle')} />
+            <Header.Title localizationKey={localizationKeys('reverification.alternativeMethods.title')} />
+            <Header.Subtitle localizationKey={localizationKeys('reverification.alternativeMethods.subtitle')} />
           </Header.Root>
           <Card.Alert>{card.error}</Card.Alert>
           {/*TODO: extract main in its own component */}
@@ -87,9 +87,9 @@ const AlternativeMethodsList = (props: AlternativeMethodListProps) => {
 
         <Card.Footer>
           <Card.Action elementId='havingTrouble'>
-            <Card.ActionText localizationKey={localizationKeys('userVerification.alternativeMethods.actionText')} />
+            <Card.ActionText localizationKey={localizationKeys('reverification.alternativeMethods.actionText')} />
             <Card.ActionLink
-              localizationKey={localizationKeys('userVerification.alternativeMethods.actionLink')}
+              localizationKey={localizationKeys('reverification.alternativeMethods.actionLink')}
               onClick={onHavingTroubleClick}
             />
           </Card.Action>
@@ -102,15 +102,15 @@ const AlternativeMethodsList = (props: AlternativeMethodListProps) => {
 export function getButtonLabel(factor: SessionVerificationFirstFactor): LocalizationKey {
   switch (factor.strategy) {
     case 'email_code':
-      return localizationKeys('userVerification.alternativeMethods.blockButton__emailCode', {
+      return localizationKeys('reverification.alternativeMethods.blockButton__emailCode', {
         identifier: formatSafeIdentifier(factor.safeIdentifier) || '',
       });
     case 'phone_code':
-      return localizationKeys('userVerification.alternativeMethods.blockButton__phoneCode', {
+      return localizationKeys('reverification.alternativeMethods.blockButton__phoneCode', {
         identifier: formatSafeIdentifier(factor.safeIdentifier) || '',
       });
     case 'password':
-      return localizationKeys('userVerification.alternativeMethods.blockButton__password');
+      return localizationKeys('reverification.alternativeMethods.blockButton__password');
     default:
       throw `Invalid sign in strategy: "${(factor as any).strategy}"`;
   }

packages/clerk-js/src/ui/components/UserVerification/HavingTrouble.tsx

@@ -7,8 +7,8 @@ export const HavingTrouble = (props: PropsOfComponent<typeof ErrorCard>) => {
 
   return (
     <ErrorCard
-      cardTitle={localizationKeys('userVerification.alternativeMethods.getHelp.title')}
-      cardSubtitle={localizationKeys('userVerification.alternativeMethods.getHelp.content')}
+      cardTitle={localizationKeys('reverification.alternativeMethods.getHelp.title')}
+      cardSubtitle={localizationKeys('reverification.alternativeMethods.getHelp.content')}
       onBackLinkClick={onBackLinkClick}
     />
   );

packages/clerk-js/src/ui/components/UserVerification/UVFactorOneEmailCodeCard.tsx

@@ -11,10 +11,10 @@ export const UVFactorOneEmailCodeCard = (props: UVFactorOneEmailCodeCardProps) =
     <Flow.Part part='emailCode'>
       <UVFactorOneCodeForm
         {...props}
-        cardTitle={localizationKeys('userVerification.emailCode.title')}
-        cardSubtitle={localizationKeys('userVerification.emailCode.subtitle')}
-        inputLabel={localizationKeys('userVerification.emailCode.formTitle')}
-        resendButton={localizationKeys('userVerification.emailCode.resendButton')}
+        cardTitle={localizationKeys('reverification.emailCode.title')}
+        cardSubtitle={localizationKeys('reverification.emailCode.subtitle')}
+        inputLabel={localizationKeys('reverification.emailCode.formTitle')}
+        resendButton={localizationKeys('reverification.emailCode.resendButton')}
       />
     </Flow.Part>
   );

packages/clerk-js/src/ui/components/UserVerification/UVFactorOnePhoneCodeCard.tsx

@@ -11,10 +11,10 @@ export const UVFactorOnePhoneCodeCard = (props: UVFactorOnePhoneCodeCardProps) =
     <Flow.Part part='phoneCode'>
       <UVFactorOneCodeForm
         {...props}
-        cardTitle={localizationKeys('userVerification.phoneCode.title')}
-        cardSubtitle={localizationKeys('userVerification.phoneCode.subtitle')}
-        inputLabel={localizationKeys('userVerification.phoneCode.formTitle')}
-        resendButton={localizationKeys('userVerification.phoneCode.resendButton')}
+        cardTitle={localizationKeys('reverification.phoneCode.title')}
+        cardSubtitle={localizationKeys('reverification.phoneCode.subtitle')}
+        inputLabel={localizationKeys('reverification.phoneCode.formTitle')}
+        resendButton={localizationKeys('reverification.phoneCode.resendButton')}
       />
     </Flow.Part>
   );

packages/clerk-js/src/ui/components/UserVerification/UVFactorTwoAlternativeMethods.tsx

@@ -41,8 +41,8 @@ const AlternativeMethodsList = (props: AlternativeMethodsProps & { onHavingTroub
       <Card.Root>
         <Card.Content>
           <Header.Root showLogo>
-            <Header.Title localizationKey={localizationKeys('userVerification.alternativeMethods.title')} />
-            <Header.Subtitle localizationKey={localizationKeys('userVerification.alternativeMethods.subtitle')} />
+            <Header.Title localizationKey={localizationKeys('reverification.alternativeMethods.title')} />
+            <Header.Subtitle localizationKey={localizationKeys('reverification.alternativeMethods.subtitle')} />
           </Header.Root>
           <Card.Alert>{card.error}</Card.Alert>
           {/*TODO: extract main in its own component */}
@@ -76,9 +76,9 @@ const AlternativeMethodsList = (props: AlternativeMethodsProps & { onHavingTroub
 
         <Card.Footer>
           <Card.Action elementId='havingTrouble'>
-            <Card.ActionText localizationKey={localizationKeys('userVerification.alternativeMethods.actionText')} />
+            <Card.ActionText localizationKey={localizationKeys('reverification.alternativeMethods.actionText')} />
             <Card.ActionLink
-              localizationKey={localizationKeys('userVerification.alternativeMethods.actionLink')}
+              localizationKey={localizationKeys('reverification.alternativeMethods.actionLink')}
               onClick={onHavingTroubleClick}
             />
           </Card.Action>
@@ -91,13 +91,13 @@ const AlternativeMethodsList = (props: AlternativeMethodsProps & { onHavingTroub
 export function getButtonLabel(factor: SessionVerificationSecondFactor): LocalizationKey {
   switch (factor.strategy) {
     case 'phone_code':
-      return localizationKeys('userVerification.alternativeMethods.blockButton__phoneCode', {
+      return localizationKeys('reverification.alternativeMethods.blockButton__phoneCode', {
         identifier: formatSafeIdentifier(factor.safeIdentifier) || '',
       });
     case 'totp':
-      return localizationKeys('userVerification.alternativeMethods.blockButton__totp');
+      return localizationKeys('reverification.alternativeMethods.blockButton__totp');
     case 'backup_code':
-      return localizationKeys('userVerification.alternativeMethods.blockButton__backupCode');
+      return localizationKeys('reverification.alternativeMethods.blockButton__backupCode');
     default:
       throw `Invalid verification strategy: "${(factor as any).strategy}"`;
   }

packages/clerk-js/src/ui/components/UserVerification/UVFactorTwoBackupCodeCard.tsx

@@ -34,8 +34,8 @@ export const UVFactorTwoBackupCodeCard = (props: UVFactorTwoBackupCodeCardProps)
     <Card.Root>
       <Card.Content>
         <Header.Root showLogo>
-          <Header.Title localizationKey={localizationKeys('userVerification.backupCodeMfa.title')} />
-          <Header.Subtitle localizationKey={localizationKeys('userVerification.backupCodeMfa.subtitle')} />
+          <Header.Title localizationKey={localizationKeys('reverification.backupCodeMfa.title')} />
+          <Header.Subtitle localizationKey={localizationKeys('reverification.backupCodeMfa.subtitle')} />
         </Header.Root>
         <Card.Alert>{card.error}</Card.Alert>
         <Col

packages/clerk-js/src/ui/components/UserVerification/UVFactorTwoPhoneCodeCard.tsx

@@ -19,10 +19,10 @@ export const UVFactorTwoPhoneCodeCard = (props: UVFactorTwoPhoneCodeCardProps) =
     <Flow.Part part='phoneCode2Fa'>
       <UVFactorTwoCodeForm
         {...props}
-        cardTitle={localizationKeys('userVerification.phoneCodeMfa.title')}
-        cardSubtitle={localizationKeys('userVerification.phoneCodeMfa.subtitle')}
-        inputLabel={localizationKeys('userVerification.phoneCodeMfa.formTitle')}
-        resendButton={localizationKeys('userVerification.phoneCodeMfa.resendButton')}
+        cardTitle={localizationKeys('reverification.phoneCodeMfa.title')}
+        cardSubtitle={localizationKeys('reverification.phoneCodeMfa.subtitle')}
+        inputLabel={localizationKeys('reverification.phoneCodeMfa.formTitle')}
+        resendButton={localizationKeys('reverification.phoneCodeMfa.resendButton')}
         prepare={prepare}
       />
     </Flow.Part>

packages/clerk-js/src/ui/components/UserVerification/UserVerificationFactorOne.tsx

@@ -77,9 +77,9 @@ export function _UserVerificationFactorOne(): JSX.Element | null {
   if (!currentFactor) {
     return (
       <ErrorCard
-        cardTitle={localizationKeys('userVerification.noAvailableMethods.title')}
-        cardSubtitle={localizationKeys('userVerification.noAvailableMethods.subtitle')}
-        message={localizationKeys('userVerification.noAvailableMethods.message')}
+        cardTitle={localizationKeys('reverification.noAvailableMethods.title')}
+        cardSubtitle={localizationKeys('reverification.noAvailableMethods.subtitle')}
+        message={localizationKeys('reverification.noAvailableMethods.message')}
         shouldNavigateBack={false}
       />
     );

packages/clerk-js/src/ui/components/UserVerification/UserVerificationFactorOnePassword.tsx

@@ -47,8 +47,8 @@ export function UserVerificationFactorOnePasswordCard(props: UserVerificationFac
       <Card.Root>
         <Card.Content>
           <Header.Root showLogo>
-            <Header.Title localizationKey={localizationKeys('userVerification.password.title')} />
-            <Header.Subtitle localizationKey={localizationKeys('userVerification.password.subtitle')} />
+            <Header.Title localizationKey={localizationKeys('reverification.password.title')} />
+            <Header.Subtitle localizationKey={localizationKeys('reverification.password.subtitle')} />
           </Header.Root>
           <Card.Alert>{card.error}</Card.Alert>
           <Col
@@ -80,8 +80,8 @@ export function UserVerificationFactorOnePasswordCard(props: UserVerificationFac
               <Card.ActionLink
                 localizationKey={localizationKeys(
                   onShowAlternativeMethodsClick
-                    ? 'userVerification.password.actionLink'
-                    : 'userVerification.alternativeMethods.actionLink',
+                    ? 'reverification.password.actionLink'
+                    : 'reverification.alternativeMethods.actionLink',
                 )}
                 onClick={onShowAlternativeMethodsClick || toggleHavingTrouble}
               />

packages/clerk-js/src/ui/components/UserVerification/UserVerificationFactorTwoTOTP.tsx

@@ -11,9 +11,9 @@ export function UserVerificationFactorTwoTOTP(props: UVFactorTwoTOTPCardProps):
     <Flow.Part part='totp2Fa'>
       <UVFactorTwoCodeForm
         {...props}
-        cardTitle={localizationKeys('userVerification.totpMfa.title')}
-        cardSubtitle={localizationKeys('userVerification.totpMfa.subtitle')}
-        inputLabel={localizationKeys('userVerification.totpMfa.formTitle')}
+        cardTitle={localizationKeys('reverification.totpMfa.title')}
+        cardSubtitle={localizationKeys('reverification.totpMfa.subtitle')}
+        inputLabel={localizationKeys('reverification.totpMfa.formTitle')}
       />
     </Flow.Part>
   );

packages/clerk-js/src/ui/components/UserVerification/__tests__/UVFactorOne.test.tsx

@@ -27,8 +27,8 @@ describe('UserVerificationFactorOne', () => {
     const { getByLabelText, getByText } = render(<UserVerificationFactorOne />, { wrapper });
 
     await waitFor(() => {
-      getByText('Enter your password');
-      getByText('Enter the password associated with your account');
+      getByText('Verification required');
+      getByText('Enter your password to continue');
       getByLabelText(/^password/i);
     });
   });
@@ -46,7 +46,7 @@ describe('UserVerificationFactorOne', () => {
     const { getByLabelText, getByText } = render(<UserVerificationFactorOne />, { wrapper });
 
     await waitFor(() => {
-      getByText('Check your email');
+      getByText('Verification required');
       getByLabelText(/Enter verification code/i);
     });
 
@@ -66,7 +66,7 @@ describe('UserVerificationFactorOne', () => {
     const { getByLabelText, getByText } = render(<UserVerificationFactorOne />, { wrapper });
 
     await waitFor(() => {
-      getByText('Check your phone');
+      getByText('Verification required');
       getByLabelText(/Enter verification code/i);
     });
 
@@ -93,7 +93,7 @@ describe('UserVerificationFactorOne', () => {
 
       const { userEvent, getByLabelText, getByText } = render(<UserVerificationFactorOne />, { wrapper });
 
-      await waitFor(() => getByText('Enter your password'));
+      await waitFor(() => getByText('Verification required'));
       await userEvent.type(getByLabelText(/^password/i), 'testtest');
       await userEvent.click(getByText('Continue'));
 
@@ -123,7 +123,7 @@ describe('UserVerificationFactorOne', () => {
 
       const { userEvent, getByLabelText, getByText } = render(<UserVerificationFactorOne />, { wrapper });
 
-      await waitFor(() => getByText('Enter your password'));
+      await waitFor(() => getByText('Verification required'));
       await userEvent.type(getByLabelText(/^password/i), 'testtest');
       await userEvent.click(screen.getByText('Continue'));
 

packages/clerk-js/src/ui/components/UserVerification/__tests__/UVFactorTwo.test.tsx

@@ -33,7 +33,7 @@ describe('UserVerificationFactorTwo', () => {
     const { getByText, getAllByLabelText } = render(<UserVerificationFactorTwo />, { wrapper });
 
     await waitFor(() => {
-      getByText('Check your phone');
+      getByText('Verification required');
       const inputs = getAllByLabelText(/digit/i);
       expect(inputs.length).toBe(6);
     });
@@ -55,8 +55,8 @@ describe('UserVerificationFactorTwo', () => {
     const { getByLabelText, getByText } = render(<UserVerificationFactorTwo />, { wrapper });
 
     await waitFor(() => {
-      getByText('Two-step verification');
-      getByText('To continue, please enter the verification code generated by your authenticator app');
+      getByText('Verification required');
+      getByText('Enter the code generated by your authenticator app to continue');
       getByLabelText(/Enter verification code/i);
     });
   });
@@ -78,7 +78,7 @@ describe('UserVerificationFactorTwo', () => {
 
     await waitFor(() => {
       getByText('Enter a backup code');
-      getByText('Your backup code is the one you got when setting up two-step authentication.');
+      getByText('Enter the backup code you received when setting up two-step authentication');
       getByLabelText(/Backup code/i);
     });
   });
@@ -123,7 +123,7 @@ describe('UserVerificationFactorTwo', () => {
       await runFakeTimers(async timers => {
         const { userEvent, getByLabelText, getByText } = render(<UserVerificationFactorTwo />, { wrapper });
 
-        await waitFor(() => getByText('Check your phone'));
+        await waitFor(() => getByText('Verification required'));
 
         await userEvent.type(getByLabelText(/Enter verification code/i), '123456');
         timers.runOnlyPendingTimers();

packages/localizations/src/ar-SA.ts

@@ -846,7 +846,7 @@ export const arSA: LocalizationResource = {
       web3WalletButtonsBlockButton: undefined,
     },
   },
-  userVerification: {
+  reverification: {
     alternativeMethods: {
       actionLink: undefined,
       actionText: undefined,

packages/localizations/src/be-BY.ts

@@ -859,7 +859,7 @@ export const beBY: LocalizationResource = {
       web3WalletButtonsBlockButton: undefined,
     },
   },
-  userVerification: {
+  reverification: {
     alternativeMethods: {
       actionLink: undefined,
       actionText: undefined,

packages/localizations/src/bg-BG.ts

@@ -853,7 +853,7 @@ export const bgBG: LocalizationResource = {
       web3WalletButtonsBlockButton: undefined,
     },
   },
-  userVerification: {
+  reverification: {
     alternativeMethods: {
       actionLink: undefined,
       actionText: undefined,

packages/localizations/src/cs-CZ.ts

@@ -849,7 +849,7 @@ export const csCZ: LocalizationResource = {
       web3WalletButtonsBlockButton: undefined,
     },
   },
-  userVerification: {
+  reverification: {
     alternativeMethods: {
       actionLink: undefined,
       actionText: undefined,

packages/localizations/src/da-DK.ts

@@ -851,7 +851,7 @@ export const daDK: LocalizationResource = {
       web3WalletButtonsBlockButton: undefined,
     },
   },
-  userVerification: {
+  reverification: {
     alternativeMethods: {
       actionLink: undefined,
       actionText: undefined,