Integrate Google reCAPTCHA v3 and refactor profile

Vilkrin · Vilkrin · commit 05611dcb1215 · 2025-12-29T11:30:36.000Z
Added josiasmontag/laravel-recaptchav3 package and integrated Google reCAPTCHA v3 into the registration form for enhanced security. Updated environment variable names for reCAPTCHA configuration. Refactored the profile page to use the ProfileMain Livewire component, simplifying the view and improving maintainability. Minor UI and code improvements were also made.
diff --git a/.env.example b/.env.example
@@ -74,5 +74,5 @@ TINYMCE_API=
 COOKIEBOT_ID=
 
 # Google reCAPTCHA v3
-RECAPTCHA_SITE_KEY=your_site_key_here
-RECAPTCHA_SECRET_KEY=your_secret_key_here
+RECAPTCHAV3_SITEKEY=sitekey
+RECAPTCHAV3_SECRET=secret
diff --git a/app/Livewire/Auth/Register.php b/app/Livewire/Auth/Register.php
@@ -30,6 +30,7 @@ public function register(): void
             'name' => ['required', 'string', 'max:255'],
             'email' => ['required', 'string', 'lowercase', 'email', 'max:255', 'unique:' . User::class],
             'password' => ['required', 'string', 'confirmed', Rules\Password::defaults()],
+            'g-recaptcha-response' => 'required|recaptchav3:register,0.5'
         ]);
 
         $validated['password'] = Hash::make($validated['password']);
diff --git a/app/Livewire/ProfileMain.php b/app/Livewire/ProfileMain.php
@@ -3,16 +3,19 @@
 namespace App\Livewire;
 
 use Livewire\Component;
+use Illuminate\Support\Facades\Auth;
+use App\Models\User;
 
 class ProfileMain extends Component
 {
     public $name;
     public $email;
+    public User $user;
 
     public function mount()
     {
         $user = auth()->user();
-        $this->name = $user->name;
+        $this->user = Auth::user();
         $this->email = $user->email;
     }
 
diff --git a/composer.json b/composer.json
@@ -10,6 +10,7 @@
     "license": "MIT",
     "require": {
         "php": "^8.2",
+        "josiasmontag/laravel-recaptchav3": "^1.0",
         "laravel/framework": "^12.0",
         "laravel/nightwatch": "^1.13",
         "laravel/tinker": "^2.10.1",
diff --git a/composer.lock b/composer.lock
diff --git a/resources/views/components/layouts/main.blade.php b/resources/views/components/layouts/main.blade.php
@@ -27,6 +27,8 @@
         data-blockingmode="{{ config('services.cookiebot.blocking_mode') }}"
         type="text/javascript"></script>
 
+        <!-- Google ReCaptcha V3 -->
+        {!! RecaptchaV3::initJs() !!}
 
         <!-- Styles -->        
         @livewireStyles
diff --git a/resources/views/livewire/auth/register.blade.php b/resources/views/livewire/auth/register.blade.php
@@ -5,6 +5,7 @@
     <x-auth-session-status class="text-center" :status="session('status')" />
 
     <form method="POST" wire:submit="register" class="flex flex-col gap-6">
+        {!! RecaptchaV3::field('register') !!}
         <!-- Name -->
         <flux:input
             wire:model="name"
diff --git a/resources/views/livewire/avatar-uploader.blade.php b/resources/views/livewire/avatar-uploader.blade.php
@@ -1,7 +1,6 @@
 
     <form wire:submit="save">
 
-
                 <flux:file-upload wire:model="photo">
                 
                     <div
diff --git a/resources/views/livewire/profile-main.blade.php b/resources/views/livewire/profile-main.blade.php
@@ -77,6 +77,7 @@
                         <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
                         Save Changes
                       </button>
+                      <flux:button variant="primary" color="amber" wire:click="save">Save Changes</flux:button>
                     </div>     
                      </form>  
 
diff --git a/resources/views/profile/index.blade.php b/resources/views/profile/index.blade.php
@@ -50,86 +50,8 @@
 
                     </div>
 
-
-                     <form wire:submit.prevent="save">
-                    
-                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
-                      <!-- Full Name -->
-                      <div class="space-y-2">
-                        <label for="name" class="block text-sm font-medium leading-none text-slate-200">Name</label>
-                        <input id="name" value="{{ $user->name }}" class="flex h-10 w-full rounded-md border border-slate-700 bg-slate-900 px-3 py-2 text-base text-slate-100 ring-offset-slate-950 placeholder:text-slate-400 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-amber-400 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm" readonly />
-                      @error('name') <p class="text-red-500 text-sm">{{ $message }}</p> @enderror
-                      </div>
-
-                      <!-- Email -->
-                      <div class="space-y-2">
-                        <label for="email" class="block text-sm font-medium leading-none text-slate-200">Email</label>
-                        <div class="relative">
-                        <input id="email" type="email" value="{{ $user->email }}" class="flex h-10 w-full rounded-md border border-slate-700 bg-slate-900 px-3 py-2 text-base text-slate-100 ring-offset-slate-950 placeholder:text-slate-400 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-amber-400 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm" readonly />
-                         @error('email') <p class="text-red-500 text-sm">{{ $message }}</p> @enderror
-                          <div class="absolute right-3 top-1/2 -translate-y-1/2 flex items-center gap-2">
-                          @if ($user->email_verified_at)
-                              <span class="text-green-500 text-sm flex items-center gap-1">
-                                  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4">
-                                      <path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
-                                  </svg>
-                                  Verified
-                              </span>
-                          @else
-                              <span class="text-yellow-500 text-sm flex items-center gap-1">
-                                  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4">
-                                      <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m9-.75a9 9 0 11-18 0 9 9 0 0118 0zm-9 3.75h.008v.008H12v-.008z" />
-                                  </svg>
-                                  Not Verified
-                              </span>
-                              <a href="{{ route('verification.notice') }}" class="text-purple-400 hover:text-purple-300 text-sm">
-                                  Resend
-                              </a>
-                          @endif
-                          </div>
-                        </div>
-                      </div>
-
-                      <!-- Call Sign -->
-                      <div class="space-y-2">
-                        <label for="callSign" class="block text-sm font-medium leading-none text-slate-200">Call Sign</label>
-                        <input id="callSign" value="ALPHA-7" class="flex h-10 w-full rounded-md border border-slate-700 bg-slate-900 px-3 py-2 text-base text-slate-100 font-mono ring-offset-slate-950 placeholder:text-slate-400 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-amber-400 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm" />
-                      </div>
-
-                      <!-- Rank -->
-                      <div class="space-y-2">
-                        <label class="block text-sm font-medium leading-none text-slate-200">Rank</label>
-                        <div class="h-10 flex items-center">
-                          <span class="inline-flex items-center rounded-md border px-2.5 py-0.5 text-sm font-semibold border-slate-700 bg-slate-800 text-amber-400">
-                            <svg class="h-3 w-3 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8l-2 4h4l-2 4"/></svg>
-                            Captain
-                          </span>
-                        </div>
-                      </div>
-
-                      <!-- Join Date -->
-                      <div class="space-y-2">
-                        <label class="block text-sm font-medium leading-none text-slate-200">Join Date</label>
-                        <div class="h-10 flex items-center text-slate-300">
-                          <svg class="h-4 w-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3M4 11h16M5 19h14a2 2 0 002-2v-7H3v7a2 2 0 002 2z"/></svg>
-                          2953.03.15
-                        </div>
-                      </div>
-
-                      <!-- Flight Hours -->
-                      <div class="space-y-2">
-                        <label class="block text-sm font-medium leading-none text-slate-200">Flight Hours</label>
-                        <div class="h-10 flex items-center text-slate-300 font-mono">1,247</div>
-                      </div>
-                    </div>                     
-                     
-                    <div class="flex justify-end pt-4">
-                      <button id="saveBtn" class="inline-flex items-center gap-2 h-9 px-4 bg-amber-400 text-slate-900 rounded-md text-sm font-medium hover:bg-amber-300">
-                        <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
-                        Save Changes
-                      </button>
-                    </div>     
-                     </form>               
+                      <livewire:profile-main />
+            
                   </div>                 
                 </div>
 
diff --git a/routes/web.php b/routes/web.php
@@ -52,6 +52,7 @@
 
     Route::get('/', [ProfileController::class, 'index'])->name('index');
     Route::post('/', [ProfileController::class, 'update'])->name('update');
+    Route::resource('profile', ProfileController::class);
 });
 
 // Org Services

Original file line number	Diff line number	Diff line change
`@@ -3,16 +3,19 @@`
`3`	`3`	`namespace App\Livewire;`
`4`	`4`
`5`	`5`	`use Livewire\Component;`
	`6`	`+use Illuminate\Support\Facades\Auth;`
	`7`	`+use App\Models\User;`
`6`	`8`
`7`	`9`	`class ProfileMain extends Component`
`8`	`10`	`{`
`9`	`11`	`public $name;`
`10`	`12`	`public $email;`
	`13`	`+ public User $user;`
`11`	`14`
`12`	`15`	`public function mount()`
`13`	`16`	`{`
`14`	`17`	`$user = auth()->user();`
`15`		`- $this->name = $user->name;`
	`18`	`+ $this->user = Auth::user();`
`16`	`19`	`$this->email = $user->email;`
`17`	`20`	`}`
`18`	`21`
-Original file line number
+Diff line change
@@ @@ -1,7 +1,6 @@ @@
     <form wire:submit="save">
+-
                 <flux:file-upload wire:model="photo">
                     <div