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.