React Native SDK - Fetch
Installation
Use the npm package manager to install react-native-datadome in your React Native project repository.
The React Native Fetch package uses the following dependency:
To install all dependencies, run:
npm install --save @datadome/react-native-datadome react-native-webview
iOS
For iOS, navigate to the ios
folder and install pods.
cd ios/ && pod install
Setup
Import the package
The DataDomeFetch
function is a replacement for the built-in fetch
API and includes an interceptor to handle DataDome responses.
import { DataDome, DataDomeModal, DataDomeFetch } from '@datadome/react-native-datadome';
const fetch = DataDomeFetch;
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.
In the DataDomeModal
component, you need to define 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>
);
}
}
Usage
To enable the interceptor from DataDome, add the datadome
option in fetch requests.
fetch("https://jsonplaceholder.typicode.com/posts/1", {
method: 'GET',
headers: h,
datadome: true
})
For older React Native versions that do not include credentials in options, add this option.
fetch("https://jsonplaceholder.typicode.com/posts/1", {
method: 'GET',
headers: h,
datadome: true,
credentials: 'include' // or can also be 'same-origin'
})
Advanced setup
Recommended: Share the datadome
cookie between the app and its WebViews
datadome
cookie between the app and its WebViewsTo 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 withstoreCookie
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);
}}
/>
Optional: Activate verbose logger
For investigation purposes, customer may need to print additional logs to get more details about cookie injection, response format or response status.
These logs may be helpful in case of issue investigation, such as challenge loop issues.
The verbose logger prints info logs and is activated by calling:
DataDome.getInstance().enableVerboseLogs(true);
By default, the verbose logger is disabled: only error logs will be printed by the SDK.
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.
Updated 1 day ago