The security Livewire public methods needed!

The reason for this package is to address Livewire's current weakness of forcing the developer to expose certain methods to the public in order for the front-end (AlpineJS) to be able to communicate with it; parameters included...

And if you ask, why wouldn't you do sensitive, protected stuff in Livewire component only, and why would you need to expose them in the first place? WELL, how about YOU try using Sanctum and see how things go! Hitting APIs that are auth:sanctum middleware-protected is impossible. And the only approach is to rely on axios in your TALL views to communicate with APIs after being authenticated with Sanctum.

This back-and-forth will draw you to think about what to do with regard to protecting those public methods from being just hit from the client with ease (AKA. DDOSed). And we've concluded that a solution would be to NONCE into Laravel's cache instead of its session -because of the persistance approach that Livewire works with and the need to be able to access it from different places. An, yes, there is a unique identifier for the nonce cache key; part of the required interface.

Thanks for coming to my ta- Sorry. Enjoy the package and the awesome stacking like fine blacksmithery!

0. Ensure that both Livewire is installed, of course.

1. Ensure that cache is set up properly and ready to be used. Memcached is cool!

2. Install the package via composer:

   composer require vpremiss/livewire-nonceable

3. Publish the config file using this Artisan command:

   php artisan vendor:publish --tag="livewire-nonceable-config"

• In your Livewire component, implement our Noncing interface and its methods. Then apply the Nonceable trait as well.

  use Livewire\Component;
  use VPremiss\LivewireNonceable\Interfaces\Noncing;
  use VPremiss\LivewireNonceable\Traits\Nonceable;
  
  class FuzzySearch extends Component implements Noncing
  {
      use Nonceable;
  
      public function getNonces(): array
      {
          return [
              'complex-searching' => 5, // the nonce title, plus 5 seconds lasting in cache
              // 'heavy-processing' => 10, as another example
          ];
      }
  
      public function getNonceUniqueId(): string
      {
          return (string)auth()->user()->id; // After ensuring authentication, of course!
      }
  
      public function getNonceValidation(): bool
      {
          return auth()->user()->id === $this->getNonceUniqueId();
      }
  
      // This method is initiated securely
      protected function validateSearch($query)
      {
          // $validatedQuery = some validations
  
          $nonce = $this->generateNonce('complex-searching');
  
          $this->dispatch(
              'searching-began', // receive in the front-end (SPA)
              query: $validatedQuery,
              nonce: $nonce,
          );
      }
  
      // This is hit back from AlpineJS using axios
      public function complexSearch($responseFromApi, $nonce)
      {
          // Approach 1
  
          // Or use the opposite ! $this->doesNonceExist($title, $nonce) method
          if ($this->isNonceSense('complex-searching', $nonce)) {
              // throw new NoncenseException('Nonce mismatch. Somebody is playing around!');
          }
  
          $this->deleteNonce('complex-searching', $nonce);
  
          // Approach 2
  
          if (!$this->validatedNonce('complex-searching', $nonce)) {
              // throw or whatever but that's all, since it would have deleted the nonce otherwise
          }
  
          // do the complex searching now with an ease of mind...
      }
  }

• And you may also utilize these 2 checking methods from the view:

  <div
      x-on:searching-began.window="callApi($event.detail.query, $event.detail.nonce)"
      x-data='{
          callApi(query, nonce) {
              // or the opposite ! $wire.isNonceSense(title, nonce)
              if ($wire.doesNonceExist("complex-searching", nonce)) {
                  axios
                      .post(
                          "{{ "some-route" }}",
                          {
                              query: query,
                              nonce: nonce,
                          },
                      )
                      .then(response => $wire.complexSearch(response, nonce))
                      .catch(error => console.error(error));
              }
          },
      }'
  >
     {{-- ... --}}
  </div>

And again, just to recap: we CANNOT work around not making the complexSearch method public because we need to call it from the only place where Sanctum allows API calls to its protected routes: the front-end...

If you found a better way to deal around this, please let us know in the discussions section.

Below is the table of key methods provided by the LivewireNonceable package along with their descriptions:

• Change the localTimezone to yours in the [TestCase] file.

You can check out the package's changelogs online via WTD.

You can also checkout the project's roadmap among others in the organization's dedicated section for projects.

Support ongoing package maintenance as well as the development of other projects through sponsorship or one-time donations if you prefer.

And may Allah accept your strive; aameen.

This package is open-sourced software licensed under the MIT license.

• ChatGPT
• Graphite
• Laravel
• Livewire
• Spatie
• BeyondCode
• The Contributors
• All the backend packages and services this package relies on...
• And the generous individuals that we've learned from and been supported by throughout our journey...