Implementing reCAPTCHA on form in custom built plugin

I’ve built a custom plugin for my website with a login and registration form in which I’m trying to implement Google reCAPTCHA v3, however no matter what I do, I get “Unable to validate reCAPTCHA. Please try again.” in the status box when I try to submit the form.

I’ve never added captcha to one of my forms before and can’t see what I’m doing wrong / am just going round in circles.

Does anyone have any insight on how to solve this?

Here’s my code:

<?php

function qjcp_rest_api_init() {
  register_rest_route('qjcp/v1', '/login', [
    'methods' => WP_REST_Server::EDITABLE,
    'callback' => 'qjcp_rest_api_login_handler',
    'permission_callback' => '__return_true'
  ]);

  register_rest_route('qjcp/v1', '/register', [
    'methods' => WP_REST_Server::CREATABLE,
    'callback' => 'qjcp_rest_api_register_handler',
    'permission_callback' => '__return_true'
  ]);
}

<?php


function qjcp_enqueue_scripts() {
    $authURLs = json_encode([
      'register' => esc_url_raw(rest_url('qjcp/v1/register')),
      'login' => esc_url_raw(rest_url('qjcp/v1/login'))
    ]);
  
    wp_add_inline_script(
      'queerjoyclub-plus-login-register-script',
      "const qjcp_auth_rest = {$authURLs}",
      'before'
    );

    $recaptchaSiteKey = 'actual site key (removed for this forum post)';
    wp_localize_script(
        'queerjoyclub-plus-login-register-script',
        'qjcp_recaptcha',
        ['site_key' => $recaptchaSiteKey]
    );

    wp_enqueue_script(
        'google-recaptcha',
        'https://www.google.com/recaptcha/api.js?render=' . $recaptchaSiteKey,
        [],
        null,
        true
    );
}

<?php

function validate_recaptcha_token($token, $action) {
    $secretKey = defined('RECAPTCHA_SECRET_KEY') ? RECAPTCHA_SECRET_KEY : '';
    $response = wp_remote_post('https://www.google.com/recaptcha/api/siteverify', [
        'body' => [
            'secret' => $secretKey,
            'response' => $token,
        ],
    ]);

    if (is_wp_error($response)) {
        return false;
    }

    $responseBody = json_decode(wp_remote_retrieve_body($response), true);

    return $responseBody['success'] && $responseBody['action'] === $action && $responseBody['score'] >= 0.5;
}

<?php

function qjcp_rest_api_login_handler($request) {
  $response = ['status' => 1];
  $params = $request->get_json_params();

  if (!isset($params['recaptcha_token']) || !validate_recaptcha_token($params['recaptcha_token'], 'login_action')) {
      $response['message'] = 'Invalid reCAPTCHA verification.';
      return $response;
  }

  if (!isset($params['user_login'], $params['password']) || empty($params['user_login']) || empty($params['password'])) {
      return $response;
  }

  $email = sanitize_email($params['user_login']);
  $password = sanitize_text_field($params['password']);

  $user = wp_signon([
      'user_login' => $email,
      'user_password' => $password,
      'remember' => true,
  ]);

  if (is_wp_error($user)) {
      return $response;
  }

  $response['status'] = 2;
  return $response;
}

<?php

function qjcp_rest_api_register_handler($request) {
  $response = ['status' => 1];
  $params = $request->get_json_params();

  if (!isset($params['recaptcha_token']) || !validate_recaptcha_token($params['recaptcha_token'], 'register_action')) {
      $response['message'] = 'Invalid reCAPTCHA verification.';
      return $response;
  }

  if (!isset($params['email'], $params['username'], $params['password']) || empty($params['email']) || empty($params['username']) || empty($params['password'])) {
      return $response;
  }

  $email = sanitize_email($params['email']);
  $username = sanitize_text_field($params['username']);
  $password = sanitize_text_field($params['password']);

  if (username_exists($username) || !is_email($email) || email_exists($email)) {
      return $response;
  }

  $userID = wp_insert_user([
      'user_login' => $username,
      'user_pass' => $password,
      'user_email' => $email,
  ]);

  if (is_wp_error($userID)) {
      return $response;
  }

  wp_new_user_notification($userID, null, 'user');
  wp_set_current_user($userID);
  wp_set_auth_cookie($userID);

  $user = get_user_by('id', $userID);

  do_action('wp_login', $user->user_login, $user);

  $response['status'] = 2;
  return $response;
}

<?php

function qjcp_login_register_render_cb($atts) {
  $user = wp_get_current_user();
  if ($user->exists()) {
      return '';
  }

  ob_start();
  ?>
  <div class="wp-block-queerjoyclub-plus-login-register">
    <div class="register-columns">
        <!-- Login Form -->
        <div class="login-column">
            <h2 class="has-x-large-font-size"><?php esc_html_e('Login', 'queerjoyclub-plus'); ?></h2>
          <form id="login-tab">
            <div id="login-status"></div>
            <fieldset>
              <label for="login-email"><?php esc_html_e('Email', 'queerjoyclub-plus'); ?></label>
              <input type="text" id="login-email" required/>

              <label for="login-password"><?php esc_html_e('Password', 'queerjoyclub-plus'); ?></label>
              <input type="password" id="login-password" required/>

              <button type="submit"><?php esc_html_e('Sign in', 'queerjoyclub-plus'); ?></button>
            </fieldset>
          </form>
          <p>
            <a href="<?php echo esc_url(home_url('/password-reset')); ?>">
              <?php esc_html_e('Forgot password?', 'queerjoyclub-plus'); ?>
               </a>   
          </p>
        </div>
        <!-- Register Form -->
        <div class="register-column">
            <h2 class="has-x-large-font-size"><?php esc_html_e('Create an account', 'queerjoyclub-plus'); ?></h2>
          <form id="register-tab">
            <div id="register-status"></div>
            <fieldset>
              <label for="register-username"><?php esc_html_e('Username', 'queerjoyclub-plus'); ?></label>
              <input type="text" id="register-username" placeholder="Jane Doe" required/>

              <label for ="register-email"><?php esc_html_e('Email', 'queerjoyclub-plus'); ?></label>
              <input type="email" id="register-email" placeholder="[email protected]" required/>

              <label for="register-password"><?php esc_html_e('Password', 'queerjoyclub-plus'); ?></label>
              <input type="password" id="register-password" required/>

              <button type="submit"><?php esc_html_e('Create an account', 'queerjoyclub-plus'); ?></button>
            </fieldset>
          </form>
        </div>
    </div>
  </div>
  <?php

  $output = ob_get_contents();
  ob_end_clean();

  return $output;
}

document.addEventListener('DOMContentLoaded', () => {
    const siteKey = qjcp_recaptcha.site_key;

    const addRecaptchaToken = async (formData, action) => {
        return new Promise((resolve) => {
            grecaptcha.ready(async () => {
                const token = await grecaptcha.execute(siteKey, { action });
                resolve({ ...formData, recaptcha_token: token });
            });
        });
    };

    const loginForm = document.querySelector('#login-tab');
    const registerForm = document.querySelector('#register-tab');

    registerForm?.addEventListener('submit', async (event) => {
        event.preventDefault();
        const registerFieldset = registerForm.querySelector('fieldset');
        const registerStatus = registerForm.querySelector('#register-status');

        registerFieldset.setAttribute('disabled', true);
        registerStatus.innerHTML = <br>          <div class="status status-info"><br>            Please wait! We are creating your account.<br>          </div><br>;

        let formData = {
            username: registerForm.querySelector('#register-username').value,
            email: registerForm.querySelector('#register-email').value,
            password: registerForm.querySelector('#register-password').value,
        };

        formData = await addRecaptchaToken(formData, 'register_action');

        const response = await fetch(qjcp_auth_rest.register, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
            },
            body: JSON.stringify(formData),
        });

        const responseJSON = await response.json();

        if (responseJSON.status === 2) {
            registerStatus.innerHTML = <br>              <div class="status status-success"><br>                Success! Your account has been created.<br>              </div><br>;
            location.reload();
        } else {
            registerFieldset.removeAttribute('disabled');
            registerStatus.innerHTML = <br>              <div class="status status-danger"><br>                Unable to create account! Please try again later.<br>              </div><br>;
        }
    });

    loginForm?.addEventListener('submit', async (event) => {
        event.preventDefault();
        const loginFieldset = loginForm.querySelector('fieldset');
        const loginStatus = loginForm.querySelector('#login-status');

        loginFieldset.setAttribute('disabled', true);
        loginStatus.innerHTML = <br>          <div class="status status-info"><br>            Please wait! We are logging you in.<br>          </div><br>;

        let formData = {
            user_login: loginForm.querySelector('#login-email').value,
            password: loginForm.querySelector('#login-password').value,
        };

        formData = await addRecaptchaToken(formData, 'login_action');

        const response = await fetch(qjcp_auth_rest.login, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
            },
            body: JSON.stringify(formData),
        });

        const responseJSON = await response.json();

        if (responseJSON.status === 2) {
            loginStatus.innerHTML = <br>              <div class="status status-success"><br>                Success! You are now logged in.<br>              </div><br>;
            location.reload();
        } else {
            loginFieldset.removeAttribute('disabled');
            loginStatus.innerHTML = <br>              <div class="status status-danger"><br>                Invalid credentials! Please try again.<br>              </div><br>;
        }
    });
});

The page I need help with: [log in to see the link]