Remix Utils

Loading "Honeypot Protection with Remix Utils"

👨‍💼 We're going to use remix-utils to put together the honeypot in the UI and check it in our action. This is going to require a bit of setup because it can do more than just handle the single field for us.

First you're going to need to create

app/utils/honeypot.server.ts

to create a honeypot instance. For example:

import { Honeypot } from 'remix-utils/honeypot/server'

export const honeypot = new Honeypot({
	validFromFieldName: 'validFrom',
	encryptionSeed: process.env.HONEY_POT_ENCRYPTION_SEED,
	nameFieldName: 'name',
	randomizeNameFieldName: true,
})

We don't need all those options just yet though. In fact, for this first bit, we just want to set validFromFieldName to null for now. We'll get to the rest of the options later.

Once you have that set up, you can use it in the action of

app/routes/_auth+/signup.tsx

. For example:

try {
	honeypot.check(formData)
} catch (error) {
	if (error instanceof SpamError) {
		throw new Response('Form not submitted properly', { status: 400 })
	}
	throw error
}

The SpamError comes from remix-utils/honeypot/server.

And then for the UI, you can replace our custom input stuff with <HoneypotInputs /> from remix-utils/honeypot/react.

Good luck!

06. Honeypot/02. Remix Utils (💪 problem)

Remix Utils