Removed reCAPTCHA from registration (#77)

Author: PianoNic

application.properties

@@ -1,4 +1,4 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <properties>
-    <version>1.8.0</version>
+    <version>1.9.0</version>
 </properties>

keycloakify/src/login/pages/register/Form.tsx

@@ -1,6 +1,6 @@
 import { Button } from "@/components/ui/button";
 import { useKcClsx } from "@keycloakify/login-ui/useKcClsx";
-import { useEffect, useState, type FormEvent } from "react";
+import { useState } from "react";
 import { assert } from "tsafe/assert";
 import { useKcContext } from "../../KcContext";
 import { UserProfileFormFields } from "../../components/UserProfileFormFields";
@@ -16,64 +16,12 @@ export function Form() {
     const [isFormSubmittable, setIsFormSubmittable] = useState(false);
     const [areTermsAccepted, setAreTermsAccepted] = useState(false);
 
-    const recaptchaRequired = kcContext.recaptchaRequired;
-    const recaptchaSiteKey = kcContext.recaptchaSiteKey;
-    const recaptchaAction = kcContext.recaptchaAction;
-
-    // reCAPTCHA v3 is invisible: load the API with the site key on mount, then on
-    // submit fetch a token for the action and POST it in the `g-recaptcha-response`
-    // field (the param Keycloak's recaptcha authenticator reads). No widget.
-    useEffect(() => {
-        if (!recaptchaRequired || recaptchaSiteKey === undefined) {
-            return;
-        }
-        const src = `https://www.google.com/recaptcha/api.js?render=${recaptchaSiteKey}`;
-        if (document.querySelector(`script[src="${src}"]`) !== null) {
-            return;
-        }
-        const script = document.createElement("script");
-        script.src = src;
-        script.async = true;
-        document.head.appendChild(script);
-    }, [recaptchaRequired, recaptchaSiteKey]);
-
-    const onSubmit = (event: FormEvent<HTMLFormElement>) => {
-        if (!recaptchaRequired || recaptchaSiteKey === undefined) {
-            return; // no captcha -> let the form submit normally
-        }
-        event.preventDefault();
-        const form = event.currentTarget;
-        const grecaptcha = (window as any).grecaptcha;
-        if (grecaptcha === undefined) {
-            form.submit();
-            return;
-        }
-        grecaptcha.ready(() => {
-            grecaptcha
-                .execute(recaptchaSiteKey, { action: recaptchaAction ?? "register" })
-                .then((token: string) => {
-                    let field = form.querySelector<HTMLInputElement>(
-                        'input[name="g-recaptcha-response"]'
-                    );
-                    if (field === null) {
-                        field = document.createElement("input");
-                        field.type = "hidden";
-                        field.name = "g-recaptcha-response";
-                        form.appendChild(field);
-                    }
-                    field.value = token;
-                    form.submit();
-                });
-        });
-    };
-
     return (
         <form
             id="kc-register-form"
             action={kcContext.url.registrationAction}
             className="space-y-4"
             method="post"
-            onSubmit={onSubmit}
         >
             <UserProfileFormFields
                 onIsFormSubmittableValueChange={setIsFormSubmittable}

keycloakify/src/login/pages/register/Page.stories.tsx

@@ -176,29 +176,6 @@ export const WithEmailAsUsername: Story = {
     }
 };
 
-export const WithRecaptcha: Story = {
-    args: {
-        kcContext: {
-            scripts: ["https://www.google.com/recaptcha/api.js?hl=en"],
-            recaptchaRequired: true,
-            recaptchaSiteKey: "6LfQHvApAAAAAE73SYTd5vS0lB1Xr7zdiQ-6iBVa"
-        }
-    }
-};
-
-export const WithRecaptchaFrench: Story = {
-    args: {
-        kcContext: {
-            locale: {
-                currentLanguageTag: "fr"
-            },
-            scripts: ["https://www.google.com/recaptcha/api.js?hl=fr"],
-            recaptchaRequired: true,
-            recaptchaSiteKey: "6LfQHvApAAAAAE73SYTd5vS0lB1Xr7zdiQ-6iBVa"
-        }
-    }
-};
-
 export const WithPasswordMinLength8: Story = {
     args: {
         kcContext: {

realms/schuly-realm.json

@@ -13,7 +13,7 @@
     "referrerPolicy": "no-referrer",
     "xRobotsTag": "none",
     "xFrameOptions": "SAMEORIGIN",
-    "contentSecurityPolicy": "frame-src 'self' https://www.google.com https://recaptcha.google.com; frame-ancestors 'self'; object-src 'none';",
+    "contentSecurityPolicy": "frame-src 'self'; frame-ancestors 'self'; object-src 'none';",
     "strictTransportSecurity": "max-age=31536000; includeSubDomains"
   },
   "smtpServer": {
@@ -389,7 +389,7 @@
     },
     {
       "alias": "registration",
-      "description": "Registration flow with reCAPTCHA bot protection",
+      "description": "Registration flow",
       "providerId": "basic-flow",
       "topLevel": true,
       "builtIn": false,
@@ -424,29 +424,11 @@
           "requirement": "REQUIRED",
           "priority": 50,
           "userSetupAllowed": false
-        },
-        {
-          "authenticator": "registration-recaptcha-action",
-          "authenticatorFlow": false,
-          "requirement": "REQUIRED",
-          "priority": 60,
-          "authenticatorConfig": "recaptcha-config",
-          "userSetupAllowed": false
         }
       ]
     }
   ],
-  "authenticatorConfig": [
-    {
-      "alias": "recaptcha-config",
-      "config": {
-        "site.key": "${env.RECAPTCHA_SITE_KEY}",
-        "secret": "${env.RECAPTCHA_SECRET}",
-        "useRecaptchaNet": "false",
-        "action": "register"
-      }
-    }
-  ],
+  "authenticatorConfig": [],
   "requiredActions": [
     {
       "alias": "CONFIGURE_TOTP",

scripts/resolve-realm-env.sh

@@ -3,8 +3,8 @@
 # environment BEFORE Keycloak imports them. Keycloak's realm import does not
 # substitute environment variables itself (only ${vault.x}, at use-time), so the
 # committed realm keeps clean ${env.*} placeholders and this script fills them in
-# at startup from the values passed to the container (e.g. SMTP creds, reCAPTCHA
-# keys). Non-env placeholders like ${username}/${email} are left untouched.
+# at startup from the values passed to the container (e.g. SMTP creds).
+# Non-env placeholders like ${username}/${email} are left untouched.
 set -euo pipefail
 
 import_dir="/opt/keycloak/data/import"