CoreDataDome for React Native

The DataDome SDK for React Native applications

The CoreDataDome SDK for React Native is a lightweight library, designed to integrate DataDome into React Native applications.
It serves as the foundational layer for all current and future React Native integrations.
It is published on npm.

Requirements

  • React Native: 0.85+ (with New Architecture + Turbo Module)
  • The client-side key available in your DataDome dashboard

Installation

Add the SDK dependency to your project:

npm install @datadome/react-native-core-datadome

or

yarn add @datadome/react-native-core-datadome

On iOS, install the pods to link the native SDK:

cd ios && pod install

Configuration

Initialize the DataDome instance

  1. Create a configuration object.
import { DataDome, type DataDomeConfiguration } from '@datadome/core-datadome';

const dataDomeConfiguration: DataDomeConfiguration = {
  clientKey: 'YOUR_CLIENT_KEY',
  domain: null,
};
  1. Create the DataDome instance.
const datadome = new DataDome(dataDomeConfiguration);

If you need more than one instance for a specific use case, you will need to call destroy() on the additional instances when they are no longer being used.

await dataDome.destroy();

Usage

The SDK exposes APIs that will let your application check incoming HTTP responses and handle possible challenges returned by endpoints protected by DataDome.

Step 1: Wrap the response into a DataDomeResponse object

For every HTTP response returned by a protected endpoint, create a DataDomeResponse object:

import { type DataDomeResponse } from '@datadome/core-datadome';

const headers: { [key: string]: string } = Object.fromEntries(response.headers.entries());

const dataDomeResponse: DataDomeResponse = {
  status: response.status,
  headers,
  // Read from a clone so the original response stays consumable by your code.
  body: () => response.clone().text(),
};

Step 2: Validate the response

Call DataDome.validateResponse with the previously created DataDomeResponse:

const validationStatus = await dataDome.validateResponse(dataDomeResponse, url);

Calling validateResponse will:

  • save the datadome cookie to its storage
  • display the appropriate response page if the request is challenged
    (e.g. Slider, Device Check, and Block page)

validateResponse returns a ResponseValidationStatus value, which can be one of the following:

StatusDescription
ResponseValidationStatus.AllowedThe request was allowed by DataDome: the response contains the data you would expect from your endpoint and your application can process it as usual.
ResponseValidationStatus.BlockedThe request was challenged by DataDome with a Block response that is being displayed by the SDK.
ResponseValidationStatus.NeedRetryA response page has been displayed by the SDK and the challenge has been resolved: your application can retry the request that has been challenged.
ResponseValidationStatus.ErrorSomething unexpected happened and your application should handle the error gracefully.

Step 3: Retry the request that was challenged

validateResponse will return needRetry when the user resolves the challenge. You should retry the original challenged request(s) with the updated datadome cookie to get the response you expected.

To retry the request:

  1. Retrieve the updated datadome cookie using getCookie()
  2. Inject the cookie into your request headers and perform the call:
import { ResponseValidationStatus } from '@datadome/core-datadome';

switch (validationStatus) {
  case ResponseValidationStatus.NeedRetry: {
    // Get the updated cookie with passed challenge flag
    const dataDomeCookie = await dataDome.getCookie(url);

    const retryResponse = await fetch(url, {
      headers: dataDomeCookie
        ? { Cookie: `${dataDomeCookie.name}=${dataDomeCookie.value}` }
        : {},
    });
    // This should now return the expected response
    break;
  }
  case ResponseValidationStatus.Allowed:
    // Process the response normally
    break;
  case ResponseValidationStatus.Blocked:
    // Handle permanent block
    break;
  case ResponseValidationStatus.Error:
    // Handle error
    break;
}

The updated cookie contains the challenge validation, so the retried request will be allowed by DataDome and return the expected response from your endpoint.


Did this page help you?