UI Support for Okta Number Challenge

changelog/15998.txt

@@ -0,0 +1,3 @@
+```release-note:feature
+ui: UI support for Okta Number Challenge.
+```

ui/app/adapters/cluster.js

@@ -107,7 +107,7 @@ export default ApplicationAdapter.extend({
   },
 
   authenticate({ backend, data }) {
-    const { role, jwt, token, password, username, path } = data;
+    const { role, jwt, token, password, username, path, nonce } = data;
     const url = this.urlForAuth(backend, username, path);
     const verb = backend === 'token' ? 'GET' : 'POST';
     let options = {
@@ -119,6 +119,8 @@ export default ApplicationAdapter.extend({
       };
     } else if (backend === 'jwt' || backend === 'oidc') {
       options.data = { role, jwt };
+    } else if (backend === 'okta') {
+      options.data = { password, nonce };
     } else {
       options.data = token ? { token, password } : { password };
     }

ui/app/components/auth-form.js

@@ -18,13 +18,17 @@ const BACKENDS = supportedAuthBackends();
  *
  * @example ```js
  * // All properties are passed in via query params.
- * <AuthForm @wrappedToken={{wrappedToken}} @cluster={{model}} @namespace={{namespaceQueryParam}} @selectedAuth={{authMethod}} @onSuccess={{action this.onSuccess}} />```
+ * <AuthForm @wrappedToken={{wrappedToken}} @cluster={{model}} @namespace={{namespaceQueryParam}} @selectedAuth={{authMethod}} @onSuccess={{action this.onSuccess}}/>```
  *
  * @param {string} wrappedToken - The auth method that is currently selected in the dropdown.
  * @param {object} cluster - The auth method that is currently selected in the dropdown. This corresponds to an Ember Model.
  * @param {string} namespace- The currently active namespace.
  * @param {string} selectedAuth - The auth method that is currently selected in the dropdown.
- * @param {function} onSuccess - Fired on auth success
+ * @param {function} onSuccess - Fired on auth success.
+ * @param {function} [setOktaNumberChallenge] - Sets whether we are waiting for okta number challenge to be used to sign in.
+ * @param {boolean} [waitingForOktaNumberChallenge=false] - Determines if we are waiting for the Okta Number Challenge to sign in.
+ * @param {function} [setCancellingAuth] - Sets whether we are cancelling or not the login authentication for Okta Number Challenge.
+ * @param {boolean} [cancelAuthForOktaNumberChallenge=false] - Determines if we are cancelling the login authentication for the Okta Number Challenge.
  */
 
 const DEFAULTS = {
@@ -51,6 +55,9 @@ export default Component.extend(DEFAULTS, {
   oldNamespace: null,
   authMethods: BACKENDS,
 
+  // number answer for okta number challenge if applicable
+  oktaNumberChallengeAnswer: null,
+
   didReceiveAttrs() {
     this._super(...arguments);
     let {
@@ -60,8 +67,14 @@ export default Component.extend(DEFAULTS, {
       namespace: ns,
       selectedAuth: newMethod,
       oldSelectedAuth: oldMethod,
+      cancelAuthForOktaNumberChallenge: cancelAuth,
     } = this;
-
+    // if we are cancelling the login then we reset the number challenge answer and cancel the current authenticate and polling tasks
+    if (cancelAuth) {
+      this.set('oktaNumberChallengeAnswer', null);
+      this.authenticate.cancelAll();
+      this.pollForOktaNumberChallenge.cancelAll();
+    }
     next(() => {
       if (!token && (oldNS === null || oldNS !== ns)) {
         this.fetchMethods.perform();
@@ -219,7 +232,11 @@ export default Component.extend(DEFAULTS, {
         cluster: { id: clusterId },
       } = this;
       try {
-        this.delayAuthMessageReminder.perform();
+        if (backendType === 'okta') {
+          this.pollForOktaNumberChallenge.perform(data.nonce, data.path);
+        } else {
+          this.delayAuthMessageReminder.perform();
+        }
         const authResponse = yield this.auth.authenticate({
           clusterId,
           backend: backendType,
@@ -236,6 +253,28 @@ export default Component.extend(DEFAULTS, {
     })
   ),
 
+  pollForOktaNumberChallenge: task(function* (nonce, mount) {
+    // yield for 1s to wait to see if there is a login error before polling
+    yield timeout(1000);
+    if (this.error) {
+      return;
+    }
+    let response = null;
+    this.setOktaNumberChallenge(true);
+    this.setCancellingAuth(false);
+    // keep polling /auth/okta/verify/:nonce API every 1s until a response is given with the correct number for the Okta Number Challenge
+    while (response === null) {
+      // when testing, the polling loop causes promises to be rejected making acceptance tests fail
+      // so disable the poll in tests
+      if (Ember.testing) {
+        return;
+      }
+      yield timeout(1000);
+      response = yield this.auth.getOktaNumberChallengeAnswer(nonce, mount);
+    }
+    this.set('oktaNumberChallengeAnswer', response);
+  }),
+
   delayAuthMessageReminder: task(function* () {
     if (Ember.testing) {
       this.showLoading = true;
@@ -275,6 +314,14 @@ export default Component.extend(DEFAULTS, {
       if (this.customPath || backend.id) {
         data.path = this.customPath || backend.id;
       }
+      // add nonce field for okta backend
+      if (backend.type === 'okta') {
+        data.nonce = crypto.randomUUID();
+        // add a default path of okta if it doesn't exist to be used for Okta Number Challenge
+        if (!data.path) {
+          data.path = 'okta';
+        }
+      }
       return this.authenticate.unlinked().perform(backend.type, data);
     },
     handleError(e) {
@@ -283,5 +330,9 @@ export default Component.extend(DEFAULTS, {
         error: e ? this.auth.handleError(e) : null,
       });
     },
+    returnToLoginFromOktaNumberChallenge() {
+      this.setOktaNumberChallenge(false);
+      this.set('oktaNumberChallengeAnswer', null);
+    },
   },
 });

ui/app/components/okta-number-challenge.js

@@ -0,0 +1,24 @@
+import Component from '@glimmer/component';
+
+/**
+ * @module OktaNumberChallenge
+ * OktaNumberChallenge components are used to display loading screen and correct answer for Okta Number Challenge when signing in through Okta
+ *
+ * @example
+ * ```js
+ * <OktaNumberChallenge @correctAnswer={this.oktaNumberChallengeAnswer} @hasError={this.error} @onReturnToLogin={this.returnToLoginFromOktaNumberChallenge}/>
+ * ```
+ * @param {number} correctAnswer - The correct answer to click for the okta number challenge.
+ * @param {boolean} hasError - Determines if there is an error being thrown.
+ * @param {function} onReturnToLogin - Sets waitingForOktaNumberChallenge to false if want to return to main login.
+ */
+
+export default class OktaNumberChallenge extends Component {
+  get oktaNumberChallengeCorrectAnswer() {
+    return this.args.correctAnswer;
+  }
+
+  get errorThrown() {
+    return this.args.hasError;
+  }
+}

ui/app/controllers/vault/cluster/auth.js

@@ -85,5 +85,9 @@ export default Controller.extend({
         mfaErrors: null,
       });
     },
+    cancelAuthentication() {
+      this.set('cancelAuth', true);
+      this.set('waitingForOktaNumberChallenge', false);
+    },
   },
 });

ui/app/services/auth.js

@@ -441,4 +441,21 @@ export default Service.extend({
       backend: BACKENDS.findBy('type', backend),
     });
   }),
+
+  getOktaNumberChallengeAnswer(nonce, mount) {
+    const url = `/v1/auth/${mount}/verify/${nonce}`;
+    return this.ajax(url, 'GET', {}).then(
+      (resp) => {
+        return resp.data.correct_answer;
+      },
+      (e) => {
+        // if error status is 404, return and keep polling for a response
+        if (e.status === 404) {
+          return null;
+        } else {
+          throw e;
+        }
+      }
+    );
+  },
 });