Does reCAPTCHA only work when the site is deployed?

[briankendall]

I just added reCAPTCHA public and secret keys to my project's config.env file. Now when I try to log in, it immediately fails with a "recaptcha" error, and nothing gets printed to the logs indicating what went wrong. I noticed that the documentation page that describes how to set up reCAPTCHA is the "Deploy to production" page. Is this failing because reCAPTCHA only works on a fully deployed app? If not, any idea what's going wrong, or how to get more diagnostic information about what's going wrong?

[jacobobryant]

You probably need to add localhost / localhost:8080 to the list of approved domains in the recaptcha admin console. when that isn't configured, the client side recaptcha sdk won't even send a request to your backend.

that being said if you're getting an actual error message in the UI, this might be something different. let me know if the admin settings make a difference.

[briankendall]

I already added localhost to the list of approved domains, and it instructs not to include port numbers, so something else is going wrong.

On a whim I just tried it in Firefox and got these messages printed to the Javascript console:

Warning: Partitioned cookie or storage access was provided to “https://www.google.com/recaptcha/api2/anchor?ar=1&k=....[long URL omitted]” because it is loaded in the third-party context and dynamic state partitioning is enabled.
Error: Cookie “_GRECAPTCHA” has been rejected because it is foreign and does not have the “Partitioned“ attribute.

And now I notice that Chrome is printing these messages in the console:
Chrome is moving towards a new experience that allows users to choose to browse without third-party cookies.

So maybe third party cookies are messing things up?

[jacobobryant]

hmm, that does look interesting/foreboding... I'll try to reproduce that next time I get a chance. I'm assuming that Google would be pretty on top of making sure recaptcha works with chrome... but if there are complications, always could use a different captcha provider. One of the things on my list is to make that a bit more pluggable in biff so it's easier to switch.

[briankendall]

From some cursory searching, it seems that recaptcha works without third party cookies, so there's probably something else going on. This is just a guess, but maybe it has to do with the site's hostname being localhost or not connecting using HTTPS?

[jacobobryant]

The site being on localhost should be fine, e.g. see https://developer.mozilla.org/en-US/docs/Web/Security/Mixed_content#loading_locally_delivered_mixed-resources.

I just updated chrome and firefox and tried to replicate this, however it's working on my end. In firefox I also got the same console message about partitioned cookie (no message in chrome though).

Next things I would try:

1. verify that the frontend is sending a request to http://localhost:8080/auth/send-link. e.g. you should see 303 post /auth/send-link in your backend logs after clicking the "Sign up" button.
2. assuming that endpoint is getting hit, make the request go to a new endpoint, and add some logs to the handler:

M starter/src/com/example/home.clj
@@ -16,7 +16,7 @@
   (ui/page
    (assoc ctx ::ui/recaptcha true)
    (biff/form
-    {:action "/auth/send-link"
+    {:action "/test-recaptcha"
      :id "signup"
      :hidden {:on-error "/"}}
     (biff/recaptcha-callback "submitSignup" "signup")
@@ -165,10 +165,35 @@
             {:type "submit"})
      "Send another code"])))
 
+(defn test-recaptcha [{:keys [biff/secret biff.recaptcha/threshold params]
+                       :or {threshold 0.5}}]
+  (let [request {:form-params {:secret (secret :recaptcha/secret-key)
+                               :response (:g-recaptcha-response params)}
+                 :as :json}
+        _ (println "REQUEST")
+        _ (biff/pprint request) ; Don't paste the output of this anywhere public
+        _ (println)
+        response (http/post "https://www.google.com/recaptcha/api/siteverify"
+                            request)
+
+        _ (println "RESPONSE")
+        _ (biff/pprint response)
+        _ (println)
+        {:keys [success score]} (:body response)
+
+        success (and success (or (nil? score) (<= threshold score)))
+        _ (println "SUCCESS")
+        _ (prn success)
+        _ (println)
+        ]
+    {:status 303
+     :headers {"location" "/"}}))
+
 (def module
   {:routes [["" {:middleware [mid/wrap-redirect-signed-in]}
              ["/"                  {:get home-page}]]
             ["/link-sent"          {:get link-sent}]
             ["/verify-link"        {:get verify-email-page}]
             ["/signin"             {:get signin-page}]
-            ["/verify-code"        {:get enter-code-page}]]})
+            ["/verify-code"        {:get enter-code-page}]
+            ["/test-recaptcha"     {:post test-recaptcha}]]})

(That code is taken and modified from the auth module.)

When I hit sign up with this code, I get the following (with the request details redacted--be sure not to paste your own output here unless you redact the recaptcha secret):

REQUEST
{:form-params
 {:secret "<redacted>",
  :response
  "<big long string>"},
 :as :json}

RESPONSE
{:cached nil,
 :request-time 81,
 :repeatable? false,
 :protocol-version {:name "HTTP", :major 1, :minor 1},
 :streaming? true,
 :http-client
 #object[org.apache.http.impl.client.InternalHttpClient 0x41a6845 "org.apache.http.impl.client.InternalHttpClient@41a6845"],
 :chunked? true,
 :reason-phrase "OK",
 :headers
 {"Server" "ESF",
  "Content-Type" "application/json; charset=utf-8",
  "X-Content-Type-Options" "nosniff",
  "Alt-Svc" "h3=\":443\"; ma=2592000,h3-29=\":443\"; ma=2592000",
  "X-Frame-Options" "SAMEORIGIN",
  "Connection" "close",
  "Pragma" "no-cache",
  "Transfer-Encoding" "chunked",
  "Cross-Origin-Resource-Policy" "same-site",
  "Expires" "Mon, 01 Jan 1990 00:00:00 GMT",
  "Date" "Tue, 24 Jun 2025 06:23:11 GMT",
  "Cross-Origin-Opener-Policy-Report-Only"
  "same-origin; report-to=\"coop_38fac9d5b82543fc4729580d18ff2d3d\"",
  "X-XSS-Protection" "0",
  "Report-To"
  "{\"group\":\"coop_38fac9d5b82543fc4729580d18ff2d3d\",\"max_age\":2592000,\"endpoints\":[{\"url\":\"https://csp.withgoogle.com/csp/report-to/38fac9d5b82543fc4729580d18ff2d3d\"}]}",
  "Cache-Control" "no-cache, no-store, max-age=0, must-revalidate"},
 :orig-content-encoding "gzip",
 :status 200,
 :length -1,
 :body
 {:success true,
  :challenge_ts "2025-06-24T06:23:03Z",
  :hostname "localhost"},
 :trace-redirects []}

SUCCESS
true

Let me know what you see there. e.g. does the request look correct? what's the :body value from the response--any error messages perhaps?

[briankendall]

I gave this a try, and saw that, in the request, :response had a nil value, and figured I must be missing something in my code. I discovered I had forgot to add ::ui/recaptcha true to ctx when calling ui/page (i.e. didn't use (assoc ctx ::ui/recaptcha true)). Once I added that, it all started working! Thanks for the help!

[jacobobryant]

ah nice! glad it's resolved. I'll make a mental note of that; maybe I can add some better error messages or something for that situation.