@okta/okta-signin-widget 7.16.0 → 7.16.1

package/src/v3/transformer/layout/development/transformEnumerateComponents.ts

@@ -10,7 +10,11 @@
  * See the License for the specific language governing permissions and limitations under the License.
  */
 
-import { AppIcon } from 'src/components/Images';
+import {
+  AppIcon,
+  DeviceIcon,
+  LocationIcon,
+} from 'src/components/Images';
 import { AUTHENTICATOR_KEY } from 'src/constants';
 
 import {
@@ -21,6 +25,7 @@ import {
   DividerElement,
   FieldElement,
   HeadingElement,
+  IdentifierContainerElement,
   IdxStepTransformer,
   ImageWithTextElement,
   InfoboxElement,
@@ -43,7 +48,7 @@ import {
 export const transformEnumerateComponents: IdxStepTransformer = ({
   formBag,
 }) => {
-  const { uischema, dataSchema } = formBag;
+  const { uischema, dataSchema, data } = formBag;
 
   const reminderElement: ReminderElement = {
     type: 'Reminder',
@@ -183,6 +188,10 @@ export const transformEnumerateComponents: IdxStepTransformer = ({
           ruleKey: 'excludeUsername',
           label: 'Cannot contain username',
         },
+        {
+          ruleKey: '',
+          label: 'Should not match your previous password',
+        },
       ],
       validationDelayMs: 0,
     },
@@ -203,6 +212,7 @@ export const transformEnumerateComponents: IdxStepTransformer = ({
     },
   };
   uischema.elements.push(inputPasswordElement);
+  data['credentials.passcode'] = 'a';
   const confirmPassword: FieldElement = {
     type: 'Field',
     key: 'confirmPassword',
@@ -217,6 +227,7 @@ export const transformEnumerateComponents: IdxStepTransformer = ({
     },
   };
   uischema.elements.push(confirmPassword);
+  data.confirmPassword = 'a';
 
   const passwordMatches: PasswordMatchesElement = {
     type: 'PasswordMatches',
@@ -334,6 +345,29 @@ export const transformEnumerateComponents: IdxStepTransformer = ({
             Icon: '',
           },
         },
+        {
+          type: 'AuthenticatorButton',
+          label: 'Authenticator Button 5 for Enroll',
+          options: {
+            step: '',
+            type: ButtonType.BUTTON,
+            key: AUTHENTICATOR_KEY.CUSTOM_APP,
+            ctaLabel: 'Set up',
+            isEnroll: true,
+          },
+        },
+        {
+          type: 'AuthenticatorButton',
+          label: 'Authenticator Button 6 for Additional Enroll',
+          options: {
+            step: '',
+            type: ButtonType.BUTTON,
+            key: AUTHENTICATOR_KEY.WEBAUTHN,
+            ctaLabel: 'Set up another',
+            isEnroll: true,
+            isAdditionalEnroll: true,
+          },
+        },
       ],
       dataSe: 'authenticator-button-list',
     },
@@ -345,6 +379,11 @@ export const transformEnumerateComponents: IdxStepTransformer = ({
     options: {
       step: '',
     },
+    translations: [{
+      name: 'label',
+      i18nKey: '',
+      value: 'Launch Authenticator button with long name and icon',
+    }],
   };
   uischema.elements.push(launchAuthenticatorButton);
 
@@ -425,15 +464,43 @@ export const transformEnumerateComponents: IdxStepTransformer = ({
   };
   uischema.elements.push(textWithActionLink);
 
-  const imageWithText: ImageWithTextElement = {
+  uischema.elements.push(divider);
+
+  const appImageWithText: ImageWithTextElement = {
     type: 'ImageWithText',
     options: {
       id: 'image.withText',
       SVGIcon: AppIcon,
-      textContent: 'Image with text',
+      textContent: 'Application',
+    },
+  };
+  uischema.elements.push(appImageWithText);
+
+  const deviceImageWithText: ImageWithTextElement = {
+    type: 'ImageWithText',
+    options: {
+      id: 'image.withText',
+      SVGIcon: DeviceIcon,
+      textContent: 'Device',
     },
   };
-  uischema.elements.push(imageWithText);
+  uischema.elements.push(deviceImageWithText);
+
+  const locationImageWithText: ImageWithTextElement = {
+    type: 'ImageWithText',
+    options: {
+      id: 'image.withText',
+      SVGIcon: LocationIcon,
+      textContent: 'Location',
+    },
+  };
+  uischema.elements.push(locationImageWithText);
+
+  const identifierElement: IdentifierContainerElement = {
+    type: 'IdentifierContainer',
+    options: { identifier: 'User' },
+  };
+  uischema.elements.push(identifierElement);
 
   return formBag;
 };

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

@@ -40,7 +40,12 @@ export const transformSelectAuthenticatorEnroll: IdxStepTransformer = ({
 }) => {
   const { uischema } = formBag;
   const { brandName } = widgetProps;
-  const { nextStep: { inputs, name: stepName } = {} as NextStep, availableSteps } = transaction;
+  const {
+    nextStep: { inputs, name: stepName } = {} as NextStep,
+    availableSteps,
+    // @ts-ignore OKTA-499928 authenticatorEnrollments missing from rawIdxState
+    rawIdxState: { authenticatorEnrollments },
+  } = transaction;
 
   const authenticator = inputs?.find(({ name }) => name === 'authenticator');
   if (!authenticator?.options?.length) {
@@ -49,6 +54,7 @@ export const transformSelectAuthenticatorEnroll: IdxStepTransformer = ({
   const authenticatorButtons = getAuthenticatorEnrollButtonElements(
     authenticator.options,
     stepName,
+    authenticatorEnrollments?.value,
   );
   const skipStep = availableSteps?.find(({ name }) => name === 'skip');
 

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

@@ -75,7 +75,6 @@ export const transformSelectAuthenticatorVerify: IdxStepTransformer = ({
   const informationalTextElement: DescriptionElement = {
     type: 'Description',
     contentType: 'subtitle',
-    noMargin: true,
     options: {
       content: isPwRecovery
         ? loc('oie.password.reset.verification', 'login')

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

@@ -133,7 +133,6 @@ export const transformSelectOVCustomAppMethodVerify: IdxStepTransformer = ({
     const descriptionElement: DescriptionElement = {
       type: 'Description',
       contentType: 'subtitle',
-      noMargin: true,
       options: {
         content: loc('oie.select.authenticators.verify.subtitle', 'login'),
       },

package/src/v3/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/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/transformer/uischema/transform.ts

@@ -21,7 +21,6 @@ import { createIdentifierContainer } from './createIdentifierContainer';
 import { createTextElementKeys } from './createTextElementKeys';
 import { overwriteAutocomplete } from './overwriteAutocomplete';
 import { setFocusOnFirstElement } from './setFocusOnFirstElement';
-import { setLtrFields } from './setLtrFields';
 import { updateCustomFields } from './updateCustomFields';
 import { updateElementKeys } from './updateElementKeys';
 import { updatePasswordDescribedByValue } from './updatePasswordDescribedByValue';
@@ -36,7 +35,6 @@ export const transformUISchema: TransformStepFnWithOptions = (
   updateElementKeys(options),
   addIdToElements,
   updatePasswordDescribedByValue,
-  setLtrFields,
   overwriteAutocomplete(options),
   // OKTA-586475: Please keep this as the last function to be executed since we want to ensure
   // that the identifier container is always positioned at the top of a view

package/src/v3/tsconfig.base.json

@@ -41,6 +41,9 @@
       ],
       "util/*": [
         "../util/*"
+      ],
+      "@okta/odyssey-react-mui/icons": [
+        "../../node_modules/@okta/odyssey-react-mui/src/icons.generated"
       ]
     },
     "resolveJsonModule": true,

package/src/v3/{components/FieldLevelMessageContainer/index.tsx → types/image.ts}

@@ -10,6 +10,13 @@
  * See the License for the specific language governing permissions and limitations under the License.
  */
 
-import FieldLevelMessageContainer from './FieldLevelMessageContainer';
-
-export default FieldLevelMessageContainer;
+export type ImageProps = {
+  src: string;
+  alt: string;
+  width?: string | number;
+  height?: string | number;
+  maxWidth?: string | number;
+  maxHeight?: string | number;
+  testId?: string;
+  ariaHidden?: boolean;
+};

package/src/v3/types/index.ts

@@ -17,6 +17,7 @@ export * from './component';
 export * from './context';
 export * from './error';
 export * from './handlers';
+export * from './image';
 export * from './ion';
 export * from './json';
 export * from './jsonforms';

package/src/v3/types/schema.ts

@@ -310,7 +310,6 @@ export interface ButtonElement extends UISchemaElement {
     dataSe?: string;
     stepToRender?: string;
     ariaLabel?: string;
-    classes?: string;
     disabled?: boolean;
     Icon?: FunctionComponent | string;
     iconAlt?: string;
@@ -325,6 +324,8 @@ export interface AuthenticatorButtonElement extends UISchemaElement {
     key: string;
     ariaLabel: string;
     authenticator?: IdxAuthenticator;
+    isEnroll?: boolean;
+    isAdditionalEnroll?: boolean;
     ctaLabel: string;
     description?: string;
     nickname?: string;

package/src/v3/types/widget.ts

@@ -10,6 +10,7 @@
  * See the License for the specific language governing permissions and limitations under the License.
  */
 
+import { DesignTokensOverride } from '@okta/odyssey-react-mui';
 import {
   FlowIdentifier,
   IdxActionParams,
@@ -34,7 +35,6 @@ import {
   UserOperation,
 } from '../../../types';
 import { InterstitialRedirectView } from '../constants';
-import { DesignTokensType } from '../util/designTokens';
 import { WidgetHooks } from '../util/widgetHooks';
 import { OktaSignInAPI } from './api';
 import { JsonObject } from './json';
@@ -119,7 +119,7 @@ export type WidgetOptions = {
   brandColors?: BrandColors;
 
   // theme
-  theme?: { tokens: DesignTokensType }; // & ThemeOptions;
+  theme?: { tokens: DesignTokensOverride }; // & ThemeOptions;
 
   // hooks
   hooks?: HooksOptions; // object in options
@@ -285,7 +285,7 @@ interface ProxyIdxResponse {
 
 type CustomButton = {
   title: string;
-  className: string;
+  className?: string;
   i18nKey: string;
   dataAttr?: string;
   click: { (): void }

package/src/v3/util/buildFieldLevelErrorMessages.ts

@@ -0,0 +1,48 @@
+/*
+ * Copyright (c) 2024-present, Okta, Inc. and/or its affiliates. All rights reserved.
+ * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the "License.")
+ *
+ * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *
+ * See the License for the specific language governing permissions and limitations under the License.
+ */
+
+import { WidgetMessage } from '../types';
+
+type FieldLevelErrorMessages = {
+  errorMessage?: string;
+  errorMessageList?: string[];
+};
+
+export const buildFieldLevelErrorMessages = (
+  errors: WidgetMessage[] | undefined,
+) : FieldLevelErrorMessages => {
+  const hasErrors = typeof errors !== 'undefined' && errors.length > 0;
+
+  if (hasErrors) {
+    if (errors.length === 1) {
+      const error = errors[0];
+      // Covers nested messages, e.g. password requirements not met
+      // The SIW does not have messages nested more than once
+      if (Array.isArray(error.message)) {
+        return {
+          errorMessage: error.description,
+          errorMessageList: error.message
+            .filter((msg) => typeof msg.message === 'string')
+            .map((msg) => msg.message as string),
+        };
+      }
+      return { errorMessage: error.message };
+    }
+    return {
+      errorMessageList: errors
+        .filter((error) => typeof error.message === 'string')
+        .map((error) => error.message as string),
+    };
+  }
+
+  return {};
+};

package/src/v3/util/formUtils.ts

@@ -14,7 +14,6 @@ import {
   IdxAuthenticator,
   IdxMessage, IdxRemediation, IdxTransaction, NextStep,
 } from '@okta/okta-auth-js';
-import classNames from 'classnames';
 
 import IDP from '../../../util/IDP';
 import Util from '../../../util/Util';
@@ -77,8 +76,7 @@ export const getCustomButtonElements = (widgetProps: WidgetProps): ButtonElement
       options: {
         type: ButtonType.BUTTON,
         step: '',
-        dataSe: customButton.dataAttr,
-        classes: classNames(customButton.className, 'default-custom-button'),
+        dataSe: customButton.dataAttr ?? 'custom-button',
         variant: 'secondary',
         onClick: customButton.click,
       },
@@ -105,8 +103,7 @@ const getPIVButtonElement = (
     options: {
       type: ButtonType.BUTTON,
       step: IDX_STEP.PIV_IDP,
-      dataSe: 'piv-card-button',
-      classes: `${piv?.className || ''} piv-button`,
+      dataSe: `piv-card-button${piv?.className ? ` ${piv.className}` : ''}`,
       variant: 'secondary',
       Icon: SmartCardIconSvg,
       iconAlt: loc('piv.card', 'login'),
@@ -189,10 +186,6 @@ const getConfigIdpButtonRemediations = (
           name: idpConfig.text,
         };
         const redirectUri = `${baseUrl}/sso/idps/${idpConfig.id}?stateToken=${stateHandle}`;
-        if (idpConfig.className) {
-          // @ts-expect-error OKTA-609464 - className missing from IdpConfig type
-          idp.className = idpConfig.className;
-        }
         return {
           name: IDX_STEP.REDIRECT_IDP,
           type: idpConfig.type,
@@ -249,17 +242,12 @@ export const getIdpButtonElements = (
     return {
       type: 'Button',
       label: displayName,
+      noTranslate: type === 'general-idp',
       options: {
         type: ButtonType.BUTTON,
         step: IDX_STEP.PIV_IDP,
-        dataSe: 'piv-card-button',
-        classes: classNames(
-          'social-auth-button',
-          `social-auth-${type}-button`,
-          // @ts-expect-error OKTA-609464 - className missing from IdpConfig type
-          idpObject.idp?.className,
-          { 'no-translate': type === 'general-idp' },
-        ),
+        // @ts-expect-error OKTA-609464 - className missing from IdpConfig type
+        dataSe: `piv-card-button ${idpObject.idp?.className || `social-auth-${type}-button`}`,
         variant: 'secondary',
         Icon: idpIconMap[type],
         iconAlt: '',