Find documentation for previous major version of the SDK on the v2 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';

Configure DataDome

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

export default class MyApp extends Component {
  
  componentDidMount(): void {
    DataDome.configure("Client_Side_Key");
  }
}

Optional: Add your API origin (v3.1 and above)

If your use case requires initializing a Datadome's session at launch, you can optionally specify the base URL of your app’s API domain using the origin argument of the configure message:
Call configure with your Client Side Key and your API origin to send a payload. This improves detection.

export default class MyApp extends Component {
  
  componentDidMount(): void {
    DataDome.configure("Client_Side_Key", origin); // with `origin` your API's origin in the form <protocol>::/<host> (eg. `https://example.com`)
  }
}

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

Handling errors with DataDomeInterceptor

DataDomeInterceptor propagates errors for failed requests with status codes other than 401 or 403 after retrying.
Previously, such errors were silently ignored, which could make it seem like the request didn't receive any response, even when it failed.

Impact:

• Errors with status codes other than 401 or 403 will now be caught in the catch block.
• This change ensures you are aware of all request failures and can handle them appropriately.

Any request using DataDomeInterceptor may now reject with an error. Make sure to handle errors using .catch() or try/catch when calling Axios:

axios
    .get("https://example.com")
    .then((res) => {
      console.log('Response:', res);
    })
    .catch((error) => {
    	// Handle errors properly
    	console.error('Request failed:', error.response?.status, error.message);
    });

⚠️ Upgrade note: If your code relied on the old behavior where some errors were ignored, you may need to update your error handling logic to prevent unhandled promise rejections.

Advanced setup

Recommended: Enable the DataDome cookie sharing between the app and its WebViews

Share the datadome cookie between the app and WebViews to prevent multiple challenges caused by the loss of the datadome cookie.

Set sharedCookiesEnabled to true:

<WebView
  source={{
    uri: url,
  }}
  sharedCookiesEnabled={true}
/>

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.