Implement ArkoseLabs sign-in challenge

What does this MR do and why?

This adds ArkoseLabs' challenge to the sign-in form.

Screenshots or screen recordings

Screen recording
arkose_ux_v4_480p

ArkoseLabs failure	Submitting form without completing the challenge

How to set up and validate locally

1. Set the ARKOSE_LABS_PUBLIC_KEY environment variable:

   export ARKOSE_LABS_PUBLIC_KEY="9F5BDFCD-E895-43B5-8D96-B24E0107B685"

2. Restart the GDK in the same terminal you've set the ARKOSE_LABS_PUBLIC_KEY environment variable:

   gdk restart

3. Enable the :arkose_labs_login_challenge feature flag.

   echo "Feature.enable(:arkose_labs_login_challenge)" | rails c

4. Sign out of your instance (or open an incognito browser window) and navigate to the login form at /users/sign_in.

5. Type a username in the form's top field.

   • If the user is considered safe based on the criteria, or if it doesn't exist, no challenge should appear when the field loses the focus.
   • Otherwise, an Arkose challenge should show up.

Forcing ArkoseLabs challenge's behavior

By following the instructions above, you're relying on ArkoseLabs' decisions on whether or not a challenge should appear. You might want to force it into specific decisions to be able to test all possible outcomes. The setConfig call can be modified to include a data.id property to request specific behaviors:

• 'ML_defence' forces a challenge to appear.
• 'customer_request' results in a suppressed challenge (meaning ArkoseLabs considers your session safe).

Apply the following patch to force a challenge to show up:

diff --git a/ee/app/assets/javascripts/arkose_labs/components/sign_in_arkose_app.vue b/ee/app/assets/javascripts/arkose_labs/components/sign_in_arkose_app.vue
index e9396c26c7d..e6788acbf02 100644
--- a/ee/app/assets/javascripts/arkose_labs/components/sign_in_arkose_app.vue
+++ b/ee/app/assets/javascripts/arkose_labs/components/sign_in_arkose_app.vue
@@ -132,6 +132,7 @@ export default {
       const enforcement = await initArkoseLabsScript({ publicKey: this.publicKey });
 
       enforcement.setConfig({
+        data: { id: 'ML_defence' },
         mode: 'inline',
         selector: `.${this.arkoseContainerClass}`,
         onShown: this.onArkoseLabsIframeShown,

Or this patch to simulate a suppressed challenge:

diff --git a/ee/app/assets/javascripts/arkose_labs/components/sign_in_arkose_app.vue b/ee/app/assets/javascripts/arkose_labs/components/sign_in_arkose_app.vue
index e9396c26c7d..88da1bbd3a1 100644
--- a/ee/app/assets/javascripts/arkose_labs/components/sign_in_arkose_app.vue
+++ b/ee/app/assets/javascripts/arkose_labs/components/sign_in_arkose_app.vue
@@ -132,6 +132,7 @@ export default {
       const enforcement = await initArkoseLabsScript({ publicKey: this.publicKey });
 
       enforcement.setConfig({
+        data: { id: 'customer_request' },
         mode: 'inline',
         selector: `.${this.arkoseContainerClass}`,
         onShown: this.onArkoseLabsIframeShown,

MR acceptance checklist

This checklist encourages us to confirm any changes have been analyzed to reduce risks in quality, performance, reliability, security, and maintainability.

• I have evaluated the MR acceptance checklist for this MR.

Re https://gitlab.com/gitlab-org/gitlab/-/issues/355742

app/assets/javascripts/arkose_labs/arkose_labs.js

+const CHALLENGE_TYPE = 'ML_defence';
+
+export class ArkoseLabs {
+  constructor() {
+    this.publicKey = '9F5BDFCD-E895-43B5-8D96-B24E0107B685';
+
+    this.loginForm = document.querySelector('.js-login-form');
+
+    this.setConfig = this.setConfig.bind(this);
+    this.onReady = this.onReady.bind(this);
+    this.onError = this.onError.bind(this);
+    this.onCompleted = this.onCompleted.bind(this);
+    this.onSuppress = this.onSuppress.bind(this);
+    this.onFailed = this.onFailed.bind(this);
+
+    window.setupArkoseLabsEnforcement = this.setConfig;
+
+    this.attachEventListeners();
+  }
+
+  attachEventListeners() {
+    this.loginForm.addEventListener('submit', (e) => {
+      e.preventDefault();
+      this.addScriptTag();
+    });
+  }
+
+  addScriptTag() {
+    const tag = document.createElement('script');
+    [
+      ['type', 'text/javascript'],
+      ['src', `https://client-api.arkoselabs.com/v2/${this.publicKey}/api.js`],
+      ['nonce', true],
+      ['async', true],
+      ['defer', true],
+      ['data-callback', 'setupArkoseLabsEnforcement'],
+    ].forEach(([attr, value]) => {
+      tag.setAttribute(attr, value);
+    });
+    document.head.appendChild(tag);
+  }
+
+  setConfig(enforcement) {
+    enforcement.setConfig({
+      data: { id: CHALLENGE_TYPE },
+      mode: 'inline',
+      selector: '.js-arkose-challenge',
+
+      onReady: this.onReady,
+      onError: this.onError,
+      onCompleted: this.onCompleted,
+      onSuppress: this.onSuppress,
+      onFailed: this.onFailed,
+    });
+  }
+
+  onReady() {
+    // Challenge loaded
+  }
+
+  onError() {
+    // Could not load the challenge
+  }
+
+  onCompleted() {
+    this.submitForm();
+  }
+
+  onSuppress() {
+    this.submitForm();
+  }
+
+  onFailed() {
+    // Callback function invoked when a challenge has failed (the user has failed the challenge
+    // multiple times and is not allowed to continue the session).
+  }
+
+  submitForm() {
+    this.loginForm.submit();
+  }
+}