SDK React Native - Navigation

The React Native module helps you to protect your React Native applications using RNN and fetch.
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 datadome-react-native-navigation in your react native project repository.

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

Dependencies

There are 4 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/datadome-react-native-navigation @react-native-async-storage/async-storage async-barrier react-native-webview react-native-navigation

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/datadome-react-native-navigation';

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");
  }
}

The Captcha View

The SDK needs the Captcha View to be registered to show it when needed.
Register DataDomeModal component using the component id "Captcha" in your Navigation stack.

Navigation.registerComponent('Captcha', () => DataDomeModal);

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'
})

Android Cookie

React native fetch does not handle cookie properly on Android platform. On Android, you have to add datadome cookie in your headers (or add it to your cookies if you have some).

export default class MyApp extends Component {

  async makeCall() {
    // For android cookie handling
    if (Platform.OS === 'android') {
      h['cookie'] = await DataDome.getDataDomeCookie();
    }

    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
    }
  }
}

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