AJAX Handlers & Authentication

Xe Plugin provides structured AJAX request handlers in src/Ajax.php, equipped with nonce security checks, input sanitization, and structured JSON responses.

---

Architecture Overview

1. AJAX Endpoints (src/Ajax.php): Registers WordPress wp_ajax_ and wp_ajax_nopriv_ action hooks.
2. Localization (src/Admin/Assets.php & src/Frontend/Assets.php): Passes ajaxUrl and nonce securely to client-side scripts via wp_localize_script().
3. Client Handler (assets/js/authentication.js): Executes the asynchronous jQuery requests.

---

Registering AJAX Hooks (src/Ajax.php)

namespace Xe_Plugin;

class Ajax {

  public function register(): void {
    // Authenticated and Guest sample endpoint
    add_action( 'wp_ajax__xe_plugin_sample', [ $this, 'sample' ] );
    add_action( 'wp_ajax_nopriv__xe_plugin_sample', [ $this, 'sample' ] );

    // Guest login & reset password endpoints
    add_action( 'wp_ajax_nopriv__xe_plugin_user_login', [ $this, 'user_login' ] );
    add_action( 'wp_ajax_nopriv__xe_plugin_reset_password', [ $this, 'reset_password' ] );
  }

}

---

Nonce Verification & JSON Responses

Always verify nonces using check_ajax_referer():

public function sample() {
  check_ajax_referer( '_xe_plugin_ajax_nonce', 'nonce' );

  if ( empty( $_POST['my_param'] ) ) {
    wp_send_json_error( [
      'message' => esc_html__( 'Parameter missing', 'xe-plugin' )
    ] );
  }

  wp_send_json_success( [
    'message' => esc_html__( 'Request successful!', 'xe-plugin' ),
    'data'    => [ 'status' => 'active' ]
  ] );
}

---

User Login via AJAX Example

The boilerplate includes a full AJAX authentication handler with support for username or email login:

public function user_login() {
  check_ajax_referer( '_xe_plugin_ajax_nonce', 'nonce' );

  $user_login    = sanitize_text_field( $_POST['user_login'] ?? '' );
  $user_password = $_POST['user_password'] ?? '';
  $remember_me   = ! empty( $_POST['remember_me'] );

  if ( empty( $user_login ) || empty( $user_password ) ) {
    wp_send_json( [
      'error' => esc_html__( 'Please provide username and password.', 'xe-plugin' )
    ] );
  }

  $signon = wp_signon( [
    'user_login'    => $user_login,
    'user_password' => $user_password,
    'remember'      => $remember_me,
  ], is_ssl() );

  if ( is_wp_error( $signon ) ) {
    wp_send_json( [ 'error' => $signon->get_error_message() ] );
  }

  wp_send_json( [
    'success' => esc_html__( 'Login successful, redirecting...', 'xe-plugin' )
  ] );
}

---

Client-Side JavaScript Call

In your JavaScript file:

jQuery(document).ready(function($) {

  $.ajax({
    url: xePlugin.ajaxUrl,
    type: 'POST',
    dataType: 'json',
    data: {
      action: '_xe_plugin_user_login',
      nonce: xePlugin.nonce,
      user_login: $('#username').val(),
      user_password: $('#password').val()
    },
    beforeSend: function() {
      console.log(xePlugin.strings.pleaseWait);
    },
    success: function(response) {
      if (response.error) {
        alert(response.error);
      } else if (response.success) {
        window.location.href = xePlugin.strings.dashboardUrl;
      }
    }
  });

});