React Native Integration (Legacy)
The SDK can be integrated into a React Native project.
This integration is the legacy version. For the most recent version, see our recommended integration.
Integration with C++ (iOS)
If your project is built with C++ (AppDelegate.mm), you should do the following:
- Open Xcode Build Settings.
- Navigate to Targets -> Build Settings ->
Apple Clang - Custom Compiler Flags->Other C++ Flags. - Add the
-fcxx-modulesflag.
Add the Human Module
Android
- Create a native module called
HumanModule.
Add a package declaration at the top of each Java file matching your project’s package name (e.g. package com.yourapp;).
Java / HumanModule.java:
- Add the
HumanModuleto theHumanPackageand set thesharedproperty.
Java / HumanPackage.java:
iOS
Create a native module called HumanModule.
Objective-C / HumanModule.h:
Objective-C / HumanModule.m:
How to start the SDK
- The most important thing is to start the SDK as soon as possible in your app flow. The reason for that is when your app sends a URL request to your server before the SDK was started, the request will not include the SDK’s HTTP headers. As a result, HUMAN’s Enforcer could block the request, and the SDK will not be able to present a challenge to the user. The best place to start the SDK is in the:
Application’sonCreatefunction on Android.AppDelegate’sdidFinishLaunchingWithOptionsfunction on iOS.
- You should start the SDK on the main thread.
- Implement the
HumanDelegateto receive events from the SDK.
Here is an example of how it should be:
Android
Java / MainApplication.java:
iOS
Objective-C / AppDelegate.h:
Objective-C / AppDelegate.m:
Don’t forget to change the <APP_ID> to your own AppID and <YOUR_APP_NAME> to your React Native module name (as registered in AppRegistry).
Let’s talk about what we have in the code here:
- We start the SDK as soon as possible and on the main thread.
- We create a
HSPolicyinstance to configure the SDK’s behavior. Here, we set theinterceptorTypeproperty toHSAutomaticInterceptorType.NONE. This disables the automatic interception feature, which is not supported in React Native. - We call the
HumanSecurity.start(appId, policy)function of the SDK with:- The
Applicationinstance (Android only). - Your AppID.
- The policy object.
- The
- On iOS, we call the
startObservingfunction on theHumanModule. - On Android, we use
SoLoader.init(this, OpenSourceMergedSoMapping.INSTANCE)for proper native library loading (required for React Native 0.73+). - On iOS,
AppDelegateextendsRCTAppDelegate(required for React Native 0.73+). Setself.moduleNameandself.initialProps, then call[super application:application didFinishLaunchingWithOptions:launchOptions]to configure React Native.
Note: If your app communicates with multiple servers with different AppIDs, you can call the HumanSecurity.start(appIds, policy) function to pass an array of AppIDs. Specify the relevant AppID for each API call in the SDK.
How to add HTTP headers and handle block response
In your JavaScript code, you should:
- Import the
HumanModule. - Create a new native event emitter.
- Add a listener to the “New Headers” event.
- Add a listener to the “Challenge Result” event.
- Add the SDK’s HTTP headers to your URL requests.
- When a request is blocked, send the block response to the SDK.
- Handle the challenge’s result.
JavaScript:
Understanding the block response
-
The HUMAN’s Enforcer, when it decides to block a request, returns a JSON string in the response’s body with an HTTP status code of 403. Here is an example of the response:
-
The JSON contains metadata for the SDK.
-
Your app should pass the whole JSON to the SDK via the HSBotDefender/handleResponse(response:data:callback:) function. Otherwise, the SDK won’t present a challenge to the user.