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

changed milestone to %14.10

assigned to @pgascouvaillancourt and @mc_rocha

changed the description

This is great @pgascouvaillancourt . Could you record a quick demo video?

changed the description

resolved all threads

Setting label groupthreat insights based on @pgascouvaillancourt's group.

added groupthreat insights label

added 1 deleted label and removed groupthreat insights label

Thanks @pgascouvaillancourt for this! I think this works as an MVC.

I have one suggestion for a follow up, which is to separate the process into steps like we do for 2fa. Currently, after completing the challenge, there is no indication that something is happening. This is particularly a problem for slower connections.

I tried looking into how we handle this for the log in flow today, but wasn't able to get it working. The register flow has the captcha on page load, so this is a non-issue in that case.

Separating the flow into two steps also means we can remove the disabled button. Instead, there would be a Continue button that would throw a validation error if the user has not completed the challenge successfully.

This may also help if the user completes the challenge but the risk score is still high. How do we plan to handle that in the current flow?

For reference, here are a couple screen shots of the 2fa screens:

mentioned in merge request !82751 (merged)

added 404 commits

• 08dfc3fa...e9755388 - 402 commits from branch master
• 5287c4cf - [ci skip] ArkoseLabs challenge PoC
• 11c7ab4d - [ci skip] Hide base login form when showing the challenge

Compare with previous version

changed the description

Following up from our sync today: We decided to forego the flow that has the challenge as a separate step in the log in process. This is for both security reasons and also challenges with the API. Instead, we'll go back to the first version of the POC which has the challenge appear after entering the username. Previously, the challenge was triggered after the user hit "Sign in". This doesn't allow for proper validation, but we can do this as an MVC.

In order to provide proper validation and messaging to users on what is happening at each step in the flow, I propose the following:

State	Screenshot
On initial load, the sign in form is the same as today
The user enters their UN/PW. After the username field loses the focus, we determine whether we need to show the Arkose challenge. While we are making this determination, the Sign in button is in a loading state
If the Arkose challenge is needed, we display it below the log in fields and the Sign in button is active

I believe this flow should allow us to include proper validation at each step. For example:

Use case	Screenshot	Validation
If the Arkose challenge is not necessary and invalid credentials are provided		Invalid login or password.
If Arkose determines user cannot login even without challenge (not sure if this is a valid use case, but it would be possible to support if so)		Login failed. Please retry from your primary device and network.
If Arkose challenge is necessary, but user has not completed it		Complete verification to sign in.
If Arkose challenge is necessary, but invalid credentials are provided		Invalid login or password.
If Arkose challenge is necessary, but user has failed challenge or risk score is too high		Login failed. Please retry from your primary device and network.

There could also be a few combinations here, but clicking Sign in triggers the validations. We can also abstract the validations as necessary for security purposes (for example, if we no longer want to provide insight that login/password are invalid like we do today).

cc @pgascouvaillancourt @mc_rocha for your thoughts on this user flow and if valid, which aspects (if any) should be follow ups. Thanks!

---

View working file in Figma →

added 213 commits

• 11c7ab4d...2b02ed39 - 210 commits from branch master
• 65a2523c - [ci skip] ArkoseLabs challenge PoC
• 15860319 - [ci skip] Hide base login form when showing the challenge
• 45742059 - [ci skip] Revert to v1 with UX tweaks

Compare with previous version

changed the description

added 1 commit

• 61dcc2f4 - [ci skip] Revert to v1 with UX tweaks

Compare with previous version