Enable reCAPTCHA to Protect Against Automated Abuse

We have decided to enable Google's reCAPTCHA to protects you against spam and other types of automated abuse from making verification requests, especially using SMS or WhatsApp as it will cause you to lose money from sending these messages.

Enabling Google reCAPTCHA

reCAPTCHA is now available for the JavaScript SDK. We are using invisible Google reCAPTCHA v2. This means that the reCAPTCHA prompt will be automatically triggered when the user press "Login", and if Google has suspicions about this request, it may prompt the user to solve some puzzle. Here's how it looks:

Step 1: To show the reCAPTCHA in your website, enable it in the dashboard:

Go to Settings > Branding > Magic Link Form or OTP Verification Form > Phone Number

Adjust your container div to fit the reCAPTCHA prompt:

Option 1: Set the container div to at least 530px high, 300px wide.

<div
    id="cotter-container-signup"
    style="width: 300px; height: 530px"
></div>

Option 2: Allow scrolling.

<div
    id="cotter-container-signup"
    style="overflow: scroll; width: 300px; height: 300px;"
></div>

Step 2: To Require valid reCAPTCHA, update Rules in your dashboard

Under Rules, turn on Captcha Required:

Note that any verification request for email/phone number will require a valid reCAPTCHA token.

See reCAPTCHA in action

To test how reCAPTCHA looks like:

Step 1: Inspect element and click Toggle Device Toolbar

Step 2: Click the dropdown to select a device and click Edit

Step 3: Add a custom device and name it Googlebot/2.1

From now on, if you're using this emulated device, you will be prompted to solve the reCAPTCHA.