react-native-turnstile

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

How It Works

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.

Installation

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

If you're running Expo, then:

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

Usage

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.

Documentation

ReactNativeTurnstile takes the following arguments:

name	type	description
sitekey	string	sitekey of your website (REQUIRED)
action?	string	-
cData?	string	-
theme?	string	one of "light", "dark", "auto"
size?	string	one of "compact", "normal"
tabIndex?	number	-
responseField?	boolean	controls generation of <input /> element
responseFieldName?	string	changes the name of <input /> element
retry?	string	one of "auto", "never"
retryInterval?	number	interval of retries in ms
autoResetOnExpire?	boolean	automatically reset the widget when the token expires
id?	string	id of the div
resetRef?	TurnstileResetRef	ref in which to inject the reset()
className?	string	only provided to facilitate NativeWind classes
style?	StyleProp<ViewStyle>	passed to the RN View container

And the following callbacks:

name	arguments	description
onVerify?	token	called when challenge is passed (REQUIRED)
onLoad?	widgetId	called when the widget is loaded
onError?	error	called when an error occurs
onExpire?	token	called when the token expires
onTimeout?	-	called when the challenge expires

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