SDK React Native - Superagent

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

npm install @datadome/datadome-superagent --save

Dependencies

There are 4 peer dependencies for DataDome react native module:

• @react-native-async-storage/async-storage
• async-barrier
• react-native-webview
• superagent

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-superagent @react-native-async-storage/async-storage async-barrier react-native-webview superagent

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

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

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 Superagent

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

const superagent = require('superagent');
    
//configure the request agent
const agent = superagent.agent()
agent
  .use(DataDomeInterceptor.requestInterceptor)
  .use(DataDomeInterceptor.responseInterceptor)

Use Superagent

You can now use the agent the same way you used before

agent
  .get('https://datadome.co')
  .set('accept', 'application/json')
  .then((res, err) => {
    console.log("Got response", res.status)
 });

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.

agent
  .get('https://datadome.co')
  .set('User-Agent', 'BLOCKUA')
  .set('accept', 'application/json')
  .then((res, err) => {
    console.log("Got response", res.status)
 });

IMPORTANT
Do not forget to remove this header from your code before deploying to production.
Make sure, application/json is an accepted type.

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