Find documentation for previous major version of the SDK on the v1 documentation page

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 2 peer dependencies for DataDome react native module:

• react-native-webview
• axios

For a complete install with dependencies:

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

Setup

Import

First, import DataDome module in your project

import { DataDome, DataDomeModal, DataDomeInterceptor } from '@datadome/datadome-axios';

Set client-side key

In order to identify the traffic, please get your Client side SDK Key from the Dashboard and add it to DataDome instance with the method setSdkKey

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

Add modal for challenges

To display challenge pages, add a DataDomeModal component at the top of your views.
As a modal, it will be showed on top of the app when the SDK needs to show a challenge page.

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

Configure Axios

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

Instantiate DataDomeInterceptor

Default Axios instance

//initialize DataDome interceptor
const interceptor = new DataDomeInterceptor();

Custom Axios instance configuration

If you are using a custom Axios instance, you'll need to initialize the DataDomeInterceptor with that instance.

const axiosInstance = axios.create({
  baseURL: 'https://your_domain.com/'
});

//initialize DataDome with custom axios instance
const interceptor = new DataDomeInterceptor({axiosInstance});

Set-up interceptors

Once the DataDomeInterceptor is instantiated, you need to set-up the request and response interception.

import axios from 'axios';

//set request intercepter
axios
  .interceptors
  .request
  .use(async function(request) {
    return await interceptor.requestAdapter(request)
   }, 
   function(error) {
      return Promise.reject(error);
   }
);

//set response interceptor
axios
  .interceptors
  .response
  .use(function (response) {
       //sending mobile signals
     interceptor.responseEventHandler(response);
     return response;
   },
   async function(error) {
      return await interceptor.responseAdapter(error)
   }
);

Advanced setup

Recommended: Share the DataDome cookie between the app and its WebViews

To prevent issues such as multiple challenges caused by the loss of the datadome cookie, we recommend sharing the datadome cookie between the app and WebViews due to the lack of shared cookie storage between both contexts.

From the app to a WebView instance

• Retrieve the last datadome cookie:

const cookie = await DataDome.getInstance().getStoredDatadomeCookie();

• Pass it to the WebView as a Cookie header:

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

From a WebView instance to the app

• Inject code on the WebView to send cookies back to the app with postMessage: this will run once the page is loaded
• Add an onMessage event listener to retrieve the cookie from the WebView
• Finally, save the datadome cookie value on the DataDome SDK with storeCookie

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

How to test

📘

To test your integration, you need to activate the protection on your endpoints

Force a captcha display

❗️

Do not use the BLOCKUA User-Agent in production

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 will react to the blocked request (403 code) and display a challenge.