Introduction

Arkose Labs' mobile SDKs let you wrap our solution with React Native function calls. This guarantees seamless integration of your mobile apps with Arkose's full interactive challenges on detection and enforcement and does so without the extended wait times for separate mobile solutions.

This page covers the Mobile SDK for React Native on Android and iOS. If you are developing native apps for Android and iOS, see the Mobile SDK for Android page and Mobile SDK for iOS page.

The Arkose Mobile SDK:

• Wraps Arkose's Advanced Enforcement Challenge in native OS “web views”.
• Has 1-to-1 feature availability between web and mobile solutions.
• Integrates with your apps through native TypeScript functions.
• Handles errors through events.
• Complies with Arkose Internal Security guidelines.
• Complies with Google Play Store guidelines for ease of integration.
• Complies with Apple App Store guidelines for ease of integration.
• Is fully compatible with new Enforcement Challenge-API (EC-API) releases.
• Supports minimum version Android OS 6.0 and iOS 13.0.

Mobile SDK High Level Design

Mobile SDK Builds Availability

The Arkose Labs Mobile SDKs are available via the Mobile SDK's Support page. Please talk with your CSM (Customer Success Manager) about your intended usage and to request access.

Compatibility

The Arkose Labs Mobile SDK for React Native works with React Native version 0.60 and above and supports Android 6.0 and iOS 13.0 and above.

All existing detection and challenge features on our web solutions are also available on the Mobile SDKs. All new ones are automatically added; you don't need to update your application every time we release a new Web platform. All challenge updates can be done without updating the SDKs or releasing a new version of your application.

Security

The Arkose Labs Mobile SDKs are Arkose Labs Security reviewed and comply with Apple App Store and Google Play Store guidelines.

---

Installation

Follow the steps below to set up Arkose Labs Mobile SDK for React Native application. This applies to both Arkose's detection and enforcement components.

Prerequisites

• A host React Native application. You must be able to build and run this application.
• For the full end-to-end Arkose setup, you must also complete the standard Arkose Server-Side setup instructions.

Step 1: Set up iOS Project

1. Create an ArkoseLabs folder under the root of your React Native application folder
2. Download the Arkose Labs React Native SDK and place it under the ArkoseLabs folder created in step 1 above.
3. From the root of your application folder, run npm install ArkoseLabs/react-native-arkoselabs-x.y.z.tgz. Please update the x.y.z part in the file name with the actual version number that matches the downloaded file. This will install the node module react-native-arkoselabs in your application.
4. Update s.source value in node_modules/react-native-arkoselabs/react-native-arkoselabs.podspec to s.source = { :http => 'file://'+__dir*__+'/../../../ArkoseLabs/react-native-arkoselabs-x.y.z.tgz'}
   • Please update the x.y.z part in the file name with the actual version number that matches the downloaded file.
5. Add the following lines to ios/Podfile file under the main application target: pod 'react-native-arkoselabs' , :podspec => '../node_modules/react-native-arkoselabs'
6. From the ios folder, run pod install to add 'react-native-arkoselabs' to the Pods.xcodeproj inside ios/Pods folder along with all associated Pods.
7. Open the xcworkspace from the ios folder using Xcode.
8. Add the xcframework to Pods project:
   1. Select the Pods Project in the navigator.
   2. In the Targets section, scroll down to react-native-arkoselabs and select the target.
   3. Select the Build Phases of react-native-arkoselabs target.
   4. Expand the Link Binary with Libraries section and press the + button.
   5. Select Add Others > Add Files, navigate to the ArkoseLabsKit.xcframework located under node_modules/react-native-arkoselabs/ios/Libs and select it.
9. Add the same xcframework from the path specified above to the application project using the same steps as the Pods project above.
10. Select the General tab of the application target, scroll down to Frameworks, Libraries, and Embedded Content.
11. Press the + button here and add the ArkoseLabsKit.xcframework listed under the application Project.
12. After the xcframework is added to this section, enable Embed & Sign option using the dropdown menu in this section.
13. Build the Application from Xcode and close after it builds successfully.

Step 2: Import and add Arkose code to your application

1. Navigate to App.tsx inside the Application folder to initialize the SDK.

   TypeScript

   import { ArkoseEvents, ArkoseManager } from "react-native-arkoselabs";
   
   export default function App() {
   
     React.useEffect(() => {
       // Set the log level of the SDK
       ArkoseManager.setLogLevel("debug");
       
       // Register listeners for Arkose events
       ArkoseEvents.addListener("onReady", () => console.log("onReady event"));
       ArkoseEvents.addListener("onShow", () => console.log("onShow event"));
       ArkoseEvents.addListener("onShown", () => console.log("onShown event"));
       ArkoseEvents.addListener("onHide", () => console.log("onHide event"));
       ArkoseEvents.addListener("onSupress", () => console.log("onSupress event"));
       ArkoseEvents.addListener("onCompleted", (result) => {
         console.log("onCompleted event", result);
       });
       ArkoseEvents.addListener("onError", (result) => {
         console.log("onError event", result);
       });
       ArkoseEvents.addListener("onFailed", (result) => {
         console.log("onFailed event", result);
       });
       
       // Initialize the SDK
       ArkoseManager.initialize({
         apiKey: "SPECIFY_YOUR_API_KEY",
         language: ""
       });
     }, []);
   }
   

2. To show the Enforcement View from the onPress() event of a Login Button, call showEnforcementChallenge method with a dictionary of titles for the cancel and reset buttons. This will run our detection component (when running our enforcement component, it also runs Arkose’s Enforcement Challenge). During the enforcement lifecycle, ArkoseEvents will be emitted and the listeners are invoked.

   TypeScript

   const enforcementParameters = {
     cancelButtonTitle: "Cancel",
     resetButtonTitle: "Reset",
   };
   ArkoseManager.showEnforcementChallenge(enforcementParameters);
   
   

Step 3: Run and test the app

1. Run your React Native application.

2. If running our enforcement component, the view shows an Arkose Labs Enforcement Challenge.

   • If running Arkose detection component, the view runs Arkose Labs Detect.

3. If running our enforcement component, verify the challenge.

4. When the verification or detection is successful, the onCompleted event returns a response token. The following sample code shows what this should look like and what to do with the token.

   ArkoseEvents.addListener("onCompleted", (result) => {
     // invoked On Enforcement Challenge success
     String userResponseToken = result.getResponse().toString();
     // Get value of the token
     String userResponseToken = arkoseChallengeResponse.getResponse().getString("token");
     Log.i(TAG,"Arkose EC complete: " + userResponseToken);
     // sendToBackendServer(userResponseToken);
   });
   
   

---

ArkoseManager Class

ArkoseManager class provides public methods to integrate the application with Arkose Bot Manager.

• initialize(configuration)
  Initialize Arkose Bot Manager SDK with the configuration parameters. Configuration is a JSON dictionary or object with the following parameters:

  • apiKey: The public key of your account
  • apiBaseUrl: Base URL of Arkose Labs EC platform as supplied by Arkose Labs.
  • blob: Specify any encrypted data blobs to share with Arkose Bot Manager. It is optional.
  • language: Specify any language setting for the Enforcement Challenge, the default value is en. It is optional.

• showEnforcementChallenge(configuration)
  Display the Enforcement Challenge View and invokes the ArkoseChallengeDelegate methods to notify the result. Configuration is a JSON dictionary or object with the following parameters:

  • cancelButtonTitle: A localized string for the title of the Cancel button, the default value is "Cancel".If this parameter is set to nil, the Cancel button is not shown in the view.
  • resetButtonTitle: A localized string for the title of the Reset button, the default value is nil.If this parameter is set to nil, the Reset button is not shown in the view.

• setLogLevel(logLevel)
  Set the log level for the SDK. All messages logged by the SDK will have the [ArkoseLabsKit] text for easy identification. Valid LogLevel values are: info, warn, error

---

ArkoseEvents Class

ArkoseEvents class provides public methods to register listeners for various events emitted by the SDK to notify the application of different activities.