Doesn't work with Phoenix Live View

[michaelforrest]

I'm struggling to get this to work with Phoenix Live View.

The live view submit handler is called before the recaptcha javascript can go through its sequence and update the form with a g-recaptcha-response field.

Here I'm inspecting the form generated with a phx_submit callback. The second handler is recaptcha's code, but the form has already been handled via live view by the time it gets to recaptchaCallback

I'm looking into live view's JS interoperability features but I'm not seeing a hook function that can be inserted before the submit event.

Actually it doesn't ever seem to be calling recaptchaCallback - I'm not sure how JS scope works if elements containing functions are replaced in the DOM. I see that the form value is being assigned to the window scope so maybe that's getting overwritten somehow as part of the live view render sequence.

I expect I'll be updating this thread with my findings as I go. Sorry not to have a test case for you.

[michaelforrest]

I feel like I need to update the recaptcha result with an update callback in a live view hook (instead of on form submit) but this would run the risk of getting stale if a user takes too long to finish the form. But I'm not sure how else to insert it into the sequence.

[ivanhercaz]

Hi @michaelforrest! I am using ReCaptacha on a LiveView too and I had problems rendering it: Recaptcha.Template.display/1 renders the script tag and the container div but not the iframe. But... I solved it adding phx-update=ignore to the container div in which I added the display function.

I hope it can helps you. Although is not complicated, I leave here the code in case it can helps to illustrate what I explained:

<div phx-update="ignore">
  <%= raw Recaptcha.Template.display(hl: "es") %>
</div>

[michaelforrest]

Thanks @ivanhercaz - I wasn't aware of phx-update="ignore" (somehow missed it despite having trawled through the docs and source code) so even though I'm now handling recaptcha outside of a live view this will be something to try next time!

[guess]

Thanks @ivanhercaz! This should really be added to the documentation.