> This page is for Applications Protection.

> For clean Markdown of any page, append .md to the page URL.
> For a complete documentation index, see https://docs.humansecurity.com/llms.txt.

# Integration with React Native

#### v3.0

The SDK can be integrated into [React Native](https://reactnative.dev/) 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:

```objectivec
PXPolicy *policy = [[PXPolicy alloc] init];
policy.urlRequestInterceptionType = PXPolicyUrlRequestInterceptionTypeNone;
NSError *error = nil;
[PerimeterX startWithAppId:@"<APP_ID>" delegate:self policy:policy error:&error];
if (error != nil) {
    NSLog(@"failed to start. error: %@", error);
}
```

## Create Native Module

Create a native module which called `PerimeterXModule`, as described [here](https://reactnative.dev/docs/legacy/native-modules-ios)

## 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:

```objectivec
RCT_REMAP_METHOD(getHTTPHeaders,
                 resolver:(RCTPromiseResolveBlock)resolve
                 rejecter:(RCTPromiseRejectBlock)reject) {
  NSDictionary<NSString *, NSString *> *headers = [PerimeterX headersForURLRequestForAppId:nil];
  NSData *data = [NSJSONSerialization dataWithJSONObject:headers options:0 error:nil];
  NSString *json = [[NSString alloc] initWithData:data encoding:NSUTF8StringEncoding];
  resolve(@[json]);
}
```

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

```javascript
const headers = await PerimeterXModule.getHTTPHeaders();
const obj = JSON.parse(headers);
const url = 'https://my.request.com'
const response = await fetch(url, {
    method: 'GET',
    headers: obj,
});
```

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 `AppDelegate`, implement the `PerimeterXDelegate/perimeterxHeadersWereUpdated(headers:forAppId:)` function. You should pass those headers to your native module.

```objectivec
- (void)perimeterxHeadersWereUpdatedWithHeaders:(NSDictionary<NSString *,NSString *> *)headers forAppId:(NSString *)appId {
  [perimeterxModule handleUpdatedHeaders:headers];
}
```

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

```objectivec
- (void)handleUpdatedHeaders:(NSDictionary<NSString *,NSString *> *)headers {
  NSData *data = [NSJSONSerialization dataWithJSONObject:headers options:0 error:nil];
  NSString *json = [[NSString alloc] initWithData:data encoding:NSUTF8StringEncoding];
  [self sendEventWithName:@"pxNewHeaders" body:json];
}
```

In your JavaScript code, listen to this event.

1. Import the native module.

   ```javascript
   import {NativeModules, NativeEventEmitter} from 'react-native';
   import type {Message} from 'react-native/Libraries/LogBox/Data/parseLogBoxLog';
   const {PerimeterXModule} = NativeModules;
   ```
2. Create new `NativeEventEmitter`.

   ```javascript
   const pxEventEmitter = new NativeEventEmitter(PerimeterXModule);
   ```
3. Add listener to the event and store the SDK's headers in variable.

   ```javascript
   var pxHeader = null;

   const onAddNewHeaders = headers => {
       const obj = JSON.parse(headers);
       console.log(`[PX] got new px headers from event: ${JSON.stringify(obj)}`);
       pxHeader = obj;
   };

   const subscriptionPxNewHeaders = pxEventEmitter.addListener(
       'PxNewHeaders',
       onAddNewHeaders,
   );
   ```
4. Add those headers to your URL request.

   ```javascript
   const url = 'https://my.request.com'
   const response = await fetch(url, {
       method: 'GET',
       headers: pxHeader,
   });
   ```

> **Always include the SDK's headers**
>
> Those SDK's headers must be included in all your URL requests. Sending requests without them could affect the user experience.

## 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:

```javascript
const result = await PerimeterXModule.handleResponse(
    JSON.stringify(json),
    response.status,
    url,
);
/*
check the result:
  'false' - not handled by the SDK
  'solved' - challenge solved
  'cancelled' - challenge cancelled
*/
if (result === 'solved') {
  // challenge solved. you may retry the request here
} else if (result === 'false') {
  // request finished successfully
} else if (result === 'cancelled') {
  // challenge cancelled
}
```

```objectivec
RCT_REMAP_METHOD(handleResponse,
                 rsponse:(NSString *)response
                 code:(NSInteger)code
                 url:(NSString *)url
                 resolver:(RCTPromiseResolveBlock)resolve
                 rejecter:(RCTPromiseRejectBlock)reject) {
  NSData *data = [response dataUsingEncoding:NSUTF8StringEncoding];
  NSHTTPURLResponse *httpURLResponse = [[NSHTTPURLResponse alloc] initWithURL:[NSURL URLWithString:url] statusCode:code HTTPVersion:nil headerFields:nil];
  BOOL handled = [PerimeterX handleResponseWithResponse:httpURLResponse data:data forAppId:nil callback:^(enum PerimeterXChallengeResult result) {
    resolve((result == PerimeterXChallengeResultSolved ? @"solved" : @"cancelled"));
  }];
  if (!handled) {
    resolve(@"false");
  }
}
```

> **Integration with C++**
>
> If your project is built with C++ (appdelegate.mm) then you should do the following:
> 1\. Open Xcode Build Settings.
> 2\. Targets -> Build Settings -> Apple Clang - Custom Compiler Flags > Other C++ Flags
> 3\. Add "-fcxx-modules" flag.