Laravel 13 - How to Integrate Google reCAPTCHA v2 with Livewire.

Quick Overview

Step # 1 : Create a Fresh Laravel 13 Application with Livewire Authentication.

composer global require laravel/installer

laravel new reCAPTCHAV2

• Starter Kit: Select Yes to use a starter kit.
  
• Kit: Select Livewire so the application uses Livewire for its components.
  
• Authentication Provider: Select Laravel's built-in authentication to include the standard registration and login functionality.
  
• Single-file Livewire Components: Choose Yes to keep the component's PHP logic and view in the same file.
  
• Teams Support: Select No, as team functionality isn't needed for this application.
  
• Authentication Features: Select Registration, as we only need user registration functionality for now.
  
• Boost Features: Hit Enter to select none, as Boost features aren't required for this application.
  
• Third-party AI Guidelines/Skills: Hit Enter to select none, as no third-party AI guidelines or skills are required for this application.
  
• Boost Integrations: Hit Enter to select none, as no Boost integrations are required for this application.
  
• AI Agents: Select Amp as the AI agent for this application.
  
  

Step # 2: Navigate to the reCAPTCHAV2 Project.

cd C:\xampp\htdocs\reCAPTCHAV2

cd C:\xampp\htdocs\reCAPTCHAV2

cd /c/xampp/htdocs/reCAPTCHAV2

Step # 3 : Add the reCAPTCHA V2 Package to Laravel.

composer require anhskohbo/no-captcha

Step # 4 : Publish the reCAPTCHA V2 Configuration.

php artisan vendor:publish --provider="Anhskohbo\NoCaptcha\NoCaptchaServiceProvider"

Step # 5 : Generate Google reCAPTCHA V2 Credentials.

1. Go to the reCAPTCHA Admin Console : https://www.google.com/recaptcha/admin/create
   
   
2. Log in using your Google account. If you don’t have an account, you can create one before continuing.
   
   
3. Enter a suitable label for your website so you can recognize the project easily in the future.
   
   
4. Under the reCAPTCHA type, select reCAPTCHA v2, and then choose the “I’m not a robot” Checkbox option.
   
   
5. Enter your website domain in the domain field. For a Laravel project running on your local machine, you can add 127.0.0.1.
   
   
6. Click Submit to register the site and generate the required reCAPTCHA keys.
   
   

NOCAPTCHA_SITEKEY="your-site-key"
NOCAPTCHA_SECRET="your-secret-key"

Step # 6 : Integrate Google reCAPTCHA V2 into the Registration Form.

<!-- Load the required JavaScript for reCAPTCHA V2--> 
{!! NoCaptcha::renderJs() !!}

<!-- Google reCAPTCHA V2 -->
<div class="mt-4 w-full flex flex-col items-center">
    <!-- Render the reCAPTCHA widget -->
    <div>
        {!! NoCaptcha::display() !!}
    </div>
    <!-- Display the validation error -->
    @error('g-recaptcha-response')
        <p class="text-red-500 text-sm mt-1">
            {{ $message }}
        </p>
    @enderror
</div>

Step # 7 : Validate the reCAPTCHA v2 Response.

<?php
namespace App\Actions\Fortify;
use App\Concerns\PasswordValidationRules;
use App\Concerns\ProfileValidationRules;
use App\Models\User;
use Illuminate\Support\Facades\Validator;
use Laravel\Fortify\Contracts\CreatesNewUsers;
class CreateNewUser implements CreatesNewUsers
{
    use PasswordValidationRules, ProfileValidationRules;
    /**
     * Validate and create a newly registered user.
     *
     * @param array<string, string> $input
     */
    public function create(array $input): User
    {
        Validator::make($input, [
            ...$this->profileRules(),
            'password' => $this->passwordRules(),
            // Validate the submitted reCAPTCHA response
            'g-recaptcha-response' => 'required|captcha',
        ])->validate();
        return User::create([
            'name' => $input['name'],
            'email' => $input['email'],
            'password' => $input['password'],
        ]);
    }
}

Step # 8 : Verify the reCAPTCHA V2 Integration.

php artisan serve

Conclusion