Integration with React Native

v3.0

The SDK can be integrated into React Native projects.

Start the SDK

The automatic interceptor is not supported in React Native, so any request from the JavaScript code has to be handled manually. Here is an example:

1
PXPolicy policy = new PXPolicy();
2
policy.setUrlRequestInterceptionType(PXPolicyUrlRequestInterceptionType.NONE);
3
try {
4
    PerimeterX.INSTANCE.start(this, "<APP_ID>", this, policy);
5
}
6
catch (Exception exception) {
7
    Log.e("tag","failed to start. error: " + exception.getMessage());
8
}

Create Native Module

Create a native module which called PerimeterXModule, as described here.

Pass the SDK’s HTTP headers to the JavaScript code

Create a function that pass the HTTP headers from the SDK to the JavaScript code. Here is an example:

1
@ReactMethod
2
public void getHTTPHeaders(Promise promise) {
3
    JSONObject json = new JSONObject(PerimeterX.INSTANCE.headersForURLRequest(null));
4
    promise.resolve(json.toString());
5
}

In your JavaScript code, call this function for every URL request to add those HTTP headers. Here is an example:

1
const headers = await PerimeterXModule.getHTTPHeaders();
2
const obj = JSON.parse(headers);
3
const url = 'https://my.request.com'
4
const response = await fetch(url, {
5
    method: 'GET',
6
    headers: obj,
7
});

If you wish to reduce the number of times there is a bridge between the JavaScript and native, you can add a listener that will be called when the SDK’s headers were changed. Than, you pass those new headers to the JavaScript side. You may cache those headers for future requests, but you must make sure to update them.

In the Application, implement the PerimeterXDelegate/perimeterxHeadersWereUpdated(headers:forAppId:) function. You should pass those headers to your native module.

1
@Override
2
public void perimeterxHeadersWereUpdated(@NonNull HashMap<String, String> hashMap, @NonNull String s) {
3
    if (perimeterxModule != null) {
4
        perimeterxModule.handleUpdatedHeaders(hashMap);
5
    }
6
}

In the native module, implement the handleUpdatedHeaders function. You should send the event ("pxNewHeaders") to the JavaScript side.

1
public void handleUpdatedHeaders(HashMap<String, String> headers) {
2
    if (!this.getReactApplicationContext().hasCatalystInstance()) {
3
        return;
4
    }
5
    JSONObject json = new JSONObject(headers);
6
    this.getReactApplicationContext()
7
        .getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter.class)
8
        .emit("pxNewHeaders", json.toString());
9
}

In your JavaScript code, listen to this event.

1. Import the native module.

   1
   import {NativeModules, NativeEventEmitter} from 'react-native';
   2
   import type {Message} from 'react-native/Libraries/LogBox/Data/parseLogBoxLog';
   3
   const {PerimeterXModule} = NativeModules;

2. Create new NativeEventEmitter.

   1
   const pxEventEmitter = new NativeEventEmitter(PerimeterXModule);

3. Add listener to the event and store the SDK’s headers in variable.

   1
   var pxHeader = null;
   2
   3
   const onAddNewHeaders = headers => {
   4
       const obj = JSON.parse(headers);
   5
       console.log(`[PX] got new px headers from event: ${JSON.stringify(obj)}`);
   6
       pxHeader = obj;
   7
   };
   8
   9
   const subscriptionPxNewHeaders = pxEventEmitter.addListener(
   10
       'PxNewHeaders',
   11
       onAddNewHeaders,
   12
   );

4. Add those headers to your URL request.

   1
   const url = 'https://my.request.com'
   2
   const response = await fetch(url, {
   3
       method: 'GET',
   4
       headers: pxHeader,
   5
   });

Handle the block response

You have to provide the SDK with the response. After receiving an error in the response, pass the information to SDK:

1
const result = await PerimeterXModule.handleResponse(
2
    JSON.stringify(json),
3
    response.status,
4
    url,
5
);
6
/*
7
check the result:
8
  'false' - not handled by the SDK
9
  'solved' - challenge solved
10
  'cancelled' - challenge cancelled
11
*/
12
if (result === 'solved') {
13
  // challenge solved. you may retry the request here
14
} else if (result === 'false') {
15
  // request finished successfully
16
} else if (result === 'cancelled') {
17
  // challenge cancelled
18
}