faCAPTCHA

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

[fey-kap-chuh]

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

or

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.