Facaptcha NPM | npm.io

faCAPTCHA

👉 Try it out: dylandbl.github.io/faCAPTCHA

A functional, configurable, and accessible frontend CAPTCHA for React. The name is a portmanteau of 'fake' and 'CAPTCHA', and was initially an exploration in bad UX, but through development, it became a real and functional CAPTCHA with accessibility features not found in other popular CAPTCHAs. Just be sure to change the helpText.

faCAPTCHA was inspired by scambaiter Kitboga, who uses fake websites or programs to frustrate and waste the time of scammers.

Installation

yarn add facaptcha

npm install facaptcha

API

'⚠️' denotes required props.

⚠️	Property	Type	Default value	Description
	`allowRetry`	`boolean`	`false`	Allows the user to retry the CAPTCHA after verification is complete.
	`captchaTopics`	`string[]`	See here	Topics displayed at the top of the CAPTCHA. Does not work with `headerText`.
	`cellsWide`	`number`	`4`	Number of cells in each row.
	`cellsTall`	`number`	`cellsWide`	Number of cells in each column.
	`disabled`	'boolean'	`false`	Disables the CAPTCHA, preventing users from attempting verification. `disabled` is `true` if the user exceeds `maxAttempts`.
⚠️	`imgTopicUrls`	`ImgTopicType[]`	-	Array of image URLs with associated topic tags.
	`headerText`	`string`	See here	Used in place of the CAPTCHA header text. Overrides `captchaTopic`.
	`helpText`	`string`	See here	Used in place of the default help text, shown when the '?' icon is clicked.
	`helpButtonAriaLabel`	`string`	`"Help"`	Used as both the `title` and `aria-label` for the '?' icon button.
	`maxAttempts`	`number`	`minAttempts + 7`	Maximum number of attempts. If exceeded, `disabled` is set to `true` and `onMaxAttempts` is called.
	`minAttempts`	`number`	`1`	Minimum number of required attempts, regardless of whether the attempts are correct or not.
	`notARobotText`	`string`	`"I'm not a robot"`	Used in place of the "I'm not a robot" text.
	`onClickCheckbox`	`() => void`	-	Called on clicking the checkbox. Does not execute if the CAPTCHA popup is open.
	`onClickVerify`	`() => void`	-	Called on clicking the 'Verify' button.
	`onMaxAttempts`	`() => void`	-	Called when `maxAttempts` is exceeded.
	`onRefresh`	`() => void`	-	Called on clicking the refresh icon.
	`refreshButtonAriaLabel`	`string`	`"Try a new challenge"`	Used as both the `title` and `aria-label` for the refresh icon button.
⚠️	`onVerificationComplete`	`() => void`	-	Called on successful verification completion.
	`simulateSlow`	`0 - 3`	`1`	Simulates a slow internet connection speed.
	`uncloseable`	`boolean`	`false`	Prevents the CAPTCHA from being closed until verification is complete.
	`verifyText`	`string`	`"verify"`	Text for the 'Verify' button.

`captchaTopics`

An array of case-sensitive topics, from which one item will be randomly selected. The topic appears in the header of the CAPTCHA and it is the phrase or word that the image tags will be compared to. If not defined, a pseudorandomly selected default value will be used.

`imgTopicUrls`

Topic tags are case-sensitive and compared to the topic selected from captchaTopics. The images will be displayed in order. If there are fewer images than cells, the images will repeat.

`ImgTopicType`

type ImgTopicType = {
  url: string;
  topics: string[];
}

Example

const ExampleImages: ImgTopicType[] = [
  {
    url: "https://upload.wikimedia.org/wikipedia/commons/b/b0/Canthigaster_valentini_1.jpg",
    topics: ["pufferfish", "fish", "Canthigaster valentini"]
  },
  {
    url: "https://upload.wikimedia.org/wikipedia/commons/1/11/Joseph_Grimaldi.jpg",
    topics: ["clown"]
  }
]

`headerText` default value

Select all squares with ${captchaTopic} If there are none, click ${verifyText}

`helpText` default value

Click on the images that correspond with the given prompt. Once you've selected all applicable images, click '${verifyText}'. If you make multiple wrong attempts in a row, you will be barred from accessing the site. The number of wrong attempts permitted depends on your browsing behaviour. If you complete an entire row, column, or diagonal, you have a bingo. Shout 'bingo' into your microphone to access the site.

`simulateSlow`

Simulates a slow connection speed. A value of 0 will not create artificial load times. A value of 1 or greater will render load screens between CAPTCHA attempts and on clicking the component's refresh icon. The load time is randomly generated based on the value given, with higher values generating higher average load times.