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/api/arkose_api.js

+import axios from '../lib/utils/axios_utils';
+import { buildApiUrl } from './api_utils';
+
+const ENDPOINT = '/api/:version/arkose_challenge';
+
+export function needsArkoseChallenge(username) {
+  const url = buildApiUrl(ENDPOINT);
+
+  // We force this to return true for now.
+  return new Promise((resolve) => {
+    setTimeout(() => {
+      resolve(true);
+    }, 300);
+  });
+  return axios.post(url, {
+    username,
+  });
+}