JSPM

  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 619
  • Score
    100M100P100Q92163F
  • License MIT

A wrapper for CloudFlare Turnstile for use in React Native apps.

Package Exports

  • react-native-turnstile
  • react-native-turnstile/dist/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-native-turnstile) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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.