feat(idx): include options in input scope - OKTA-486667

CHANGELOG.md

@@ -5,6 +5,11 @@
 ### Features
 
 - [#1186](https://github.com/okta/okta-auth-js/pull/1186) Supports `maxAge` param in interaction code flow. This parameter can be passed in from either SDK level options or `idx.interact` options.
+- [#1189](https://github.com/okta/okta-auth-js/pull/1189) IDX: includes `options` field in `inputs` scope, and deprecated top level `options` from `nextStep` field of the response (removal will happen in the next major version).
+
+### Fixes
+
+- [#1189](https://github.com/okta/okta-auth-js/pull/1189) IDX: fixes `input` type indicator's field name for `username` and `authenticator`. Before the indicator was named as `key`, now it's fixed to `type` to follow input metadata with all other inputs.
 
 ## 6.4.3
 

docs/idx.md

@@ -195,7 +195,9 @@ This field contains information to proceed with the next step. It's available wh
   const transaction = await authClient.idx.authenticate({ username: 'from user input' });
   ```
 
-- `options?`: This field is available in response when the input is a selection. It can also provide information for how to build UI for the next step.
+- `options?` (**deprecated**): 
+**warning: This field has been deprecated and will be removed in the next major version (v7). Current options can still be found within related input's scope.**
+This field is available in response when the input is a selection. It can also provide information for how to build UI for the next step.
 
 ###### `tokens?`
 

lib/idx/remediators/AuthenticatorEnrollmentData.ts

@@ -33,11 +33,14 @@ export class AuthenticatorEnrollmentData extends AuthenticatorData<Authenticator
     };
   }
 
-  getInputAuthenticator() {
+  getInputAuthenticator(remediation) {
     return [
-      { name: 'methodType', type: 'string', required: true },
-      { name: 'phoneNumber', type: 'string', required: true, label: 'Phone Number' },
-    ];
+      { name: 'methodType', type: 'string' }, 
+      { name: 'phoneNumber', label: 'Phone Number', type: 'string' }
+    ].map(item => {
+      const value = remediation.form.value.find(val => val.name === item.name);
+      return { ...value, ...item };
+    });
   }
 
   protected mapAuthenticatorDataFromValues(data?) {

lib/idx/remediators/AuthenticatorVerificationData.ts

@@ -64,7 +64,12 @@ export class AuthenticatorVerificationData extends AuthenticatorData<Authenticat
     const methodType = authenticator.form!.value.find(({ name }) => name === 'methodType');
     // if has methodType in form, let user select the methodType
     if (methodType && methodType.options) {
-      return { name: 'methodType', type: 'string', required: true };
+      return { 
+        name: 'methodType', 
+        type: 'string', 
+        required: true, 
+        options: methodType.options 
+      };
     }
     // no methodType, then return form values
     const inputs = [...authenticator.form!.value];

lib/idx/remediators/Base/AuthenticatorData.ts

@@ -61,6 +61,7 @@ export class AuthenticatorData<T extends AuthenticatorDataValues = Authenticator
       .some(data => compareAuthenticators(this.authenticator, data));
   }
 
+  // TODO: remove this override method in the next major version - OKTA-491236
   getNextStep() {
     const common = super.getNextStep();
     const options = this.getMethodTypes();

lib/idx/remediators/Base/SelectAuthenticator.ts

@@ -64,6 +64,7 @@ export class SelectAuthenticator<T extends SelectAuthenticatorValues = SelectAut
     return false;
   }
 
+  // TODO: remove this override method in the next major version - OKTA-491236
   getNextStep() {
     const common = super.getNextStep();
     const authenticatorFromRemediation = getAuthenticatorFromRemediation(this.remediation);
@@ -96,8 +97,14 @@ export class SelectAuthenticator<T extends SelectAuthenticatorValues = SelectAut
     };
   }
 
-  getInputAuthenticator() {
-    return { name: 'authenticator', key: 'string' };
+  getInputAuthenticator(remediation) {
+    const options = remediation.options.map(({ label, relatesTo }) => {
+      return {
+        label,
+        value: relatesTo.key
+      };
+    });
+    return { name: 'authenticator', type: 'string', options };
   }
 
   getValuesAfterProceed(): T {

lib/idx/remediators/SelectAuthenticatorUnlockAccount.ts

@@ -55,7 +55,7 @@ export class SelectAuthenticatorUnlockAccount extends SelectAuthenticator<Select
   }
 
   getInputUsername () {
-    return { name: 'username', key: 'string' };
+    return { name: 'username', type: 'string' };
   }
 
 }

lib/idx/remediators/SelectEnrollmentChannel.ts

@@ -34,6 +34,7 @@ export class SelectEnrollmentChannel extends Remediator<SelectEnrollmentChannelV
     const authenticator = context.currentAuthenticator.value;
     return {
       ...common,
+      // TODO: remove options field in the next major version - OKTA-491236
       ...(options && { options }),
       authenticator,
     };

scripts/e2e-express-embedded-auth-with-sdk.sh

@@ -12,7 +12,7 @@ export DBUS_SESSION_BUS_ADDRESS=/dev/null
 
 # Configuration
 # Remember to set this while running tests locally 
-export MAX_INSTANCES=3
+export MAX_INSTANCES=2
 export SAMPLE_NAME=@okta/samples.express-embedded-auth-with-sdk
 export ORG_OIE_ENABLED=true 
 export USERNAME=mary@acme.com

test/apps/react-oie/src/components/FlowPage/FlowPage.jsx

@@ -29,9 +29,11 @@ const FlowPage = () => {
   }, [flow, transaction, startFlow]);
 
   const backToHomePage = async () => {
+    // clear `flow` param to break the transaction update loop
+    history.replace('/');
+
     await oktaAuth.idx.cancel();
     setTransaction(null);
-    history.replace('/');
   };
 
   const getFormComponent = () => {

test/apps/react-oie/src/components/GeneralForm.jsx

@@ -61,7 +61,7 @@ const GeneralForm = () => {
   const canRecoverPassword = !!actions?.['currentAuthenticator-recover'];
   const idps = availableSteps.filter(step => step.name === 'redirect-idp');
   const form = formTransformer(nextStep)({} /* initial form value */);
-  const { inputs, select, text, image } = form;
+  const { inputs, selects, text, image } = form;
 
   return (
     <Box padding="m">
@@ -82,14 +82,14 @@ const GeneralForm = () => {
         <Form.Main>
           {text && <div>{text.value}</div>}
           {image && <img src={image.src} />}
-          {select && (
-            <Select label={select.label} name={select.name} onChange={handleChange}>
+          {selects && selects.map(select => (
+            <Select key={select.name} label={select.label} name={select.name} onChange={handleChange}>
               <Select.Option key="" value="">---</Select.Option>
               {select.options.map(({ key, label }) => (
                 <Select.Option key={key} value={key}>{label}</Select.Option>
               ))}
             </Select>
-          )}
+          ))}
           {inputs && inputs.map((input) => {
             const { label, name, type, required } = input;
             const Comp = type === 'checkbox' ? Checkbox : TextInput;

test/apps/react-oie/src/formTransformer.js

@@ -24,19 +24,21 @@ const inputTransformer = nextStep => form => {
 };
 
 const selectTransformer = nextStep => form => {
-  const { inputs, options } = nextStep;
+  const { inputs } = nextStep;
 
-  if (!options) {
-    return form;
-  }
-
-  return {
-    ...form,
-    select: {
-      name: inputs[0].name,
-      options: options.map(({ label, value }) => ({ key: value, value, label }))
+  return inputs.reduce((acc, { name, options }) => {
+    if (!options) {
+      return acc;
     }
-  };
+    if (!acc.selects) {
+      acc.selects = [];
+    }
+    acc.selects.push({
+      name,
+      options: options.map(({ label, value }) => ({ key: value, value, label }))
+    });
+    return acc;
+  }, form);
 };
 
 const securityQuestionTransformer = nextStep => form => {

test/spec/idx/authenticate.ts

@@ -429,7 +429,7 @@ describe('idx/authenticate', () => {
           name: 'identify',
           inputs: [{
             name: 'username',
-            label: 'Username'
+            label: 'Username',
           }]
         });
 
@@ -444,8 +444,12 @@ describe('idx/authenticate', () => {
             value: 'okta_password' 
           }],
           inputs: [{
-            key: 'string',
-            name: 'authenticator'
+            type: 'string',
+            name: 'authenticator',
+            options: [{ 
+              label: 'Password',
+              value: 'okta_password' 
+            }]
           }]
         });
 
@@ -712,7 +716,15 @@ describe('idx/authenticate', () => {
                 type: 'phone',
               },
               inputs: [
-                { name: 'methodType', type: 'string', required: true }
+                { 
+                  name: 'methodType', 
+                  type: 'string', 
+                  required: true,
+                  options: [
+                    { label: 'SMS', value: 'sms' },
+                    { label: 'Voice call', value: 'voice' },
+                  ]
+                }
               ],
               options: [
                 { label: 'SMS', value: 'sms' },
@@ -976,7 +988,15 @@ describe('idx/authenticate', () => {
                 type: 'phone',
               },
               inputs: [
-                { name: 'methodType', type: 'string', required: true },
+                { 
+                  name: 'methodType', 
+                  type: 'string', 
+                  required: true,
+                  options: [
+                    { label: 'SMS', value: 'sms' },
+                    { label: 'Voice call', value: 'voice' },
+                  ]
+                },
                 { name: 'phoneNumber', type: 'string', required: true, label: 'Phone Number' },
               ],
               options: [
@@ -1066,7 +1086,15 @@ describe('idx/authenticate', () => {
                 type: 'phone',
               },
               inputs: [
-                { name: 'methodType', type: 'string', required: true },
+                { 
+                  name: 'methodType', 
+                  type: 'string', 
+                  required: true, 
+                  options: [
+                    { label: 'SMS', value: 'sms' },
+                    { label: 'Voice call', value: 'voice' }
+                  ], 
+                },
                 { name: 'phoneNumber', type: 'string', required: true, label: 'Phone Number' },
               ],
               options: [
@@ -2095,6 +2123,14 @@ describe('idx/authenticate', () => {
       expect(verifyPasswordResponse.proceed).toHaveBeenCalledWith('challenge-authenticator', expect.any(Object));
       expect(response.nextStep).toMatchObject({
         name: 'select-authenticator-enroll',
+        inputs: [{
+          name: 'authenticator',
+          type: 'string',
+          options: [{
+            label: 'Email',
+            value: AuthenticatorKey.OKTA_EMAIL
+          }],  
+        }],
         options: [{
           label: 'Email',
           value: AuthenticatorKey.OKTA_EMAIL

test/spec/idx/recoverPassword.ts

@@ -252,7 +252,15 @@ describe('idx/recoverPassword', () => {
         nextStep: {
           name: 'select-authenticator-authenticate',
           inputs: [
-            { key: 'string', name: 'authenticator' }
+            { 
+              type: 'string', 
+              name: 'authenticator',
+              options: [
+                { label: 'Okta Verify', value: 'okta_verify' },
+                { label: 'Phone', value: 'phone_number' },
+                { label: 'Email', value: 'okta_email' }
+              ] 
+            }
           ],
           options: [
             { label: 'Okta Verify', value: 'okta_verify' },
@@ -530,7 +538,15 @@ describe('idx/recoverPassword', () => {
         nextStep: {
           name: 'select-authenticator-authenticate',
           inputs: [
-            { key: 'string', name: 'authenticator' }
+            { 
+              type: 'string', 
+              name: 'authenticator',
+              options: [
+                { label: 'Okta Verify', value: 'okta_verify' },
+                { label: 'Phone', value: 'phone_number' },
+                { label: 'Email', value: 'okta_email' }
+              ]    
+            }
           ],
           options: [
             { label: 'Okta Verify', value: 'okta_verify' },