Rails 7 / Turbo : g-recaptcha-response is empty

[jeygeethan]

Whenever I am using rails 7 which is essentially saying using turbolinks for forms, my g-recaptcha-response is blank spaces " "

Version: recaptcha_v2

Solution

If I turn off the turbolinks, data: { turbo: false } in the form, it works again.

[grosser]

can you add this tip to the readme or make a PR to fix the issue ?

On Sun, Apr 17, 2022 at 11:07 PM Jey Geethan @.***> wrote:

Whenever I am using rails 7 which is essentially saying using turbolinks for forms, my g-recaptcha-response is blank spaces " "

Version: recaptcha_v2

Solution

If I turn off the turbolinks, data: { turbo: false } in the form, it works again.

— Reply to this email directly, view it on GitHub https://github.com/ambethia/recaptcha/issues/407, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAACYZ2YKRPY5JUAATUAJ43VFT32HANCNFSM5TVBRAAA . You are receiving this because you are subscribed to this thread.Message ID: @.***>

[byteg]

Having the same issue with Rails 7. Disabling turbolinks with data: { turbo: false } helps only for the second captcha check. The first check always returns blank g-recaptcha-response. Any solution for this?

[rzepetor]

@byteg @jeygeethan if you inspect html code you can see that there are two 'g-recaptcha-response' inputs so please use recaptcha_tags noscript: false

[byteg]

@rzepetor thank you so much! Now it works :)

[rzepetor]

@byteg I have other problem, recaptcha verify always fail and I don't know why, its render normally in form, green check icon is showing, in params I have 'g-recaptcha-response' but it always fails :disappointed: maybe you know why or have any clue?

[bodrovis]

For anyone who's having this issue with Turbo and does not want to disable it, this article should help: https://dev.to/fadrien/rails-devise-and-recaptcha-with-hotwire-turbo-and-stimulus-2hoh

Actually, I had exactly the same issue: even if Turbo is disabled, captcha was reported as invalid on every request.

Also, if you are using only recaptcha v2, make sure to include the corresponding script somewhere on your page:

<% provide :scripts do %>
  <script src="https://www.recaptcha.net/recaptcha/api.js" async="" defer=""></script>
<% end %>

[grosser]

some readme instructions for this would be nice, can you make a PR ?

On Tue, Jun 21, 2022 at 6:29 AM Ilya Krukowski @.***> wrote:

For anyone who's having this issue, this article should help: https://dev.to/fadrien/rails-devise-and-recaptcha-with-hotwire-turbo-and-stimulus-2hoh

Also, if you are using only recaptcha v2, make sure to include the corresponding script somewhere on your page:

<% provide :scripts do %> <% end %>

— Reply to this email directly, view it on GitHub https://github.com/ambethia/recaptcha/issues/407#issuecomment-1161751407, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAACYZ42IRMDVERCI6CIF7LVQG7UVANCNFSM5TVBRAAA . You are receiving this because you commented.Message ID: @.***>

[bodrovis]

I'd love to. However I did some more experiments and it seems this setup is only partially working. For example:

• I fully reload the login page, enter my email/password and enter the system --> everything is working, recaptcha v3 reports success
• I open another page and then proceed to the login page by clicking the corresponding link (all pages have Turbo enabled) --> recaptcha verification always fails on the first form submit (it seems to be happening with both v2 and v3).

For now I haven't found a way to fix this :(

[bodrovis]

Actually, I might have found a potential solution. Will experiment more and if it works, I'll submit a PR

[bodrovis]

@grosser Yay, I think I got it working. Here's a PR with a small notice regarding Turbo/Stimulus https://github.com/ambethia/recaptcha/pull/413

[chloerei]

Setting noscript: false solved my problem.

I wonder why add a textarea in noscript?

https://github.com/ambethia/recaptcha/blob/1ac1d61ab1e00c85bf282cb662194827a4bfd957/lib/recaptcha/helpers.rb#L76-L80

[grosser]

Can you try digging into the git history and making a fixup PR if that seems to be just an accident ?

On Sun, Aug 7, 2022 at 1:37 AM Rei @.***> wrote:

Setting noscript: false solved my problem.

I wonder why add a textarea in noscript?

https://github.com/ambethia/recaptcha/blob/1ac1d61ab1e00c85bf282cb662194827a4bfd957/lib/recaptcha/helpers.rb#L76-L80

— Reply to this email directly, view it on GitHub https://github.com/ambethia/recaptcha/issues/407#issuecomment-1207358844, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAACYZ4QE3JLK6E4DJQF4LLVX5YUJANCNFSM5TVBRAAA . You are receiving this because you were mentioned.Message ID: @.***>

[chloerei]

@grosser

I found two related commits, date back to 2014.

4d30e9fda34df11c275a38df0f5e3444d47c4871 aee249b437a813d1963e4235e64018029e623038

I did some tests, when open without turbolinks, recaptcha will set the content of noscript to text. when open with turbolinks, it will not be set to text, which results in two textarea.

It should still be related to tubolinks.

[grosser]

is there an improvement you can suggest or maybe some better docs ?

[chloerei]

Currently I use this way:

Add api script in layout's head:

  <head>
    ...
    <script src="https://www.recaptcha.net/recaptcha/api.js" async defer></script>
  </head>

Do not add this script in body, it will cause the api script to be loaded repeatedly.

Tips: It can be selectively loaded using yield :head and content_for :head.

Add this element where recaptcha is required:

<div class="g-recaptcha" data-controller="recaptcha" data-sitekey="<%= ENV['RECAPTCHA_SITE_KEY'] %>"></div>

When this page is the first page visited, it will be rendered by the api script. A stimulus controller is required to handle the case of turbolinks visit.

// recaptcha_controller.js
import { Controller } from "@hotwired/stimulus"

export default class extends Controller {
  connect() {
    // Skip this if grecaptcha has not been loaded or has already been rendered.
    if (window.grecaptcha && window.grecaptcha.render && this.element.childElementCount == 0) {
      grecaptcha.render(this.element, {
        'sitekey' : this.element.dataset.sitekey
      })
    }
  }
}

The above method can solve the problem of repeated loading and rendering timing in the turbolinks environment.

---

The noscript content is used to add a fallback validation method. But I found that this method seems to be invalid. You can turn off javascript and visit this page to test, it will prompt you to enable javascript:

https://www.google.com/recaptcha/api2/demo

But there is another page that shows it works, I don't know why:

https://www.google.com/recaptcha/api/fallback?k=6LdAvUIUAAAAAHjrjmjtNTcXyKm0WKwefLp-dQv9

[bodrovis]

There's no need to make it so complex. The method I've described here https://github.com/ambethia/recaptcha/wiki/Recaptcha-with-Turbo-and-Stimulus works fine with Turbo (not Turbolinks) and Stimulus. I've been using it for a couple of months already and everything seems to be okay

[korolevych-b]

noscript: false

Thanks!