In this episode, we dive into how to actually get the reCAPTCHA token from the client side into your form so that it can be sent to your backend server when the user submits the form. To start, we explore the basics of using Alpine.js to store the token and show it in the template, just so we can see what's happening under the hood (even though exposing it like this isn't production-safe).
Next up, we add a hidden input field to the form and bind the value of the reCAPTCHA token using Alpine's binding techniques. This way, when the form gets submitted, the token is sent along with the rest of the form data without the user seeing it. You’ll also see how to actually trigger the form submission programmatically in Alpine after the token has been updated (using Alpine’s $nextTick
), ensuring everything is synced up.
We then take a peek at the backend (using Laravel Breeze in this example) to confirm that the token is actually being received. This is where we dump the value on the server-side to check everything is wired up correctly.
But we don’t stop there! You'll learn why manually adding hidden fields isn’t flexible if you want to use reCAPTCHA on multiple forms and get a glimpse at how we’ll automate this with JavaScript soon. Finally, we wrap up by prepping for the next stage: adding middleware to handle token validation with Google’s API, which will really tidy up and finalize our implementation.
So, by the end of this episode, you’ll have a working flow that passes the reCAPTCHA token from your form to your backend. In the next episode, we’ll make this setup even cleaner and more reusable!