A wrapper for Cloudflare Turnstile for use with React Native app.

The cookies used by CloudFlare Turnstile are incompatible with react-native-webview. This package circumvents that by loading a tiny Next.js app running CloudFlare that creates an interface between a react-native-webview component and the Turnstile widget.

IMPORTANT: You must add the domain turnstile.1337707.xyz to your Turnstile domains list. This is the hosted instance on CloudFlare.

npm i react-native-turnstile react-native-webview

If you're running Expo, then:

expo install react-native-webview
npm i react-native-turnstile

import { useRef } from "react";
import ReactNativeTurnstile, { resetTurnsile } from "react-native-turnstile";

// ...

// Programmatic access example:
const turnstileResetRef = useRef();

const result = await fetch('/path/to/some/api');
if (!result.ok) {
  throw new Error(`Request failed with code ${result.status}`);
  resetTurnstile(turnstileResetRef);
}


function TurnstileWidget() {
  return (
	<ReactNativeTurnstile
		sitekey="xxxxxxxxxxxxxxxxxxx"
		onVerify={token => console.log(token)}
		resetRef={resetTurnstileRef}
		style={{ marginLeft: 'auto', marginRight: 'auto' }}
	/>
  );
}

Turnstile tokens expire after 5 minutes, to automatically reset the challenge once they expire, set the autoResetOnExpire prop to true or reset the widget yourself using the onExpire callback.

ReactNativeTurnstile takes the following arguments:

And the following callbacks:

For more details on what each argument does, see the Cloudflare Documentation.