Skip to content

Display ArkoseLabs challenge in the registration form

Eugie Limpin requested to merge fe/arkose-on-sign-up into master

This MR is first of a multi-MR change to integrate Arkose Labs to the registration flow.

  1. Display Arkose Labs challenge in the registration form instead of reCAPTCHA (if enabled) 👈🏼 👈🏼 👈🏼 YOU ARE HERE
  2. Split Arkose::UserVerificationService into Arkose::TokenVerificationService and Arkose::RecordUserDataService
  3. Verify Arkose Labs session token before registration and record Arkose Labs user data after registration

What does this MR do and why?

This MR is the first iteration to integrate Arkose Labs challenge into the registration flow. It adds frontend code and minimum backend code to display Arkose Labs challenge in the registration form instead of reCAPTCHA.

What is not included in this MR?

This MR only includes frontend code required to display Arkose Labs challenge in the registration form and pass the Arkose Labs session token to the backend when the challenge is solved. It does not include code to verify the session token with Arkose Labs Verify API endpoint, allow/prevent the user creation depending on the verification result, and persist Arkose Labs user data to the database. These changes will be introduced in Verify Arkose Labs session token and record use... (!96243 - merged) to keep the size of this MR small.

Screenshots or screen recordings

CAPTCHA solved - sign up succeeds

success

CAPTCHA was not attempted / solved - error message is shown

fail

How to set up and validate locally

  1. Turn on :arkose_labs_signup_challenge feature flag through Rails console
    $ rails console
    > Feature.enable(:arkose_labs_signup_challenge)
  2. Set up credentials for Arkose Labs. Credentials are available in GitLab 1Password Engineering Vault
    $ rails console
    > ApplicationSetting.first.update({ arkose_labs_public_api_key: '****', arkose_labs_private_api_key: '****', arkose_labs_namespace: 'client' })
  3. Force Arkose Labs to always require the user to solve the challenge. Update ee/app/assets/javascripts/arkose_labs/components/sign_up_arkose_app.vue
    arkoseObject.setConfig({
      data: { id: 'ML_defence' }, // ADD THIS LINE
      mode: 'inline',
      selector: `.${this.arkoseContainerClass}`,
      onShown: this.onArkoseLabsIframeShown,
      onCompleted: this.passArkoseLabsChallenge,
    });
  4. Visit the registration page at http://localhost:3000/users/sign_up
  5. Validate that the challenge is shown
  6. Validate that an error message (Complete verification to sign up.') when the challenge is not attempted or not solved correctly
  7. Validate that a new user can be created when the challenge is solved

MR acceptance checklist

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

Edited by Eugie Limpin

Merge request reports