The React Native module helps you to protect your React Native applications using Axios.
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-axios in your react native project repository.

npm install @datadome/datadome-axios --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-axios @react-native-community/async-storage async-barrier react-native-webview axios

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, DataDomeInterceptor } from 'datadome-axios';

Set SDK Key

Add the SDK Key to DataDome instance with the method setSdkKey

export default class MyApp extends Component {
  
  constructor(props) {
    super(props);
    DataDome.getInstance().setSdkKey("my_sdk_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>
    );
  }
}

Configure Axios

Before start using Axios, make sure to configure it with the DataDomeInterceptor

import axios from 'axios';
    
//set request intercepter
axios
  .interceptors
  .request
  .use(async function(request) {
    const interceptor = new DataDomeInterceptor();
    return await interceptor.requestAdapter(request)
   }, 
   function(error) {
        return Promise.reject(error);
   }
);

//set response interceptor
axios
  .interceptors
  .response
  .use(function (response) {
     return response;
   },
   async function(error) {
      const interceptor = new DataDomeInterceptor();
      return await interceptor.responseAdapter(error)
   }
);

Use Axios

You can now use Axios the same way you used before

axios
  .get(`https://datadome.co/wp-json`)
  .then(res => {
        console.log(res)
  })
  .catch((error) => console.error(error));

Force a captcha display

To force the DataDome module to display a captcha, you can send a custom User-Agent header with the value BLOCKUA. This will hint the remote protection module installed on your server to block the request and consider it coming from a bot.

axios
  .get(`https://datadome.co/wp-json`, { 'headers': { 'User-Agent': 'BLOCKUA' } })
  .then(res => {
      console.log(res)
  })
  .catch((error) => console.error(error));

IMPORTANT
Do not forget to remove this header from your code 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