@adocasts.com/adonisjs-honeypot

AdonisJS Honeypot

A simple way to keep pesky bots from submitting your forms.

AdonisJS Honeypot allows you to easily add a honeypot system to your application to prevent bots from submitting your forms. AdonisJS Honeypot will add fields to your form that aren't visible to the user, but are to bots! Then, it validates that all fields have been left untouched. If any fields have been filled, we know a bot has submitted.

Installation

First install the package as a dependency on your project

npm i @adocasts.com/adonisjs-honeypot

Then configure it within your project

node ace configure @adocasts.com/adonisjs-honeypot

Lastly, add it as a middleware within your project.

// start/kernel.ts

Server.middleware.registerNamed({
  honeypot: () => import('@ioc:Adocasts/Honeypot') // 👈
})

Also, be sure to define custom honeypot fields within config/honeypot.ts. The more realistic the field names the more likely the honeypot is to work. However, be sure the field names won't conflict with any fields in your site.

// here are the default fields
fields: ['ohbother', 'ohpiglet', 'ohpoo', 'firstName', 'lastName'],

Usage

To add honeypot to a form submission, first apply the middleware to your route(s).

Route
  .post('/signup', 'AuthController.signup')
  .middleware(['honeypot']) // 👈

This will require the honeypot fields to be submitted within your request's body. So, last thing we need to do is add the fields to your form.

When you configured @adocasts/adonisjs-honeypot within your project, we registered a global component named honeypot. This single component will render all the configured honeypot fields and also hide them using CSS so they're visible to bots, but not to humans.

So, all you need to do is add this component within your form!

<form action="{{ route('auth.signup') }}" method="POST">
  @!component('honeypot') {{-- 👈 --}}

  {{-- ... other form fields ... --}}
</form>