via AJAX dynamic forms

Logo ResourceSpace Logo Wordpress Logo Prestashop Logo Joomla

xAjaxLogin add an interactive dimension for front-end user identification and prevent login attempts from bots.


xAjaxLogin allow AJAX front-end login and prevent bots to submit login forms. When the 'Login' button is clicked a modal window with a login form appears on screen. The login form doesn't exists in code on page load. The form results from a response from the server and is integrated in the modal window.

In the event that a user or a bot tries to access the form without going through the ajax method, a 401 error is returned. The login/identification form is therefore inaccessible without human action.



xAjaxLogin uses Login extra for MODX. If Login is not installed, its installation will be proposed during the installation of xAjaxLogin.


xAjaxLogin uses jQuery JavaScript library. If jQuery is not installed, an option will allow you to include it.

Event trigger class

The class triggering the modal window display is .cmd-xmodallogin (cf. xalpLoginTpl chunk).

Basic use


For xAjaxLoginPro (xFrontUser extra):


Advanced use with all available options


All options are read in cascade:

  1. Default
  2. Snippet properties (override default)
  3. Snippet options (override properties)

Then, in a multi-context use, you should use snippet options.

Snippet options

xAjaxLoginPro only

Option Values Default / Notes
header 0|1 Show modal window header. Default: No (false).
loginResourceId A resource ID Resource ID for redirection after successful login. Default: current page ID.
logoutResourceId A resource ID Resource ID for redirection after logout.
loginRegisterId A resource ID Resource ID for register link/page.
loginForgotId A resource ID Resource ID for forgot username or password link/page.
logo Image path Add logo to the Login modal window (path). Default: /assets/components/xajaxlogin/images/modx-stacked-color.png
showstatus 0|1 Show additional infos and status. Default: Yes (true)
width number Modal window width. Default: 350
height number Modal window height. Default: 500.
loginTpl chunk Chunk template for login (if logged out). Default: xalLoginTpl.
loginTplPanel chunk Chunk template for modal window content. Default: xalLoginTplPanel.
logoutTpl chunk Chunk template for logout (if logged in). Default: xalLogoutTpl.
cypher 0|1 Encrypt posted data (username and password). Default: Yes (true).
incJquery 0|1 Include jQuery. Set to 1 if your template/website doesn't embed jQuery. Default: No (false).
incJspanel 0|1 Include jsPanel. Set to 1 if your template/website doesn't embed jsPanel by default. Default: Yes (true).
notifmode nerver|always|userchoice Send email notification to user on connections.
snd Path Sound notification. Examples: /assets/components/xfrontuser/snd/sample1.mp3,

xAjaxLoginPro only

xAjaxLoginPro is a part of xFrontUser extra.


In this demo, redirect page for login and logout is the current resouce.

Note: loginRegisterId and loginForgotId options are not set in this demo. This page will be reloaded after login (by default).

[[!xAjaxLogin? &cypher=`1`]]


  • username: demo
  • password: JmYYtT3M

Option Cypher

This option (enabled by default) encrypt posted data making it impossible to read data posted in the console of the browser's development tools.

In the same way if a software or browser extension records logs and posted data, the reading of the data (username and password) will be impossible.

If your website cannot use https it adds a security layer; if your website use https it will add an additional encryption layer (SSL/TLS encryption of encrypted form data).

With &cypher=`0`:

With &cypher=`1` or without this option:


If your hosting doesn't meet these requirements, disable this option:

[[!xAjaxLogin? &cypher=`0`]]


xAjaxLogin works in all contexts other than the default context.

Notifications (xAjaxLoginPro only)

Email notification with date, user agent, IP address, can be sent on connections if option is notifmode=`userchoice` or notifmode=`always`.