Fix e2e sample test failures for SSR (#1381)

OKTA-574495 Fixes e2e tests

samples/config.js

@@ -89,16 +89,14 @@ const samples = [
       // group sms related specs together, so they do not run in parallel
       // this spec takes time to finish, run it first
       [
-        // fix affected tests: https://oktainc.atlassian.net/browse/OKTA-574495
-        // 'self-service-registration',
+        'self-service-registration',
         'mfa-password-and-sms',
       ],
       'root-page', 
       'basic-auth', 
       'identifier-first-auth',
       'self-service-password-recovery', 
-      // fix affected tests: https://oktainc.atlassian.net/browse/OKTA-574495
-      // 'self-service-registration-custom-attribute',
+      'self-service-registration-custom-attribute',
       'self-service-registration-activation-token',
       'mfa-password-and-email',
       'mfa-password-and-email-magic-link',

samples/generated/express-embedded-auth-with-sdk/web-server/routes/authenticator.js

@@ -102,6 +102,21 @@ router.post('/verify-authenticator/okta_email', async (req, res, next) => {
 });
 
 // Handle enroll authenticator -- email
+router.get('/enroll-authenticator/okta_email/enrollment-data', (req, res) => {
+  const { 
+    idx: { nextStep: { inputs } }
+  } = req.getFlowStates();
+  const { options } = inputs[0];
+  renderPage({ 
+    req, res,
+    render: () => renderTemplate(req, res, 'select-authenticator', {
+      options,
+      action: '/enroll-authenticator/okta_email/enrollment-data',
+      canSkip: false,
+    })
+  });
+});
+
 router.get('/enroll-authenticator/okta_email', (req, res) => {
   renderPage({
     req, res,
@@ -117,6 +132,12 @@ router.get('/enroll-authenticator/okta_email', (req, res) => {
   });
 });
 
+router.post('/enroll-authenticator/okta_email/enrollment-data', async (req, res, next) => {
+  const authClient = getAuthClient(req);
+  const transaction = await authClient.idx.proceed({ authenticator: 'okta_email' });
+  handleTransaction({ req, res, next, authClient, transaction });
+});
+
 router.post('/enroll-authenticator/okta_email', async (req, res, next) => {
   const { verificationCode } = req.body;
   const authClient = getAuthClient(req);

samples/generated/express-embedded-auth-with-sdk/web-server/utils/renderTemplate.js

@@ -27,6 +27,7 @@ module.exports = function renderTemplate(req, res, template, options = {}) {
       } = {}
     } = {} 
   } = req.getFlowStates();
+  const hasContextualDataForAuthenticator = contextualData?.qrcode || contextualData?.sharedSecret;
   const authenticatorEnrollmentsJSON = authenticatorEnrollments ? JSON.stringify(authenticatorEnrollments) : null;
   const activationData = contextualData ? JSON.stringify(contextualData.activationData) : null;
   const challengeData = contextualData ? JSON.stringify(contextualData.challengeData) : null;
@@ -38,6 +39,7 @@ module.exports = function renderTemplate(req, res, template, options = {}) {
     cancelAction: getFormActionPath(req, '/cancel'),
     selectStepAction: getFormActionPath(req, options.selectStepAction),
     contextualData,
+    hasContextualDataForAuthenticator,
     activationData,
     challengeData,
     authenticatorEnrollments: authenticatorEnrollmentsJSON,

samples/generated/express-embedded-auth-with-sdk/web-server/views/authenticator.mustache

@@ -18,7 +18,7 @@
         {{>formMessages}}
       </div>
 
-      {{#contextualData}}
+      {{#hasContextualDataForAuthenticator}}
         <div class="ui segments">
           <div class="ui segment">
             {{#contextualData.qrcode}}
@@ -34,7 +34,7 @@
             {{/contextualData.sharedSecret}}
           </div>
         </div>
-      {{/contextualData}}
+      {{/hasContextualDataForAuthenticator}}
 
       <div class="row">
         <form id="challenge-authenticator-form" class="ui large form" action="{{action}}" method="POST">

samples/test/features/self-service-registration.feature

@@ -5,6 +5,11 @@ Background:
     And the app has Email Verification callback uri defined
     And a Policy that defines "Profile Enrollment"
     And with a Policy Rule that defines "collecting default attributes"
+    And a Policy that defines "MFA Enrollment" with properties
+     | okta_password      | REQUIRED |
+     | okta_email         | REQUIRED |
+     | phone_number       | OPTIONAL |
+     And with a Policy Rule that defines "MFA Enrollment Challenge"
     And a user named "Mary"
     And she does not have account in the org
 
@@ -16,15 +21,18 @@ Scenario: Mary signs up for an account with Password, setups up required Email f
   And she fills out her Email
   And she submits the form
   Then she is redirected to the "Select Authenticator" page
+  When she selects the "Email" factor
+  And she submits the form
+  Then she sees a page to input a code for email authenticator enrollment
+  When she inputs the correct code from her "Email"
+  And she submits the form
+  Then she is redirected to the "Select Authenticator" page
   When she selects the "Password" factor
   And she submits the form
   Then she sees the set new password form
   And she fills out her Password
   And she confirms her Password
   And she submits the form
-  Then she sees a page to input a code for email authenticator enrollment
-  When she inputs the correct code from her "Email"
-  And she submits the form
   Then she is redirected to the "Select Authenticator" page
   When she selects "Skip" on SMS
   Then she is redirected to the "Root" page
@@ -39,15 +47,18 @@ Scenario: Mary signs up for an account with Password, setups up required Email f
     And she fills out her Email
     And she submits the form
   Then she is redirected to the "Select Authenticator" page
+  When she selects the "Email" factor
+    And she submits the form
+  Then she sees a page to input a code for email authenticator enrollment
+  When she inputs the correct code from her "Email"
+    And she submits the form
+  Then she is redirected to the "Select Authenticator" page
   When she selects the "Password" factor
     And she submits the form
   Then she sees the set new password form
     And she fills out her Password
     And she confirms her Password
     And she submits the form
-  Then she sees a page to input a code for email authenticator enrollment
-  When she inputs the correct code from her "Email"
-    And she submits the form
   Then she is redirected to the "Select Authenticator" page
   When she selects the "Phone" factor
     And she submits the form
@@ -57,8 +68,6 @@ Scenario: Mary signs up for an account with Password, setups up required Email f
   Then the screen changes to receive an input for a code
   When she inputs the correct code from her "SMS"
     And she submits the form
-  Then she is redirected to the "Select Authenticator" page
-  When she selects "Skip"
   Then she is redirected to the "Root" page
     And she sees a table with her profile info
     And the cell for the value of "email" is shown and contains her "email"
@@ -81,15 +90,18 @@ Scenario: Mary signs up for an account with Password, sets up required Email fac
   And she fills out her Email
     And she submits the form
   Then she is redirected to the "Select Authenticator" page
+  When she selects the "Email" factor
+    And she submits the form
+  Then she sees a page to input a code for email authenticator enrollment
+  When she inputs the correct code from her "Email"
+    And she submits the form
+  Then she is redirected to the "Select Authenticator" page
   When she selects the "Password" factor
     And she submits the form
   Then she sees the set new password form
   And she fills out her Password
   And she confirms her Password
   And she submits the form
-  Then she sees a page to input a code for email authenticator enrollment
-  When she inputs the correct code from her "Email"
-    And she submits the form
   Then she is redirected to the "Select Authenticator" page
   When she selects the "Phone" factor
     And she submits the form
@@ -106,14 +118,17 @@ Scenario: Mary signs up for an account with Password, setups up required Email f
   And she fills out her Email
   And she submits the form
   Then she is redirected to the "Select Authenticator" page
+  When she selects the "Email" factor
+    And she submits the form
+  Then she sees a page to input a code for email authenticator enrollment
+  When she clicks the Email magic link for email verification
+  Then she is redirected to the "Select Authenticator" page
   When she selects the "Password" factor
   And she submits the form
   Then she sees the set new password form
   And she fills out her Password
   And she confirms her Password
   And she submits the form
-  Then she sees a page to input a code for email authenticator enrollment
-  When she clicks the Email magic link for email verification
   Then she is redirected to the "Select Authenticator" page
   When she selects "Skip" on SMS
   Then she is redirected to the "Root" page

samples/test/support/management-api/a18nClient.ts

@@ -54,7 +54,8 @@ export default class A18nClient {
 
     const match = response?.content?.match(/Enter a code instead: (?<code>\d+)/) 
       || response?.content?.match(/enter this code: <b>(?<code>\d+)<\/b>/)
-      || response?.content?.match(/please contact your system administrator immediately.[\s\S]\s*(?<code>\d+)/);
+      || response?.content?.match(/please contact your system administrator immediately.[\s\S]\s*(?<code>\d+)/)
+      || response?.content?.match(/enter the verification code: <strong>(?<code>\d+)<\/strong>/);
     const code = match?.groups?.code;
     if (!code) {
       throw new Error('Unable to retrieve code from email.');
@@ -107,7 +108,8 @@ export default class A18nClient {
       --retryAttemptsRemaining;
     }
 
-    const match = response?.content?.match(/<a id="email-activation-button" href="(?<url>\S+)"/);
+    const match = response?.content?.match(/<a id="email-activation-button" href="(?<url>\S+)"/)
+      || response?.content?.match(/<a id="registration-activation-link" href="(?<url>\S+)"/);
     const url = match?.groups?.url;
     if (!url) {
       throw new Error('Unable to retrieve magic link from email.');

test/e2e/features/step-definitions/steps.ts

@@ -320,6 +320,7 @@ When(
   'she verifies her sms',
   { timeout: 30*1000 }, 
   async function (this: ActionContext) {
+    await OktaLogin.receiveCodeViaSms();
     const code = await this.a18nClient.getSMSCode(this.credentials.profileId);
     await OktaLogin.enterCode(code);
     await OktaLogin.clickVerify();

test/e2e/pageobjects/OktaLogin.js

@@ -34,6 +34,7 @@ class OktaLogin {
 
   get signinFormTitle() { return $('.okta-form-title.o-form-head'); }
   get verifyWithEmailCodeButton() { return $('form[data-se="o-form"] button.enter-auth-code-instead-link'); }
+  get receiveCodeViaSmsButton() { return $('form[data-se="o-form"] input[type=submit]'); }
   get code() {
     if (process.env.ORG_OIE_ENABLED) {
       return this.OIEsigninPassword;
@@ -145,6 +146,13 @@ class OktaLogin {
     (await this.verifyWithEmailCodeButton).click();
   }
 
+  async receiveCodeViaSms() {
+    await browser.waitUntil(async () => {
+      return (await this.receiveCodeViaSmsButton).isDisplayed();
+    }, 5000, 'wait for receive a code via sms btn');
+    (await this.receiveCodeViaSmsButton).click();
+  }
+
   async enterCode(code) {
     await browser.waitUntil(async () => {
       return (await this.code).isDisplayed();