• Official Extension
hCaptcha: Login Verification

README (opens in new tab)

ApostropheCMS logo

Apostrophe hCaptcha Login Verification

GitHub Workflow Status (branch)

This login verification module adds a hCaptcha check when any user logs into the site.

Installation

To install the module, use the command line to run this command in an Apostrophe project's root directory:

plaintext
npm install @apostrophecms/login-hcaptcha

Usage

Instantiate the hCaptcha login module in the app.js file:

javascript
require('apostrophe')({ shortName: 'my-project', modules: { '@apostrophecms/login-hcaptcha': {} } });

The other requirement is to add your hCaptcha public API site key to the @apostrophecms/login module (not this module). This module adds functionality to that module (it "improves" it, in Apostrophe speak), so most configuration should be directly on the core login module.

javascript
// modules/@apostrophecms/login/index.js module.exports = { options: { hcaptcha: { site: 'ADD YOUR SITE KEY', secret: 'ADD YOUR SECRET KEY' } } };

Once configured, hCaptcha verification should work on all login attempts.

Language

The hCaptcha is displayed in the language of the admin UI: the defaultAdminLocale of the @apostrophecms/i18n module when set, otherwise the locale of the login page. Set hl to force a specific language (ISO 639-1 code). hCaptcha falls back to auto-detection when the code is not supported.

javascript
// modules/@apostrophecms/login/index.js module.exports = { options: { hcaptcha: { site: 'ADD YOUR SITE KEY', secret: 'ADD YOUR SECRET KEY', hl: 'en' } } };

Right-to-left websites

On a website whose current locale is right-to-left, the login page and the hCaptcha widget are laid out right-to-left as well. If your editors prefer a left-to-right login page, set the direction option of the @apostrophecms/login module (not this module):

javascript
// modules/@apostrophecms/login/index.js module.exports = { options: { direction: 'ltr' } };

Content security headers

If your site has a content security policy, including if you use the Apostrophe Security Headers module, you will need to add additional configuration to use this module. This module adds a script tag to the site's head tag fetching hCaptcha code, so we need to allow resources from that domain.

If you are using the Apostrophe Security Headers module, add the following policy configuration for that module:

javascript
module.exports = { options: { policies: { 'login-hcaptcha': { 'script-src': 'hcaptcha.com *.hcaptcha.com', 'frame-src': 'hcaptcha.com *.hcaptcha.com', 'style-src': 'hcaptcha.com *.hcaptcha.com', 'connect-src': 'hcaptcha.com *.hcaptcha.com' }, // Any other policies... } } };

If your content security policy is configured some other way, add hcaptcha.com *.hcaptcha.com to the script-src, frame-src, style-src and connect-src directives.

Please refer to the list at https://docs.hcaptcha.com/#content-security-policy-settings for any additional settings.