Implement reCAPTCHA with Custom Login Using the JS SDK

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.

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: