[WIP] Added Captcha settings for self-hosters

apps/admin-x-settings/src/components/settings/advanced/SpamFilters.tsx

@@ -1,8 +1,9 @@
 import React from 'react';
 import TopLevelGroup from '../../TopLevelGroup';
 import useSettingGroup from '../../../hooks/useSettingGroup';
-import {Separator, SettingGroupContent, TextArea, Toggle, withErrorBoundary} from '@tryghost/admin-x-design-system';
+import {Separator, SettingGroupContent, TextArea, TextField, Toggle, withErrorBoundary} from '@tryghost/admin-x-design-system';
 import {getSettingValue, getSettingValues} from '@tryghost/admin-x-framework/api/settings';
+import {useGlobalData} from '../../providers/GlobalDataProvider';
 
 const SpamFilters: React.FC<{ keywords: string[] }> = ({keywords}) => {
     const {
@@ -21,16 +22,29 @@ const SpamFilters: React.FC<{ keywords: string[] }> = ({keywords}) => {
         }
     });
 
+    const {config} = useGlobalData();
+
     const [initialBlockedEmailDomainsJSON] = getSettingValues(localSettings, ['blocked_email_domains']) as string[];
     const initialBlockedEmailDomains = JSON.parse(initialBlockedEmailDomainsJSON || '[]') as string[];
     const [blockedEmailDomains, setBlockedEmailDomains] = React.useState(initialBlockedEmailDomains.join('\n'));
 
     const [captchaEnabled] = getSettingValues(localSettings, ['captcha_enabled']) as boolean[];
+    const [captchaSitekey, captchaSecret] = getSettingValues(localSettings, ['captcha_sitekey', 'captcha_secret']) as string[];
     const handleToggleChange = (key: string, e: React.ChangeEvent<HTMLInputElement>) => {
         updateSetting(key, e.target.checked);
         handleEditingChange(true);
     };
 
+    const handleSitekeyChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        updateSetting('captcha_sitekey', e.target.value);
+        handleEditingChange(true);
+    };
+
+    const handleSecretChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        updateSetting('captcha_secret', e.target.value);
+        handleEditingChange(true);
+    };
+
     const labs = JSON.parse(getSettingValue<string>(localSettings, 'labs') || '{}');
 
     const updateBlockedEmailDomainsSetting = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
@@ -95,11 +109,31 @@ const SpamFilters: React.FC<{ keywords: string[] }> = ({keywords}) => {
                         gap='gap-0'
                         hint={captchaHint}
                         label='Enable strict signup security'
-                        labelClasses='block text-sm font-medium tracking-normal text-grey-900 w-full mt-[-10px]'
+                        labelClasses='block text-sm font-medium tracking-normal text-grey-900 dark:text-grey-500 w-full mt-[-10px]'
                         onChange={(e) => {
                             handleToggleChange('captcha_enabled', e);
                         }}
                     />
+                    {/* Sitekey / secret are only modifiable in self-hoster setups */}
+                    {config?.hostSettings?.captcha || (<>
+                        <SettingGroupContent>
+                            <TextField
+                                hint="TODO Change: Unique identifier for your site"
+                                maxLength={36} // UUIDv4 format
+                                placeholder="hCaptcha sitekey"
+                                title="hCaptcha sitekey"
+                                value={captchaSitekey}
+                                onChange={handleSitekeyChange}
+                            />
+                            <TextField
+                                hint="TODO Change:Private secret key used to verify hCaptcha responses"
+                                maxLength={100}
+                                placeholder="hCaptcha secret"
+                                title="hCaptcha secret"
+                                value={captchaSecret}
+                                onChange={handleSecretChange} />
+                        </SettingGroupContent>
+                    </>)}
                 </>)}
             </SettingGroupContent>
         </TopLevelGroup>

ghost/core/core/server/api/endpoints/settings-public.js

@@ -6,9 +6,15 @@ const labs = require('../../../shared/labs');
 
 const getCaptchaSettings = () => {
     if (labs.isSet('captcha')) {
-        return {
-            captcha_sitekey: config.get('captcha:siteKey')
-        };
+        const siteKey = config.get('hostSettings:captcha:siteKey');
+        if (siteKey) {
+            return {
+                captcha_sitekey: siteKey
+            };
+        } else {
+            // Sitekey pulled from settings for self-hosters, no need to override
+            return {};
+        }
     } else {
         return {
             captcha_enabled: false

ghost/core/core/server/api/endpoints/utils/serializers/input/settings.js

@@ -77,6 +77,8 @@ const EDITABLE_SETTINGS = [
     'heading_font',
     'blocked_email_domains',
     'captcha_enabled',
+    'captcha_sitekey',
+    'captcha_secret',
     'require_email_mfa'
 ];
 

ghost/core/core/server/data/migrations/versions/5.116/2025-03-28-17-58-29-add-captcha-selfhoster-settings.js

@@ -0,0 +1,16 @@
+const {addSetting, combineTransactionalMigrations} = require('../../utils');
+
+module.exports = combineTransactionalMigrations([
+    addSetting({
+        key: 'captcha_sitekey',
+        value: null,
+        type: 'string',
+        group: 'members'
+    }),
+    addSetting({
+        key: 'captcha_secret',
+        value: null,
+        type: 'string',
+        group: 'members'
+    })
+]);

ghost/core/core/server/data/schema/default-settings/default-settings.json

@@ -327,6 +327,14 @@
                 "isIn": [["true", "false"]]
             },
             "type": "boolean"
+        },
+        "captcha_sitekey": {
+            "defaultValue": null,
+            "type": "string"
+        },
+        "captcha_secret": {
+            "defaultValue": null,
+            "type": "string"
         }
     },
     "portal": {

ghost/core/core/server/services/members/api.js

@@ -244,7 +244,7 @@ function createApiInstance(config) {
         captchaService: new CaptchaService({
             enabled: labsService.isSet('captcha') && sharedConfig.get('captcha:enabled'),
             scoreThreshold: sharedConfig.get('captcha:scoreThreshold'),
-            secretKey: sharedConfig.get('captcha:secretKey')
+            secretKey: sharedConfig.get('hostSettings:captcha:secretKey') || settingsCache.get('captcha_secret')
         })
     });
 

ghost/core/core/shared/settings-cache/CacheManager.js

@@ -60,6 +60,8 @@ const _ = require('lodash');
  * @property {string|null} support_email_address - Support email address
  * @property {string|null} editor_default_email_recipients - Default email recipients for editor
  * @property {boolean|null} captcha_enabled - Whether captcha is enabled
+ * @property {string|null} captcha_sitekey - Unique sitekey for hCaptcha
+ * @property {string|null} captcha_secret - Private key to validate hCaptcha responses
  * @property {string|null} labs - JSON string of enabled labs features
  * @property {never} [x] - Prevent accessing undefined properties
  */