@okta/okta-signin-widget 7.16.0 → 7.16.1

package/src/v3/src/transformer/selectAuthenticator/utils.test.ts

@@ -11,7 +11,7 @@
  */
 
 import { Input } from '@okta/okta-auth-js';
-import { IdxOption } from '@okta/okta-auth-js/types/lib/idx/types/idx-js';
+import { IdxAuthenticator, IdxOption } from '@okta/okta-auth-js/types/lib/idx/types/idx-js';
 import { AUTHENTICATOR_ENROLLMENT_DESCR_KEY_MAP, AUTHENTICATOR_KEY, IDX_STEP } from 'src/constants';
 import { ButtonType } from 'src/types';
 
@@ -23,7 +23,7 @@ import {
 } from './utils';
 
 describe('Select Authenticator Utility Tests', () => {
-  const stepName = IDX_STEP.SELECT_AUTHENTICATOR_ENROLL;
+  const stepName = IDX_STEP.SELECT_AUTHENTICATOR_AUTHENTICATE;
   describe('getAppAuthenticatorMethodButtonElements Tests', () => {
     it('should return an empty array when an empty array of options is provided', () => {
       expect(getAppAuthenticatorMethodButtonElements({ name: 'authenticator' }, stepName)).toEqual([]);
@@ -45,44 +45,42 @@ describe('Select Authenticator Utility Tests', () => {
       expect(getAppAuthenticatorMethodButtonElements(authenticator, stepName)).toEqual([
         {
           type: 'AuthenticatorButton',
-          label: options[0].label,
+          label: 'oie.okta_verify.label',
           id: 'auth_btn_okta_verify_totp',
-          noTranslate: false,
           options: {
             key: AUTHENTICATOR_KEY.OV,
             ctaLabel: 'oie.verify.authenticator.button.text',
             includeData: true,
             includeImmutableData: false,
-            step: 'select-authenticator-enroll',
+            step: 'select-authenticator-authenticate',
             type: ButtonType.BUTTON,
             actionParams: {
               'authenticator.id': 'abcde1234',
               'authenticator.methodType': options[0].value,
             },
-            description: 'oie.okta_verify.label',
             ariaLabel: 'oie.select.authenticator.okta_verify.totp.label',
+            description: options[0].label,
             dataSe: `okta_verify-${options[0].value}`,
             iconName: 'okta_verify_0',
           },
         },
         {
           type: 'AuthenticatorButton',
-          label: options[1].label,
+          label: 'oie.okta_verify.label',
           id: 'auth_btn_okta_verify_push',
-          noTranslate: false,
           options: {
             key: AUTHENTICATOR_KEY.OV,
             ctaLabel: 'oie.verify.authenticator.button.text',
             includeData: true,
             includeImmutableData: false,
-            step: 'select-authenticator-enroll',
+            step: 'select-authenticator-authenticate',
             type: ButtonType.BUTTON,
             actionParams: {
               'authenticator.id': 'abcde1234',
               'authenticator.methodType': options[1].value,
             },
-            description: 'oie.okta_verify.label',
             ariaLabel: 'oie.select.authenticator.okta_verify.push.label',
+            description: options[1].label,
             dataSe: `okta_verify-${options[1].value}`,
             iconName: 'okta_verify_1',
           },
@@ -112,66 +110,63 @@ describe('Select Authenticator Utility Tests', () => {
       )).toEqual([
         {
           type: 'AuthenticatorButton',
-          label: options[2].label,
+          label: 'oie.okta_verify.label',
           id: 'auth_btn_okta_verify_signed_nonce',
-          noTranslate: false,
           options: {
             key: AUTHENTICATOR_KEY.OV,
             ctaLabel: 'oie.verify.authenticator.button.text',
             includeData: true,
             includeImmutableData: false,
-            step: 'select-authenticator-enroll',
+            step: 'select-authenticator-authenticate',
             type: ButtonType.BUTTON,
             actionParams: {
               'authenticator.id': 'abcde1234',
               'authenticator.methodType': options[2].value,
             },
-            description: 'oie.okta_verify.label',
             ariaLabel: 'oie.select.authenticator.okta_verify.signed_nonce.label',
+            description: options[2].label,
             dataSe: `okta_verify-${options[2].value}`,
             iconName: 'okta_verify_2',
           },
         },
         {
           type: 'AuthenticatorButton',
-          label: options[0].label,
+          label: 'oie.okta_verify.label',
           id: 'auth_btn_okta_verify_totp',
-          noTranslate: false,
           options: {
             key: AUTHENTICATOR_KEY.OV,
             ctaLabel: 'oie.verify.authenticator.button.text',
             includeData: true,
             includeImmutableData: false,
-            step: 'select-authenticator-enroll',
+            step: 'select-authenticator-authenticate',
             type: ButtonType.BUTTON,
             actionParams: {
               'authenticator.id': 'abcde1234',
               'authenticator.methodType': options[0].value,
             },
-            description: 'oie.okta_verify.label',
             ariaLabel: 'oie.select.authenticator.okta_verify.totp.label',
+            description: options[0].label,
             dataSe: `okta_verify-${options[0].value}`,
             iconName: 'okta_verify_0',
           },
         },
         {
           type: 'AuthenticatorButton',
-          label: options[1].label,
+          label: 'oie.okta_verify.label',
           id: 'auth_btn_okta_verify_push',
-          noTranslate: false,
           options: {
             key: AUTHENTICATOR_KEY.OV,
             ctaLabel: 'oie.verify.authenticator.button.text',
             includeData: true,
             includeImmutableData: false,
-            step: 'select-authenticator-enroll',
+            step: 'select-authenticator-authenticate',
             type: ButtonType.BUTTON,
             actionParams: {
               'authenticator.id': 'abcde1234',
               'authenticator.methodType': options[1].value,
             },
-            description: 'oie.okta_verify.label',
             ariaLabel: 'oie.select.authenticator.okta_verify.push.label',
+            description: options[1].label,
             dataSe: `okta_verify-${options[1].value}`,
             iconName: 'okta_verify_1',
           },
@@ -250,7 +245,7 @@ describe('Select Authenticator Utility Tests', () => {
               id: '',
               type: '',
               methods: [{ type: '' }],
-              displayName: '',
+              displayName: 'DisplayName',
               key: AUTHENTICATOR_KEY[key],
               profile: {},
             },
@@ -271,7 +266,15 @@ describe('Select Authenticator Utility Tests', () => {
         const currentOption = authenticatorOptionValues
           .find(({ options: { key: authKey } }) => authKey === option.relatesTo?.key);
         expect(currentOption?.options.key).toBe(option.relatesTo?.key);
-        expect(currentOption?.label).toBe(option.label);
+        let expectedLabel;
+        if (option.relatesTo?.key === AUTHENTICATOR_KEY.CUSTOM_APP) {
+          expectedLabel = 'DisplayName';
+        } else if (option.relatesTo?.key === AUTHENTICATOR_KEY.OV) {
+          expectedLabel = 'oie.okta_verify.label';
+        } else {
+          expectedLabel = option.label;
+        }
+        expect(currentOption?.label).toBe(expectedLabel);
         expect(currentOption?.options.ctaLabel)
           .toBe('oie.verify.authenticator.button.text');
       });
@@ -352,11 +355,13 @@ describe('Select Authenticator Utility Tests', () => {
       expect(authenticatorOptionValues).toMatchSnapshot();
       expect(authenticatorOptionValues.length).toBe(2);
       expect(authenticatorOptionValues[0].options.key).toBe(AUTHENTICATOR_KEY.OV);
-      expect(authenticatorOptionValues[0].label).toBe('Code');
+      expect(authenticatorOptionValues[0].label).toBe('oie.okta_verify.label');
+      expect(authenticatorOptionValues[0].options.description).toBe('Code');
       expect(authenticatorOptionValues[0].options.ctaLabel).toBe('oie.verify.authenticator.button.text');
       expect(authenticatorOptionValues[0].options.actionParams?.['authenticator.methodType']).toBe('totp');
       expect(authenticatorOptionValues[1].options.key).toBe(AUTHENTICATOR_KEY.OV);
-      expect(authenticatorOptionValues[1].label).toBe('Push');
+      expect(authenticatorOptionValues[1].label).toBe('oie.okta_verify.label');
+      expect(authenticatorOptionValues[1].options.description).toBe('Push');
       expect(authenticatorOptionValues[1].options.ctaLabel).toBe('oie.verify.authenticator.button.text');
       expect(authenticatorOptionValues[1].options.actionParams?.['authenticator.methodType']).toBe('push');
     });
@@ -434,15 +439,18 @@ describe('Select Authenticator Utility Tests', () => {
       expect(authenticatorOptionValues).toMatchSnapshot();
       expect(authenticatorOptionValues.length).toBe(4);
       expect(authenticatorOptionValues[0].options.key).toBe(AUTHENTICATOR_KEY.OV);
-      expect(authenticatorOptionValues[0].label).toBe('Fastpass');
+      expect(authenticatorOptionValues[0].label).toBe('oie.okta_verify.label');
+      expect(authenticatorOptionValues[0].options.description).toBe('Fastpass');
       expect(authenticatorOptionValues[0].options.ctaLabel).toBe('oie.verify.authenticator.button.text');
       expect(authenticatorOptionValues[0].options.actionParams?.['authenticator.methodType']).toBe('signed_nonce');
       expect(authenticatorOptionValues[1].options.key).toBe(AUTHENTICATOR_KEY.OV);
-      expect(authenticatorOptionValues[1].label).toBe('Code');
+      expect(authenticatorOptionValues[1].label).toBe('oie.okta_verify.label');
+      expect(authenticatorOptionValues[1].options.description).toBe('Code');
       expect(authenticatorOptionValues[1].options.ctaLabel).toBe('oie.verify.authenticator.button.text');
       expect(authenticatorOptionValues[1].options.actionParams?.['authenticator.methodType']).toBe('totp');
       expect(authenticatorOptionValues[2].options.key).toBe(AUTHENTICATOR_KEY.OV);
-      expect(authenticatorOptionValues[2].label).toBe('Push');
+      expect(authenticatorOptionValues[2].label).toBe('oie.okta_verify.label');
+      expect(authenticatorOptionValues[2].options.description).toBe('Push');
       expect(authenticatorOptionValues[2].options.ctaLabel).toBe('oie.verify.authenticator.button.text');
       expect(authenticatorOptionValues[2].options.actionParams?.['authenticator.methodType']).toBe('push');
 
@@ -495,11 +503,13 @@ describe('Select Authenticator Utility Tests', () => {
       expect(authenticatorOptionValues).toMatchSnapshot();
       expect(authenticatorOptionValues.length).toBe(4);
       expect(authenticatorOptionValues[0].options.key).toBe(AUTHENTICATOR_KEY.OV);
-      expect(authenticatorOptionValues[0].label).toBe('Code');
+      expect(authenticatorOptionValues[0].label).toBe('oie.okta_verify.label');
+      expect(authenticatorOptionValues[0].options.description).toBe('Code');
       expect(authenticatorOptionValues[0].options.ctaLabel).toBe('oie.verify.authenticator.button.text');
       expect(authenticatorOptionValues[0].options.actionParams?.['authenticator.methodType']).toBe('totp');
       expect(authenticatorOptionValues[1].options.key).toBe(AUTHENTICATOR_KEY.OV);
-      expect(authenticatorOptionValues[1].label).toBe('Push');
+      expect(authenticatorOptionValues[1].label).toBe('oie.okta_verify.label');
+      expect(authenticatorOptionValues[1].options.description).toBe('Push');
       expect(authenticatorOptionValues[1].options.ctaLabel).toBe('oie.verify.authenticator.button.text');
       expect(authenticatorOptionValues[1].options.actionParams?.['authenticator.methodType']).toBe('push');
 
@@ -509,7 +519,8 @@ describe('Select Authenticator Utility Tests', () => {
         .toBe('oie.verify.authenticator.button.text');
       expect(authenticatorOptionValues[2].options.description).toBe('216XXXXX43');
       expect(authenticatorOptionValues[3].options.key).toBe(AUTHENTICATOR_KEY.OV);
-      expect(authenticatorOptionValues[3].label).toBe('Fastpass');
+      expect(authenticatorOptionValues[3].label).toBe('oie.okta_verify.label');
+      expect(authenticatorOptionValues[3].options.description).toBe('Fastpass');
       expect(authenticatorOptionValues[3].options.ctaLabel).toBe('oie.verify.authenticator.button.text');
       expect(authenticatorOptionValues[3].options.actionParams?.['authenticator.methodType']).toBe('signed_nonce');
     });
@@ -549,7 +560,7 @@ describe('Select Authenticator Utility Tests', () => {
       expect(authenticatorOptionValues).toMatchSnapshot();
       expect(authenticatorOptionValues.length).toBe(2);
       expect(authenticatorOptionValues[0].options.key).toBe(AUTHENTICATOR_KEY.OV);
-      expect(authenticatorOptionValues[0].label).toBe('Okta Verify');
+      expect(authenticatorOptionValues[0].label).toBe('oie.okta_verify.label');
       expect(authenticatorOptionValues[0].options.ctaLabel).toBe('oie.verify.authenticator.button.text');
       expect(authenticatorOptionValues[0].options.actionParams?.['authenticator.methodType']).toBe('signed_nonce');
       expect(authenticatorOptionValues[1].options.key).toBe(AUTHENTICATOR_KEY.PHONE);
@@ -600,11 +611,13 @@ describe('Select Authenticator Utility Tests', () => {
       expect(authenticatorOptionValues).toMatchSnapshot();
       expect(authenticatorOptionValues.length).toBe(3);
       expect(authenticatorOptionValues[0].options.key).toBe(AUTHENTICATOR_KEY.OV);
-      expect(authenticatorOptionValues[0].label).toBe('Code');
+      expect(authenticatorOptionValues[0].label).toBe('oie.okta_verify.label');
+      expect(authenticatorOptionValues[0].options.description).toBe('Code');
       expect(authenticatorOptionValues[0].options.ctaLabel).toBe('oie.verify.authenticator.button.text');
       expect(authenticatorOptionValues[0].options.actionParams?.['authenticator.methodType']).toBe('totp');
       expect(authenticatorOptionValues[1].options.key).toBe(AUTHENTICATOR_KEY.OV);
-      expect(authenticatorOptionValues[1].label).toBe('Push');
+      expect(authenticatorOptionValues[1].label).toBe('oie.okta_verify.label');
+      expect(authenticatorOptionValues[1].options.description).toBe('Push');
       expect(authenticatorOptionValues[1].options.ctaLabel).toBe('oie.verify.authenticator.button.text');
       expect(authenticatorOptionValues[1].options.actionParams?.['authenticator.methodType']).toBe('push');
 
@@ -634,7 +647,7 @@ describe('Select Authenticator Utility Tests', () => {
               id: '',
               type: '',
               methods: [{ type: '' }],
-              displayName: '',
+              displayName: 'DisplayName',
               key: AUTHENTICATOR_KEY[key],
               profile: {},
             },
@@ -651,7 +664,15 @@ describe('Select Authenticator Utility Tests', () => {
         const currentOption = authenticatorOptionValues
           .find(({ options: { key: authKey } }) => authKey === option.relatesTo?.key);
         expect(currentOption?.options.key).toBe(option.relatesTo?.key);
-        expect(currentOption?.label).toBe(option.label);
+        let expectedLabel;
+        if (option.relatesTo?.key === AUTHENTICATOR_KEY.CUSTOM_APP) {
+          expectedLabel = 'DisplayName';
+        } else if (option.relatesTo?.key === AUTHENTICATOR_KEY.OV) {
+          expectedLabel = 'oie.okta_verify.label';
+        } else {
+          expectedLabel = option.label;
+        }
+        expect(currentOption?.label).toBe(expectedLabel);
         expect(currentOption?.options.ctaLabel)
           .toBe('oie.enroll.authenticator.button.text');
         expect(currentOption?.options.description)
@@ -712,12 +733,69 @@ describe('Select Authenticator Utility Tests', () => {
       expect(authenticatorOptionValues).toMatchSnapshot();
       expect(authenticatorOptionValues.length).toBe(2);
       expect(authenticatorOptionValues[0].options.key).toBe(AUTHENTICATOR_KEY.OV);
-      expect(authenticatorOptionValues[0].label).toBe('Code');
+      expect(authenticatorOptionValues[0].label).toBe('oie.okta_verify.label');
+      expect(authenticatorOptionValues[0].options.description).toBe('oie.okta_verify.authenticator.description');
       expect(authenticatorOptionValues[0].options.ctaLabel).toBe('oie.enroll.authenticator.button.text');
       expect(authenticatorOptionValues[0].options.actionParams!['authenticator.methodType']).toBe('totp');
-      expect(authenticatorOptionValues[1].label).toBe('Push');
+      expect(authenticatorOptionValues[1].label).toBe('oie.okta_verify.label');
+      expect(authenticatorOptionValues[1].options.description).toBe('oie.okta_verify.authenticator.description');
       expect(authenticatorOptionValues[1].options.ctaLabel).toBe('oie.enroll.authenticator.button.text');
       expect(authenticatorOptionValues[1].options.actionParams!['authenticator.methodType']).toBe('push');
     });
+
+    it('should detect authenticator options for additional enroll', () => {
+      const authenticatorEnrollments: IdxAuthenticator[] = [
+        {
+          id: 'enrolled-email-1',
+          type: 'email',
+          key: AUTHENTICATOR_KEY.EMAIL,
+          methods: [{ type: 'email' }],
+          displayName: 'Enrolled email',
+        },
+      ];
+      const options: IdxOption[] = [
+        {
+          label: 'Password',
+          value: [
+            { name: 'methodType', value: 'password' },
+            { name: 'id', value: '1234abc' },
+          ],
+          relatesTo: {
+            id: '',
+            type: 'password',
+            methods: [{ type: 'password' }],
+            displayName: 'Okta Password',
+            key: AUTHENTICATOR_KEY.PASSWORD,
+          },
+        },
+        {
+          label: 'Email',
+          value: [
+            { name: 'methodType', value: 'email' },
+            { name: 'id', value: '1235abc' },
+          ],
+          relatesTo: {
+            id: '',
+            type: 'email',
+            methods: [{ type: 'email' }],
+            displayName: 'Okta Email',
+            key: AUTHENTICATOR_KEY.EMAIL,
+          },
+        },
+      ];
+
+      const authenticatorOptionValues = getAuthenticatorEnrollButtonElements(
+        options, stepName, authenticatorEnrollments,
+      );
+
+      expect(authenticatorOptionValues).toMatchSnapshot();
+      expect(authenticatorOptionValues.length).toBe(2);
+      expect(authenticatorOptionValues[0].options.key).toBe(AUTHENTICATOR_KEY.PASSWORD);
+      expect(authenticatorOptionValues[0].label).toBe('Password');
+      expect(authenticatorOptionValues[0].options.ctaLabel).toBe('oie.enroll.authenticator.button.text');
+      expect(authenticatorOptionValues[1].options.key).toBe(AUTHENTICATOR_KEY.EMAIL);
+      expect(authenticatorOptionValues[1].label).toBe('Email');
+      expect(authenticatorOptionValues[1].options.ctaLabel).toBe('enroll.choices.setup.another');
+    });
   });
 });

package/src/v3/src/transformer/selectAuthenticator/utils.ts

@@ -10,7 +10,7 @@
  * See the License for the specific language governing permissions and limitations under the License.
  */
 
-import { Input } from '@okta/okta-auth-js';
+import { IdxAuthenticator, Input } from '@okta/okta-auth-js';
 import { IdxOption } from '@okta/okta-auth-js/types/lib/idx/types/idx-js';
 
 import {
@@ -93,6 +93,11 @@ export const getOptionValue = (
   ({ name }) => name === key,
 );
 
+const isAuthenticatorAlreadyEnrolled = (
+  authenticator: IdxAuthenticator,
+  authenticatorEnrollments?: IdxAuthenticator[],
+) => !!authenticatorEnrollments?.some(({ key }) => key === authenticator.key);
+
 const getAuthenticatorDataSeVal = (authenticatorKey: string, methodType?: string): string => {
   if (authenticatorKey) {
     const method = methodType ? `-${methodType}` : '';
@@ -131,49 +136,18 @@ const reorderAuthenticatorButtons = (
   return updatedAuthenticatorBtns;
 };
 
-const buildOktaVerifyOptions = (
-  options: IdxOption[],
-  step: string,
-  isEnroll?: boolean,
-): AuthenticatorButtonElement[] => {
-  const ovRemediation = options.find((option) => option.relatesTo?.key === AUTHENTICATOR_KEY.OV);
-  const id = (ovRemediation?.value as Input[])?.find(({ name }) => name === 'id')?.value;
-  const methodType = (ovRemediation?.value as Input[])?.find(({ name }) => name === 'methodType');
-  if (!methodType?.options?.length) {
-    return [];
+const getAuthenticatorLabel = (
+  option: IdxOption,
+  authenticatorKey: string,
+): string => {
+  switch (authenticatorKey) {
+    case AUTHENTICATOR_KEY.CUSTOM_APP:
+      return option.relatesTo?.displayName ?? option.label;
+    case AUTHENTICATOR_KEY.OV:
+      return loc('oie.okta_verify.label', 'login');
+    default:
+      return option.label;
   }
-
-  return methodType.options.map((option: IdxOption, index: number) => {
-    const authenticatorButton: AuthenticatorButtonElement = {
-      type: 'AuthenticatorButton',
-      label: option.label,
-      id: `auth_btn_${AUTHENTICATOR_KEY.OV}_${option.value || id}`,
-      options: {
-        type: ButtonType.BUTTON,
-        key: AUTHENTICATOR_KEY.OV,
-        ctaLabel: isEnroll
-          ? loc('oie.enroll.authenticator.button.text', 'login')
-          : loc('oie.verify.authenticator.button.text', 'login'),
-        description: isEnroll
-          ? loc(AUTHENTICATOR_ENROLLMENT_DESCR_KEY_MAP[AUTHENTICATOR_KEY.OV], 'login')
-          : loc('oie.okta_verify.label', 'login'),
-        ariaLabel: getAuthenticatorAriaLabel(option, AUTHENTICATOR_KEY.OV, option.value, isEnroll),
-        actionParams: {
-          'authenticator.methodType': option.value,
-          'authenticator.id': id,
-        } as ActionParams,
-        step,
-        includeData: true,
-        includeImmutableData: false,
-        dataSe: getAuthenticatorDataSeVal(AUTHENTICATOR_KEY.OV, option.value as string),
-        iconName: option.value === 'totp' ? `oktaVerify_${index}` : `oktaVerifyPush_${index}`,
-        iconDescr: option.value === 'totp'
-          ? loc('factor.totpSoft.description', 'login')
-          : loc('factor.push.description', 'login'),
-      },
-    };
-    return authenticatorButton;
-  });
 };
 
 const getAuthenticatorDescriptionParams = (
@@ -236,15 +210,76 @@ const getAuthenticatorDescription = (
       return option.relatesTo?.profile?.phoneNumber as string || undefined;
     case AUTHENTICATOR_KEY.EMAIL:
       return option.relatesTo?.profile?.email as string || undefined;
-    case AUTHENTICATOR_KEY.CUSTOM_APP:
-      return option.relatesTo?.displayName as string || undefined;
     case AUTHENTICATOR_KEY.OV:
-      return loc('oie.okta_verify.label', 'login');
+      return option.label;
     default:
       return undefined;
   }
 };
 
+const getCtaLabel = (
+  isEnroll?: boolean,
+  isAdditionalEnroll?: boolean,
+) => {
+  if (isAdditionalEnroll) {
+    return loc('enroll.choices.setup.another', 'login');
+  }
+  if (isEnroll) {
+    return loc('oie.enroll.authenticator.button.text', 'login');
+  }
+  return loc('oie.verify.authenticator.button.text', 'login');
+};
+
+const buildOktaVerifyOptions = (
+  options: IdxOption[],
+  step: string,
+  isEnroll?: boolean,
+  authenticatorEnrollments?: IdxAuthenticator[],
+): AuthenticatorButtonElement[] => {
+  const ovRemediation = options.find((option) => option.relatesTo?.key === AUTHENTICATOR_KEY.OV);
+  const isAdditionalEnroll = isEnroll && ovRemediation?.relatesTo
+    && isAuthenticatorAlreadyEnrolled(ovRemediation.relatesTo, authenticatorEnrollments);
+  const id = (ovRemediation?.value as Input[])?.find(({ name }) => name === 'id')?.value;
+  const methodType = (ovRemediation?.value as Input[])?.find(({ name }) => name === 'methodType');
+  if (!methodType?.options?.length) {
+    return [];
+  }
+
+  return methodType.options.map((option: IdxOption, index: number) => {
+    const authenticatorButton: AuthenticatorButtonElement = {
+      type: 'AuthenticatorButton',
+      label: getAuthenticatorLabel(option, AUTHENTICATOR_KEY.OV),
+      id: `auth_btn_${AUTHENTICATOR_KEY.OV}_${option.value || id}`,
+      options: {
+        type: ButtonType.BUTTON,
+        key: AUTHENTICATOR_KEY.OV,
+        isEnroll,
+        isAdditionalEnroll,
+        ctaLabel: getCtaLabel(isEnroll, isAdditionalEnroll),
+        description: getAuthenticatorDescription(
+          option,
+          AUTHENTICATOR_KEY.OV,
+          isEnroll,
+        ),
+        ariaLabel: getAuthenticatorAriaLabel(option, AUTHENTICATOR_KEY.OV, option.value, isEnroll),
+        actionParams: {
+          'authenticator.methodType': option.value,
+          'authenticator.id': id,
+        } as ActionParams,
+        step,
+        includeData: true,
+        includeImmutableData: false,
+        dataSe: getAuthenticatorDataSeVal(AUTHENTICATOR_KEY.OV, option.value as string),
+        iconName: option.value === 'totp' ? `oktaVerify_${index}` : `oktaVerifyPush_${index}`,
+        iconDescr: option.value === 'totp'
+          ? loc('factor.totpSoft.description', 'login')
+          : loc('factor.push.description', 'login'),
+      },
+    };
+    return authenticatorButton;
+  });
+};
+
 const getNickname = (
   option: IdxOption,
   authenticatorKey: string,
@@ -280,6 +315,7 @@ const formatAuthenticatorOptions = (
   options: IdxOption[],
   step: string,
   isEnroll?: boolean,
+  authenticatorEnrollments?: IdxAuthenticator[],
 ): AuthenticatorButtonElement[] => {
   const authenticatorOptionSet = new Set<string>();
   return options
@@ -304,10 +340,13 @@ const formatAuthenticatorOptions = (
       return !isDup;
     })
     .map((option: IdxOption, index: number) => {
-      const authenticatorKey = option.relatesTo?.key as string;
+      const authenticator = option.relatesTo;
+      const authenticatorKey = authenticator?.key as string;
       const id = getOptionValue(option.value as Input[], 'id')?.value;
       const methodType = getOptionValue(option.value as Input[], 'methodType')?.value;
       const enrollmentId = getOptionValue(option.value as Input[], 'enrollmentId')?.value;
+      const isAdditionalEnroll = isEnroll && authenticator
+        && isAuthenticatorAlreadyEnrolled(authenticator, authenticatorEnrollments);
       const AUTHENTICATORS_WITH_METHOD_TYPE = [
         AUTHENTICATOR_KEY.ON_PREM,
         AUTHENTICATOR_KEY.OV,
@@ -315,26 +354,25 @@ const formatAuthenticatorOptions = (
       ];
       const AUTHENTICATORS_WITH_NO_TRANSLATE_CLASS = [
         AUTHENTICATOR_KEY.PHONE,
-        AUTHENTICATOR_KEY.CUSTOM_APP,
+        AUTHENTICATOR_KEY.EMAIL,
       ];
       const AUTHENTICATORS_WITH_LTR_DESCRIPTION = [
         AUTHENTICATOR_KEY.PHONE,
       ];
-      const authenticator = option.relatesTo;
 
       return {
         type: 'AuthenticatorButton',
-        label: option.label,
+        label: getAuthenticatorLabel(option, authenticatorKey),
         id: `auth_btn_${authenticatorKey}_${enrollmentId || id}`,
         noTranslate: !isEnroll && AUTHENTICATORS_WITH_NO_TRANSLATE_CLASS.includes(authenticatorKey),
         dir: !isEnroll && AUTHENTICATORS_WITH_LTR_DESCRIPTION.includes(authenticatorKey) ? 'ltr' : undefined,
         options: {
           type: ButtonType.BUTTON,
           key: authenticatorKey,
+          isEnroll,
+          isAdditionalEnroll,
           authenticator,
-          ctaLabel: isEnroll
-            ? loc('oie.enroll.authenticator.button.text', 'login')
-            : loc('oie.verify.authenticator.button.text', 'login'),
+          ctaLabel: getCtaLabel(isEnroll, isAdditionalEnroll),
           description: getAuthenticatorDescription(
             option,
             authenticatorKey,
@@ -371,13 +409,18 @@ const getAuthenticatorButtonElements = (
   options: IdxOption[],
   step: string,
   isEnroll?: boolean,
+  authenticatorEnrollments?: IdxAuthenticator[],
 ): AuthenticatorButtonElement[] => {
-  const formattedOptions = formatAuthenticatorOptions(options, step, isEnroll);
+  const formattedOptions = formatAuthenticatorOptions(
+    options, step, isEnroll, authenticatorEnrollments,
+  );
 
   // appending OV options back to its original spot
-  const ovOptions = buildOktaVerifyOptions(options, step, isEnroll);
+  const ovOptions = buildOktaVerifyOptions(options, step, isEnroll, authenticatorEnrollments);
   if (ovOptions.length && options?.length) {
-    const ovIndex = options.findIndex(({ relatesTo }) => relatesTo?.key === AUTHENTICATOR_KEY.OV);
+    const ovIndex = formattedOptions.findIndex((
+      { options: { authenticator } },
+    ) => authenticator?.key === AUTHENTICATOR_KEY.OV);
     formattedOptions.splice(ovIndex, 1, ...ovOptions);
   }
 
@@ -405,9 +448,8 @@ export const getAppAuthenticatorMethodButtonElements = (
 
   const authButtons = methodType.options.map((option, index) => ({
     type: 'AuthenticatorButton',
-    label: option.label,
+    label: getAuthenticatorLabel(option, authKey),
     id: `auth_btn_${authKey}_${option.value as string}`,
-    noTranslate: authKey === AUTHENTICATOR_KEY.CUSTOM_APP,
     options: {
       type: ButtonType.BUTTON,
       key: authKey,
@@ -458,8 +500,10 @@ export const getAuthenticatorVerifyButtonElements = (
 export const getAuthenticatorEnrollButtonElements = (
   authenticatorOptions: IdxOption[],
   step: string,
+  authenticatorEnrollments?: IdxAuthenticator[],
 ): AuthenticatorButtonElement[] => getAuthenticatorButtonElements(
   authenticatorOptions,
   step,
   true,
+  authenticatorEnrollments,
 );

package/src/v3/src/transformer/terminal/transformEmailMagicLinkOTPOnlyElements.ts

@@ -14,7 +14,6 @@ import {
   AppIcon,
   DeviceIcon,
   LocationIcon,
-  MobileDeviceIcon,
 } from '../../components/Images';
 import { CHALLENGE_INTENT_TO_I18KEY } from '../../constants';
 import {
@@ -89,12 +88,11 @@ export const transformEmailMagicLinkOTPOnly: TerminalKeyTransformer = (transacti
   const clientOs = client?.value?.os;
   const clientBrowser = client?.value?.browser;
   if (clientBrowser && clientOs) {
-    const isMobileDevice = clientOs === 'Android' || clientOs === 'iOS';
     browserImageElement = {
       type: 'ImageWithText',
       options: {
         id: 'browser',
-        SVGIcon: isMobileDevice ? MobileDeviceIcon : DeviceIcon,
+        SVGIcon: DeviceIcon,
         textContent: loc(
           'idx.return.link.otponly.browser.on.os',
           'login',

package/src/v3/src/transformer/uischema/transform.test.ts

@@ -36,9 +36,6 @@ jest.mock('./applyAsteriskToFieldElements', () => ({
 jest.mock('./updatePasswordDescribedByValue', () => ({
   updatePasswordDescribedByValue: () => ({}),
 }));
-jest.mock('./setLtrFields', () => ({
-  setLtrFields: () => ({}),
-}));
 jest.mock('./overwriteAutocomplete', () => ({
   overwriteAutocomplete: () => () => ({}),
 }));
@@ -55,7 +52,6 @@ const mocked = {
   setFocus: require('./setFocusOnFirstElement'),
   applyAsterisk: require('./applyAsteriskToFieldElements'),
   updatePasswordEle: require('./updatePasswordDescribedByValue'),
-  setLtrField: require('./setLtrFields'),
   overwriteAutocomplete: require('./overwriteAutocomplete'),
   createIdentifierContainer: require('./createIdentifierContainer'),
 };
@@ -70,7 +66,6 @@ describe('UISchema transformer', () => {
     jest.spyOn(mocked.setFocus, 'setFocusOnFirstElement');
     jest.spyOn(mocked.applyAsterisk, 'applyAsteriskToFieldElements');
     jest.spyOn(mocked.updatePasswordEle, 'updatePasswordDescribedByValue');
-    jest.spyOn(mocked.setLtrField, 'setLtrFields');
     jest.spyOn(mocked.overwriteAutocomplete, 'overwriteAutocomplete');
     jest.spyOn(mocked.createIdentifierContainer, 'createIdentifierContainer');
 
@@ -95,7 +90,6 @@ describe('UISchema transformer', () => {
     expect(mocked.setFocus.setFocusOnFirstElement).toHaveBeenCalled();
     expect(mocked.applyAsterisk.applyAsteriskToFieldElements).toHaveBeenCalled();
     expect(mocked.updatePasswordEle.updatePasswordDescribedByValue).toHaveBeenCalled();
-    expect(mocked.setLtrField.setLtrFields).toHaveBeenCalled();
     expect(mocked.overwriteAutocomplete.overwriteAutocomplete).toHaveBeenCalled();
     expect(mocked.createIdentifierContainer.createIdentifierContainer).toHaveBeenCalled();
   });