wip recaptcha

app/controllers/registrations_controller.rb

@@ -1,9 +1,11 @@
 class RegistrationsController < ApplicationController
   skip_before_action :authenticate
 
+  before_action :verify_captcha, only: [ :create ]
   before_action :add_terms_and_privacy_accepted_at, only: [ :create ]
 
   rate_limit to: 100, within: 1.day, only: :create
+
   def new
     render inertia: "Auth/SignUp"
   end
@@ -28,6 +30,13 @@ def add_terms_and_privacy_accepted_at
       end
     end
 
+    def verify_captcha
+      captcha = Captcha.new(params.delete(:recaptcha_token))
+      unless captcha.valid?
+        redirect_to new_registration_path, error: "Erreur de validation du captcha. Veuillez rafraîchir la page et réessayer."
+      end
+    end
+
     def user_params
       params.permit(:email, :first_name, :last_name, :terms_and_privacy_accepted_at)
     end

app/frontend/pages/Auth/SignUp.tsx

@@ -1,12 +1,11 @@
 import { Head, Link, useForm, router } from "@inertiajs/react";
-import { useEffect } from "react";
-
+import { useEffect, useRef } from "react";
 import { Label } from "@/components/ui/label";
 import { Input } from "@/components/ui/input";
 import { Checkbox } from "@/components/ui/checkbox";
 import { Button } from "@/components/ui/button";
 import { StepForward, AlertCircle } from "lucide-react";
-
+import ReCAPTCHA from 'react-google-recaptcha';
 import QuoteSection from "@/components/reusable/QuoteSection";
 // @ts-ignore
 import Vomi from "/assets/images/auth/vomi.svg?react";
@@ -18,25 +17,38 @@ export default function SignUp() {
     last_name: sessionStorage.getItem("last_name") || "",
     accepts_conditions: !!sessionStorage.getItem("accepts_conditions") || false,
     terms_and_privacy_accepted_at: "",
+    recaptcha_token: "",
   });
   const account_created = !!sessionStorage.getItem("account_created") || false;
+  const recaptchaRef = useRef(null);
 
   useEffect(() => {
     if (!data.email) {
       router.get("/connexion");
     }
   }, []);
 
+  function onChange(value) {
+    console.log("Captcha value:", value);
+    setData("recaptcha_token", value);
+  }
+
   function submit(e: React.FormEvent<HTMLFormElement>) {
     e.preventDefault();
-    post("registrations", {
-      onSuccess: () => {
-        sessionStorage.setItem("first_name", data.first_name);
-        sessionStorage.setItem("last_name", data.last_name);
-        sessionStorage.setItem("account_created", "true");
-        sessionStorage.setItem("accepts_conditions", "true");
-      },
-    });
+    // const recaptchaValue = recaptchaRef.current.getValue();
+    if (data.recaptcha_token !== "") {
+      // setData("recaptcha_token", recaptchaValue);
+      post("registrations", {
+        onSuccess: () => {
+          sessionStorage.setItem("first_name", data.first_name);
+          sessionStorage.setItem("last_name", data.last_name);
+          sessionStorage.setItem("account_created", "true");
+          sessionStorage.setItem("accepts_conditions", "true");
+        },
+      });
+    } else {
+      alert("Please complete the reCAPTCHA.");
+    }
   }
 
   return (
@@ -145,6 +157,13 @@ export default function SignUp() {
                 </div>
               )}
             </div>
+            <div className="flex justify-center">
+              <ReCAPTCHA
+                ref={recaptchaRef}
+                sitekey="6LfkEYUqAAAAAOacT9yEDlhWHnXbaZ5IJhVFbXIf"
+                onChange={onChange}
+              />
+            </div>
             <Button
               variant="secondary"
               type="submit"

app/models/captcha.rb

@@ -0,0 +1,23 @@
+require "net/http"
+require "uri"
+require "json"
+
+class Captcha
+  SECRET_KEY = Rails.application.credentials.recaptcha[:secret_key]
+
+  def initialize(token)
+    @token = token
+  end
+
+  def valid?
+    response = Net::HTTP.post_form(
+      URI.parse("https://www.google.com/recaptcha/api/siteverify"),
+      {
+        "secret" => SECRET_KEY,
+        "response" => @token
+      }
+    )
+    result = JSON.parse(response.body)
+    !!result["success"]
+  end
+end

config/credentials.yml.enc

@@ -1 +1 @@
-Mqg3faQe4IToF3RxIFZzyMLrEM1LMd++VtVobeOJKWaVhgQAeewQeQc8yDOD8f1fIInFIJVwZ+TC3T8mg1oWyf42emUiV+u3wZ2Akcq7gPrBsM1nUZx1SFqMel1KTvrnuqqssetDAx8iB2n/efiHb2g/P6G7HIPLHlHejnHGNJ6Iq3VUu8WADr5GJCLp90D96Se44N0nG+KkqC8I68HHTTQ3SaVfja0rwtG18YM4Q97mWV6ikio3//vux6sRXl7wbIddrWI/zv2JmRKQ949sekUWyM9HY5hNXvfepqHawtGLLVWROh8zgPPjhmo7/Zctb34HFotyetTLWfz/tj6yS5hbL4Jy2GWYfybQsdwerwGVuJeRLb96iJ91Fw6NzB7dFSXI90l9yb1PWUgmNCVVoovjyvMwOMZ9g6CvqtWp/8Cn7nevUHtD2XDQOEYOG/2aqiJnFGSGQys3pk7olLSvPYliGDlX7p+OSoh0sNTlWp7/Akb+rWrVQ4yF4oSPiXS3TSTmjjt4bcHLt40zX3Plvqh9cJ/zFd1UVU9v/QVqdkM4U/xNIiHg7mUYtxDplsl8R/T2LjfGsxO8mrKbMsQX0dhgbawW9BHVCAWRBMQ0/4vWLRmycxZUXpdcSsUr7g==--UeTe7O8avCQ2mDni--lAcsVEAIzW5YhqcWjhQnkA==
+E+MDaUVhpSoz97q8JbBGnYJsRDUKunVUKciWP8aRP2dPo6vZyLjz/tnZlNkuEBaiMDse7oPbcnbF7AqteMIpJ3ACdd5otNZPsf4/blF6MF26y3+1TPfGgS0JtyrD3RPvw/3CTBwCjJtoR+Xsca9txCE8xZ1RmdXVSuQMs4l83Sv0kGrlm/TzsTbGRGbolHiQhC5KiSce/P+JhXu2BYWm5OGIt8vS7/LbqU5zBPtoIDHeH07MfO8n4wk7yTTlhxgFUXWRUuuPThRGnDkuqBL/PIiQsny06bYxfkAjFUhfseJlsWXOuYotWMw9TIjoSzROE2MvpoxeFzIWs0MgiCycn4oKZUgBf54TOydBTcfJrg593WB/dO45Dc43x5yOKMWew5lxCE0EB8REHIrr/RgDvAbYxirJh/V1hqVcp4/zpDZqhsLmfliI3lSKYUghum4cEPDskE3mvSd+HhGbyEd7aedZqqHujeYWLrrAMCcKEAolG81m3cwrzB8TbUnUqoMbqUz+r8G6ml0uFOHhflWYLAhsdp6tt6HF5rhWQD6CEahFBYmrBi7KBk1qnmZirfujsTQu9VoeUYQTmxSXyx6h55q1XSLzd/LISD95YSSBz4CI3qXDj40R6tnqHgU+F9RUeBMOoZtxJnqIhuClFbOpJk7+SkOr2lHdOBSNNjbaJHAimD2u2FKEUVjU5ofWRcCbcmiKaWYROofWuxQjkAoitQ==--Go13EqLuDHNO53+f--xH14MQSRvsiLK88Q0FRTAA==

package.json

@@ -38,6 +38,7 @@
     "postcss": "^8.4.47",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
+    "react-google-recaptcha": "^3.1.0",
     "sonner": "^1.7.0",
     "tailwind-merge": "^2.5.4",
     "tailwindcss": "^3.4.13",

yarn.lock

@@ -3378,6 +3378,13 @@ hasown@^2.0.0, hasown@^2.0.1, hasown@^2.0.2:
   dependencies:
     function-bind "^1.1.2"
 
+hoist-non-react-statics@^3.3.0:
+  version "3.3.2"
+  resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz#ece0acaf71d62c2969c2ec59feff42a4b1a85b45"
+  integrity sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==
+  dependencies:
+    react-is "^16.7.0"
+
 ignore@^5.2.0:
   version "5.3.2"
   resolved "https://registry.yarnpkg.com/ignore/-/ignore-5.3.2.tgz#3cd40e729f3643fd87cb04e50bf0eb722bc596f5"
@@ -4188,7 +4195,7 @@ prelude-ls@^1.2.1:
   resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.2.1.tgz#debc6489d7a6e6b0e7611888cec880337d316396"
   integrity sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==
 
-prop-types@^15.8.1:
+prop-types@^15.5.0, prop-types@^15.8.1:
   version "15.8.1"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.8.1.tgz#67d87bf1a694f48435cf332c24af10214a3140b5"
   integrity sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==
@@ -4219,6 +4226,14 @@ queue-microtask@^1.2.2:
   resolved "https://registry.yarnpkg.com/queue-microtask/-/queue-microtask-1.2.3.tgz#4929228bbc724dfac43e0efb058caf7b6cfb6243"
   integrity sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==
 
+react-async-script@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/react-async-script/-/react-async-script-1.2.0.tgz#ab9412a26f0b83f5e2e00de1d2befc9400834b21"
+  integrity sha512-bCpkbm9JiAuMGhkqoAiC0lLkb40DJ0HOEJIku+9JDjxX3Rcs+ztEOG13wbrOskt3n2DTrjshhaQ/iay+SnGg5Q==
+  dependencies:
+    hoist-non-react-statics "^3.3.0"
+    prop-types "^15.5.0"
+
 react-dom@^18.3.1:
   version "18.3.1"
   resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-18.3.1.tgz#c2265d79511b57d479b3dd3fdfa51536494c5cb4"
@@ -4227,7 +4242,15 @@ react-dom@^18.3.1:
     loose-envify "^1.1.0"
     scheduler "^0.23.2"
 
-react-is@^16.13.1:
+react-google-recaptcha@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/react-google-recaptcha/-/react-google-recaptcha-3.1.0.tgz#44aaab834495d922b9d93d7d7a7fb2326315b4ab"
+  integrity sha512-cYW2/DWas8nEKZGD7SCu9BSuVz8iOcOLHChHyi7upUuVhkpkhYG/6N3KDiTQ3XAiZ2UAZkfvYKMfAHOzBOcGEg==
+  dependencies:
+    prop-types "^15.5.0"
+    react-async-script "^1.2.0"
+
+react-is@^16.13.1, react-is@^16.7.0:
   version "16.13.1"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
   integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==