> Portal Navigation:
> 
> - Append `.md` to any URL under `https://dev.wix.com/docs/` to get its markdown version.
> - Pages are either content pages (article or reference text) or menu pages (a list of links to child pages).
> - To get a menu page, truncate any URL to a parent path and append `.md` (e.g. `https://dev.wix.com/docs/sdk.md`, `https://dev.wix.com/docs/sdk/core-modules.md`).
> - Top-level index of all portals: https://dev.wix.com/docs/llms.txt
> - Full concatenated docs: https://dev.wix.com/docs/llms-full.txt

## Resource: Implement reCAPTCHA Using the JS SDK

## Article: Implement reCAPTCHA with Custom Login

## Article Link: https://dev.wix.com/docs/go-headless/develop-your-project/self-managed-headless/authentication/members/custom-login-page/re-captcha/implement-re-captcha-using-the-js-sdk.md

## Article Content:

# Implement reCAPTCHA with Custom Login Using the JS SDK

> **Note:** This article is only relevant for [self-managed headless projects](https://dev.wix.com/docs/go-headless/develop-your-project/self-managed-headless/about-self-managed-headless.md).

This article explains how to implement [reCAPTCHA](https://dev.wix.com/docs/go-headless/develop-your-project/authentication/members/about-re-captcha.md) 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`](https://www.npmjs.com/package/react-google-recaptcha-enterprise).

<blockquote class="important">

**Important:** You must use the enterprise version of a reCAPTCHA library.

</blockquote>

## 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:

```jsx
import React, { useRef, useState } from 'react';
import ReCAPTCHA from 'react-google-recaptcha-enterprise';

const RegistrationForm = () => {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [captchaToken, setCaptchaToken] = useState('');
  const captchaRef = useRef(null);

  return (
    <form onSubmit={handleSubmit}>
      {/* Email and password fields */}
      <input
        type="email"
        value={email}
        onChange={(e) => setEmail(e.target.value)}
        placeholder="Email"
        required
      />
      <input
        type="password"
        value={password}
        onChange={(e) => setPassword(e.target.value)}
        placeholder="Password"
        required
      />
      
      {/* reCAPTCHA component */}
      <ReCAPTCHA
        size="normal"
        ref={captchaRef}
        sitekey={myWixClient.auth.captchaVisibleSiteKey}
        onChange={setCaptchaToken}
      />
      
      <button type="submit" disabled={!captchaToken}>
        Register
      </button>
    </form>
  );
};
```

### Invisible reCAPTCHA

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

```jsx
import React, { useRef, useState } from 'react';
import ReCAPTCHA from 'react-google-recaptcha-enterprise';

const LoginForm = () => {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [captchaToken, setCaptchaToken] = useState('');
  const captchaRef = useRef(null);

  const handleSubmit = async (event) => {
    event.preventDefault();
    
    // Execute invisible reCAPTCHA
    const token = await captchaRef.current?.executeAsync();
    setCaptchaToken(token);
    
    // Proceed with login
    await loginUser(email, password, token);
  };

  return (
    <form onSubmit={handleSubmit}>
      {/* Email and password fields */}
      <input
        type="email"
        value={email}
        onChange={(e) => setEmail(e.target.value)}
        placeholder="Email"
        required
      />
      <input
        type="password"
        value={password}
        onChange={(e) => setPassword(e.target.value)}
        placeholder="Password"
        required
      />
      
      {/* Invisible reCAPTCHA component */}
      <ReCAPTCHA
        size="invisible"
        ref={captchaRef}
        sitekey={myWixClient.auth.captchaInvisibleSiteKey}
      />
      
      <button type="submit">
        Log In
      </button>
    </form>
  );
};
```

## 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:

```js
const registerWithCaptcha = async (email, password, captchaToken) => {
  try {
    const response = await myWixClient.auth.register({
      email,
      password,
      captchaTokens: { recaptchaToken: captchaToken },
    });

  // ...

  } catch (error) {
    console.error('Registration failed:', error);
    // Reset reCAPTCHA on error
    captchaRef.current?.reset();
  }
};
```

### Login with invisible reCAPTCHA

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

```js
const loginWithInvisibleCaptcha = async (email, password, captchaToken) => {
  try {
    const response = await myWixClient.auth.login({
      email,
      password,
      captchaTokens: { invisibleRecaptchaToken: captchaToken },
    });

    // ...
  } catch (error) {
    console.error('Login failed:', error);
  }
};
```