Implement reCAPTCHA with Custom Login

With Wix Headless, you can add reCAPTCHA protection to your member registration and login forms to help prevent fraud and abuse. reCAPTCHA verifies that interactions are coming from real visitors rather than automated bots.

This article explains how to implement reCAPTCHA with member authentication using the JavaScript SDK.

You'll learn how to:

• Implement reCAPTCHA in your forms.
• Use reCAPTCHA tokens during sign up and login.
• Handle different reCAPTCHA verification modes.

Before you begin

• Enable reCAPTCHA

Step 1 | Install a reCAPTCHA library

Install a reCAPTCHA library for your framework. For example, if you're using React, you can install react-google-recaptcha-enterprise.

Step 2 | Implement reCAPTCHA in your forms

Use a Wix site key, not your own, when loading the reCAPTCHA script. You can get Wix keys from the captchaVisibleSiteKey and captchaInvisibleSiteKey properties in the SDK.

Visible reCAPTCHA

Add a visible reCAPTCHA component to your registration or login form. For example:

Invisible reCAPTCHA

For invisible reCAPTCHA, the component is hidden and only triggers when needed. For example:

Step 3 | Use reCAPTCHA tokens with authentication

Now, you can use the reCAPTCHA tokens with the register and login methods.

Registration with visible reCAPTCHA

When registering a new member with visible reCAPTCHA, pass the token using the recaptchaToken property. For example:

Login with invisible reCAPTCHA

When logging in with invisible reCAPTCHA, pass the token using the invisibleRecaptchaToken property. For example: