The Cloudflare Turnstile Client Side Component for React and NextJS

This is a React component that can be used to protect your React and NextJS applications with Cloudflare Access.

Installation

npm install --save turnstile-next

or

yarn add turnstile-next

Usage With NextJS

In your layout or page, import the TurnstileNextContext and use it your page or layout like so:

import TurnstileContext from 'turnstile-next/vercel';

export default function Layout({ children }) {
  return (
    <>
        <div>{children}</div>
        <TurnstileContext />
    </>
  );
}

only cloudflare script tag is included here.

Usage With Vite

In your index.html file, use the cloudflare script tag like so:

<script src="https://challenges.cloudflare.com/turnstile/v0/api.js" defer async></script>

and you can use the TurnstileInput component like so:

import TurnstileInput from 'turnstile-next';

const SITE_KEY = import.meta.env.VITE_SITE_KEY;

export default function MyComponent() {
  
  const onVerify = (token : string) => {
    console.log(token);
  } 

  const onErr = (err : string) => {
    console.log(err);
  }
  
  return (
    <div>
        <TurnstileInput onVerify={onVerify} onErr={onErr} siteKey={SITE_KEY} />
    </div>
  );
}

Usage In Component

import TurnstileInput from 'turnstile-next';

const SITE_KEY = process.env.NEXT_PUBLIC_SITE_KEY;

export default function MyComponent() {
  
  const onVerify = (token : string) => {
    console.log(token);
  } 

  const onErr = (err : string) => {
    console.log(err);
  }
  
  return (
    <>
        <TurnstileInput onVerify={onVerify} onErr={onErr} siteKey={SITE_KEY} />
    </>
  );
}

Usage

The TurnstileInput component accepts a set of properties that are used to configure the Turnstile challenge. Here's a detailed description of each property:

| Property | Description | | -------------------- | --------------------------------------------------------------------------------------------------- | | siteKey (required) | The site key for your Turnstile challenge. This key is obtained from the Turnstile dashboard. | | theme | The theme of the challenge. Defaults to "auto". | | locale | The locale of the challenge. Defaults to "en". | | size | The size of the challenge. Defaults to "normal". | | fieldName | The name of the field that will be used to store the token. Defaults to "cf-turnstile-token". | | retryInterval | The interval in milliseconds to retry the challenge. Defaults to 8000. | | retry | Whether to retry the challenge. Defaults to true. | | refreshOnExpired | Whether to refresh the challenge when it expires. Defaults to "auto". | | onVerify | A callback that will be called when the challenge is verified. | | onError | A callback that will be called when the challenge fails. | | onExpire | A callback that will be called when the challenge expires. | | onBeforeInteractive | A callback that will be called when the challenge is about to be interactive. | | onAfterInteractive | A callback that will be called when the challenge is interactive. | | onUnsupported | A callback that will be called when the challenge is unsupported by the user's browser. |

For detailed information on each property and its usage, please refer to the Turnstile documentation.

utils

refreshTurnstile

This function can be used to refresh the Turnstile challenge. It accepts a single parameter, options, which is an object that can be used to configure the refresh. Here's a detailed description of each property:

| Property | Description | | -------------------- | --------------------------------------------------------------------------------------------------- | | className | The class name of the Turnstile challenge. Defaults to "cf-turnstile". |

example:

import { refreshTurnstile } from 'turnstile-next/utils';

const refresh = () => {
  refreshTurnstile({ className: 'cf-turnstile' });
};

export default function MyComponent() {
  return (
    <>
        <button onClick={refresh}>Refresh</button>
    </>
  );
}

checkWidgetRender

This function can be used to check if the Turnstile challenge has been rendered.

example:

import { useEffect } from 'react';
import { checkWidgetRender } from 'turnstile-next/utils';

export default function MyComponent() {
  useEffect(() => {
    checkWidgetRender();
  }, []);

  return (
    <>
        <div>My Component</div>
    </>
  );
}

Contributing

Contributions are always welcome!

License

MIT