React Native SDK

The React Native module helps you to protect your React Native applications.
The module handles 403 API responses, generated by DataDome server-side integration, in order to display the associated Captcha pages.

Installation

Use the package manager npm to install react-native-datadome in your react native project repository.

npm install @datadome/react-native-datadome --save

Dependencies

There are 3 peer dependencies for DataDome react native module:

NOTE: If you see a message from npm during the installation of DataDome module about peer dependencies, you will have to install them yourself.

For a complete install with dependencies:

npm install --save @datadome/react-native-datadome @react-native-async-storage/async-storage react-native-webview

iOS

For iOS, update pods by going into iOS folder and make pod installation.

cd ios/ && pod install

Integration and usage

Import

First, import DataDome module in your project, and add the datadome fetch.
Datadome fetch is based on the original fetch method, and adds an interceptor to handle DataDome responses.
If the datadome option is not activated in the fetch options, or if the response is not a DataDome response, the fetch works just like the original one.

import { DataDome, DataDomeModal, DataDomeFetch } from '@datadome/react-native-datadome';

var fetch = DataDomeFetch;

Set SDK Key

Add the Client side SDK Key to DataDome instance with the method setSdkKey (You can get it from the Dashboard)

export default class MyApp extends Component {
  
  constructor(props) {
    super(props);
    DataDome.getInstance().setSdkKey("Client_Side_Key");
  }
}

Captcha container

The SDK needs a container to show the captcha page when needed.
Add a DataDomeModal component in top of your views. Like a modal, it will be showed only when the SDK needs to show a captcha page and can be closed by a user if he wants to (for android user).

In the DataDomeModal component, you need to set the ref of this component to the DataDome module instance.

export default class MyApp extends Component {
  
  render() {
    return (
    <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
      <DataDomeModal onRef={ref => (DataDome.getInstance().setContainerViewRef(ref))} />
      <Text>Hello, world!</Text>
    </View>
    );
  }
}

Fetch

To activate DataDome module, just add the datadome option in the fetch calls.
Also, if you have an old version of React Native that does not include credentials in options, add this option.

fetch("https://jsonplaceholder.typicode.com/posts/1", {
	method: 'GET',
	headers: h,
	datadome: true
})


// If you have an old version of React Native
// Add cookie handling with credential option like this
fetch("https://jsonplaceholder.typicode.com/posts/1", {
	method: 'GET',
	headers: h,
	datadome: true,
	credentials: 'include' // or can also be 'same-origin'
})

Force a captcha display

To test your integration, add the header User-Agent with the value BLOCKUA to your request. This will hint the remote protection module to block the current request. The plugin should react to the blocked request (403 code) and display a captcha. The following is a sample code showcasing the custom User-Agent header

export default class MyApp extends Component {

  async makeCall() {
    //Important: Do not forget to remove this before deploying to production
    h['user-agent'] = 'BLOCKUA';

    var protectedFetch = fetch("https://jsonplaceholder.typicode.com/posts/1", {
      method: 'GET',
      headers: h,
      datadome: true
    })
    .then((response) => {
      // Do anything here
    })
    .catch(error) => {
      // Do anything here
    }
  }
}

Important
Do not forget to remove the header before deploying to production.

Errors

DataDome can throw some errors if it needs to. Here is the list of possible errors:

DATADOME ERROR: Problem on parsing of DataDomeResponse (No url object)
DATADOME ERROR: Can't show captcha page (No container)
DATADOME ERROR: Can't show captcha page (One is already in progress)
DATADOME ERROR: Don't put cookie headers on iOS. (Cookie handled automatically by iOS)
DATADOME ERROR: Captcha page closed before being passed

Share cookie between webview and React Native application

If you are using webviews in your application to display web pages that are protected by DataDome, we recommend you to share the DataDome cookie between the HTTP requests called from the React Native app and the requests called from webviews. Therefore, a second captcha won't be required on the web-based part of the app.

To share the DataDome cookie from the React Native SDK to your webview instance:

Retrieve the last DataDome cookie:
var cookie = await DataDome.getInstance().getStoredDatadomeCookie();
In React Native WebView, you can set DataDome cookie as below:

<WebView  
  source={{  
    uri: url,  
    headers: {  
      'Cookie': cookie,  
    },  
  }}  
sharedCookiesEnabled={true}
/>

To share the DataDome cookie from the webview instance to your React Native app:

Share DataDome cookie with JavaScript injection:

Inject a JavaScript code to postMessage, this will run once the page is loaded, then listen to onMessage event to retrieve the webview cookie. Finally, set the DataDome cookie value to DataDome SDK

const jsCode = 'window.ReactNativeWebView.postMessage(document.cookie)';
<WebView source={{uri: url, header: {Cookie: datadomeCookie}}} style={{flex: 1, width:400}} 
     sharedCookiesEnabled={true}
     injectedJavaScript={jsCode}
     onMessage={(event) => {
     	const cookies = event.nativeEvent.data;
     	DataDome.getInstance().storeCookie(cookies); // Update DataDome SDK with the new cookie value
   }}
/>

Share DataDome cookie with CookieManager library:

Use the @react-native-cookies/cookies package library.
You'll likely need to enable the sharedCookiesEnabled property as well.

Retrieve the latest webview's DataDome cookie value : CookieManager.get(url)
Update the DataDome SDK cookie by storing this value. This can be done by calling storeCookiemethod

// Get cookies for a url
CookieManager.get(url)
  .then((cookie) => {
  	// Please filter on the DataDome cookie
    DataDome.getInstance().storeCookie(cookie);
});