Noting Found

View all related articles

Enhancing Security and User Experience: Leveraging reCAPTCHA with Laravel and Livewire

Laravel 3 mins read

Table of Content


    This article is an updated version, of the previous one here

    Google reCAPTCHA is a captcha like system. It assures that a computer user is a human. It is the best and most used captcha system available, where users are only required to click on a checkbox and in some cases select some similar images.

    In this article, we will discuss how to implement Google reCAPTCHA in Laravel livewire projects. Just follow the below given easy steps to add Google reCAPTCHA into your livewire form, and you are ready to go.

    Note If you are already an expert, and know how to deal with Laravel, and livewire. Just jump into the 9th step

    I will guide you through these whole steps, all what I need from you to just bear with me. :)

    What is Laravel Livewire?

    Livewire is a full-stack framework for Laravel that makes building dynamic interfaces simple, without leaving the comfort of Laravel.

    Step 1: Download Laravel app

    the first step you're gonna to need is the installation of a fresh Laravel app (if you don't have an existing project) and I will be using Laravel ^10 and Livewire ^2

    1composer create-project --prefer-dist laravel/laravel recaptcha-app


    1laravel new recaptcha-app

    after the installation goes well, you need to run NPM installation to scaffold the front-end

    1npm install && npm run dev

    Step 2: Add Database Credentials

    You need to add the database credentials to store the messages after the user submitting the form.

    In this case, I'll be using MySQl as a database driver.


    Step 3: Create Contact Model

    After setting up the database, we need to create a new model called Contact by running:

    1php artisan make:model Contact -m

    The -m Flag is for creating a migration file.

    For the sack of this example, I'll keep it simple, I just added an email field and a body

    1public function up()
    3 Schema::create('contacts', function (Blueprint $table) {
    4 $table->id();
    5 $table->string('email');
    6 $table->text('body');
    7 $table->timestamps();
    8 });

    After that, we add the fillable fields in the Contact model.

    1class Contact extends Model
    3 use HasFactory;
    5 protected $fillable = ['email', 'body'];

    Step 5: Run Migration Command

    After creating the project, adding the database credentials, and adding the model, we must run the migration command by:

    1php artisan migrate

    and after the migration, you will see in the contacts' table something like this:

    Step 6: Install livewire to your existing project

    We arrived at the exciting part 😊 which is installing Laravel livewire.

    1composer require livewire/livewire

    After the installation process completed successfully, We will add the following blade directives in the head tag, and before the end body tag in your template.

    5 ...
    6 @livewireStyles
    9 ...
    10 @livewireScripts

    You can alternatively use the tag syntax.

    1<livewire:styles />
    3<livewire:scripts />

    After that, we need to publish the config file and the Frontend Assets

    1php artisan livewire:publish --config
    1php artisan livewire:publish --assets

    Step 7: Generate livewire Component

    After we're successfully installing Livewire into our project, We need to generate a new component:

    1php artisan livewire:make contact

    This command will generate 2 files,

    1CLASS: app/Http/Livewire/Contact.php
    2VIEW: resources/views/livewire/contact.blade.php

    Step 8: Add Routes

    Now we need to add some routes into our application to show the contact form.

    In your routes/web.php add the following:

    1Route::get('/contact', App\Http\Livewire\Contact::class)->name('contact');

    Step 9: add Google reCAPTCHA

    In this part we will be using reCAPTCHA V2 and all what you need to do is the following:

    First add the captcha key and secret into the .env file


    and in contact.blade.php

    1<form wire:submit.prevent="store">
    2 <div class=" mt-5">
    3 <label class="block uppercase tracking-wide text-grey-darker text-gray-600 text-lg font-bold mb-2"
    4 for="email">
    5 {{__('Email Address')}}
    6 </label>
    7 <input type="text"
    8 name="email"
    9 wire:model.debounce.365ms="email"
    10 placeholder="{{__('Enter Your Email address')}}"
    11 class="border p-3 rounded form-input focus:outline-none w-full shadow-md focus:shadow-lg transition duration-150 ease-in-out"
    12 value="{{old('email')}}">
    13 @error('email')
    14 <p class="text-red-700 font-semibold mt-2">
    15 {{$message}}
    16 </p>
    17 @enderror
    18 </div>
    20 <div class=" mt-5">
    21 <label class="block uppercase tracking-wide text-grey-darker text-gray-600 text-lg font-bold mb-2">
    22 {{__('Your message')}}
    23 </label>
    24 <textarea name="body" id=""
    25 cols="10"
    26 rows="6"
    27 wire:model.debounce.365ms="body"
    28 placeholder="{{__('Enter Your Message')}}"
    29 class="border p-2 mt-3 w-full form-textarea shadow-md focus:outline-none focus:shadown-lg transition duration-150 ease-in-out rounded-sm">{{old('body')}}</textarea>
    30 @error('body')
    31 <p class="text-red-700 font-semibold mt-2">
    32 {{$message}}
    33 </p>
    34 @enderror
    35 </div>
    37 <div id="captcha" class="mt-4" wire:ignore></div>
    39 @error('captcha')
    40 <p class="mt-3 text-sm text-red-600 text-left">
    41 {{ $message }}
    42 </p>
    43 @enderror
    46 <button type="submit"
    47 class="some-button-style">
    48 Submit
    49 </button>

    after we place the form, we must add google captcha scripts

    1<script src="https://www.google.com/recaptcha/api.js?onload=handle&render=explicit"
    2 async
    3 defer>
    7 var handle = function(e) {
    8 widget = grecaptcha.render('captcha', {
    9 'sitekey': '{{ env('CAPTCHA_SITE_KEY') }}',
    10 'theme': 'light', // you could switch between dark and light mode.
    11 'callback': verify
    12 });
    14 }
    15 var verify = function (response) {
    16 @this.set('captcha', response)
    17 }

    and in your Contact Component do the following

    1// ...
    3public $captcha = null;
    5public function updatedCaptcha($token)
    7 $response = Http::post(
    8 'https://www.google.com/recaptcha/api/siteverify?secret='.
    9 env('CAPTCHA_SECRET_KEY').
    10 '&response='.$token
    11 );
    13 $success = $response->json()['success'];
    15 if (! $success) {
    16 throw ValidationException::withMessages([
    17 'captcha' => __('Google thinks, you are a bot, please refresh and try again!'),
    18 ]);
    19 } else {
    20 $this->captcha = true;
    21 }
    24// validate the captcha rule
    25protected function rules()
    27 return [
    28 'captcha' => ['required'],
    29 // ...
    30 ];
    33// ...

    Once you verify that you are not a bot, the script above will check, and send an encrypted token to your backend to verify, and return if there are any issues as a session error on the captcha attribute.

    Step 10: Run Development Server

    After setting up all the dependencies, run your development server by:

    1php artisan serve

    Or any kind of methods you like, such as valet or homestead … Etc


    In this article we take a look at Google reCAPTCHA and how to implement it using Laravel and Laravel livewire, for more information about google reCAPTCHA, you can take a look at the official documentation.

    Thank you for stopping by, and I hope you find something useful.

    Related Tags

    About the Author

    Oussama's Profile Picture
    Full Stack Web Developer | Technical Writer

    Oussama is an experienced full-stack web developer with a strong focus on Laravel. He's passionate about crafting web applications with Filament and the TALL Stack. With 8+ years of experience, and he's a dedicated open-source contributor.


    Join our newsletter

    Subscribe to Our Newsletter and never miss our offers, latest news, Articles, etc.

    We care about the protection of your data. Read our Privacy Policy.