Remix Utils
Loading "Honeypot Protection with Remix Utils"
Run locally for transcripts
๐จโ๐ผ 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.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.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!
