Expo Integration

You can integrate the SDK into an Expo project. This article explains how to integrate and implement the HUMAN Expo SDK wrapper into an Expo app.

Integrate the HUMAN Expo Module

To integrate the HUMAN SDK into your Expo app, follow these steps:

$
npm install @humansecurity/expo-mobile-sdk

$
{
>
  "expo": {
>
    "plugins": [
>
      "@humansecurity/expo-mobile-sdk"
>
    ]
>
  }
>
}

$
npx expo prebuild

$
    repositories {
>
        // ... your existing repos
>
        maven { url 'https://jfrog.humansecurity.com/artifactory/human-android-sdk/' }
>
    }

HUMAN Expo Mobile API

The HUMAN Security Expo Mobile API offers the following functions:

1
export declare class HumanSecurity {
2
    static sdkVersion(): string;
3
    static startWithAppId(appId: string, policy?: HSPolicy): Promise<void>;
4
    static startWithAppIds(appIds: string[], policy?: HSPolicy): Promise<void>;
5
    static vid(appId: string): string | null;
6
    static BD: {
7
        headersForURLRequest(appId?: string): Promise<{ [key: string]: string }>;
8
        handleResponse(response: string, code: number, url: string): Promise<HSBotDefenderChallengeResult>;
9
        canHandleResponse(response: string, code: number, url: string): boolean;
10
        challengeReferenceId(): string;
11
        setCustomParameters(parameters: {[key: string]: string}, appId?: string): void;
12
        addListener(eventName: string, callback: (data: any) => void): import("expo-modules-core").Subscription;
13
    };
14
    static AD: {
15
        setUserId(userId: string | null, appId?: string): void;
16
        registerOutgoingUrlRequest(url: string, appId?: string): void;
17
        setAdditionalData(parameters: {[key: string]: string}, appId?: string): void;
18
    };
19
}

How to start the SDK

The most important step is to start the SDK as early as possible in your app flow. If your app sends a URL request to your server before the SDK starts, the attached headers won’t include the latest updated tokens. As a result, HUMAN’s Enforcer could block the request, and the SDK won’t be able to present a challenge to the user. Also, be sure to start the SDK only once.

To set it up, call startWithAppId in your Expo main entry point (index.tsx) or at the starting point of your app, where you register and initialize one-time services. It’s better to start the SDK outside of any UI component to avoid lifecycle issues.

1
import { HSPolicy, HumanSecurity } from "@humansecurity/expo-mobile-sdk";
2
3
// Initialize SDK once on app startup
4
(() => {
5
    HumanSecurity.startWithAppId("<APP_ID>")
6
    .then(() => {
7
        console.log("SDK started successfully");
8
    })
9
    .catch((error) => {
10
        console.error("Error starting the SDK:", error);
11
    });
12
})();

Policy options

Currently, the HSPolicy class includes two settings:

1. hybridAppPolicy — Use this if your app operates in hybrid mode, meaning it has a WebView that loads a site also protected by HUMAN and running its sensor. In this case, configure all relevant website domains with the appID.
2. detectionPolicy — This setting lets you configure whether the SDK can send touch and motion events, either touch only or both touch and motion, to the server to improve detection. By default, it is off, and you can choose to enable it.

For example:

1
import { HSPolicy, HumanSecurity } from "@humansecurity/expo-mobile-sdk";
2
3
// Initialize SDK once on app startup
4
(() => {
5
    const policy: HSPolicy = {
6
        hybridAppPolicy: {
7
             webRootDomains: {
8
                 APP_ID: ["my-domain.com"],
9
             },
10
           },
11
        detectionPolicy: {
12
           allowTouchDetection: true,
13
           allowDeviceMotionDetection: true,
14
         },
15
    };
16
17
    HumanSecurity.startWithAppId("<APP_ID>", policy)
18
    .then(() => {
19
        console.log("SDK started successfully");
20
    })
21
    .catch((error) => {
22
        console.error("Error starting the SDK:", error);
23
    });
24
})();

Here’s what the code includes:

1. We start the SDK as soon as possible and only once. (You can move this code to a different function/file and export it, as long as it’s called only once.)
2. The startWithAppId function of the SDK is called with the following parameters::
   • Your appID.
   • The policy object, if needed.
3. In the second example, an HSPolicy instance configures the SDK’s behavior. This object defines settings such as hybridAppPolicy.webRootDomains, indicating that the app uses WebViews containing pages from a domain also protected by HUMAN Security, which is considered hybrid mode. Additionally, detectionPolicy is configured to send touch and motion data. If these parameters aren’t needed, you can simply omit the policy.

Bot Defender Integration

Add the SDK’s HTTP headers to your URL requests and handle blocked requests

• The SDK provides HTTP headers that your app must add to URL requests. It’s essential to include these headers in every request.
• You shouldn’t cache these HTTP headers. They contain a token with an expiration date, and the SDK keeps it up to date. Ensure the code isn’t cached so that each request triggers a call to the HumanSecurity module.
• The SDK can handle the blocked request and present a challenge to the user.
• Ensure that arguments are passed correctly to the wrapper. For example, when using axios, you might need to call JSON.stringify(error.response?.data) before passing the response body to the SDK. Additionally, in Axios, the catch block handles blocked responses because it indicates a failed request.

The following are examples using either a fetch API or using axios.

1
import HumanSecurity, { HSBotDefenderChallengeResult } from "@humansecurity/expo-mobile-sdk";
2
3
4
static async makeApiCall(url: string): Promise<void> {
5
    try {
6
        const headers = await HumanSecurity.BD.headersForURLRequest(HumanSecurityManager.appId);
7
8
        const response = await fetch(url, {
9
            method: "GET",
10
            headers,
11
        });
12
13
        const statusCode = response.status;
14
        if (statusCode !== 200) {
15
            const responseText = await response.text();
16
            const canHandle = HumanSecurity.BD.canHandleResponse(responseText, statusCode, url);
17
18
            if (canHandle) {
19
                HumanSecurity.BD.handleResponse(responseText, statusCode, url)
20
                  .then((result) => {
21
                    if (result === HSBotDefenderChallengeResult.SOLVED) {
22
                      console.log("Challenge solved successfully! Retrying request...");
23
                    } else {
24
                      console.log("Challenge was cancelled, or failed.");
25
                    }
26
                  })
27
                  .catch((error) => {
28
                    console.error("Error handling response:", error);
29
                  });
30
            } else {
31
                console.log("Response cannot be handled by the library.");
32
            }
33
        } else {
34
            console.log(`API Call Successful with status ${statusCode}`);
35
        }
36
    } catch (error) {
37
        console.error("Error making API call:", error);
38
    }
39
}

Here’s what the code includes:

1. The SDK provides HTTP headers.
2. The HTTP headers are added to the URL requests.
3. The URL request is sent.
4. In case of an error, the response is sent to the SDK, which checks if it’s a blocked request by calling canHandleResponse. If canHandleResponse returns true, handleResponse is called to present the challenge to the user.
5. The challenge result HSBotDefenderChallengeResult can be one of the following:
   • SOLVED – The user successfully completed the challenge.
   • CANCELLED – The user dismissed or failed to complete the challenge.
   • FAILED – The SDK was unable to handle the response, usually indicating that something wasn’t passed correctly to the handleResponse function.

Note that you can await handleResponse, but in this case, you would be waiting until the user solves the challenge. You can also continue your flow and handle the result in the .then block, as shown in the example.

What to do when a request is blocked

• Handle it as a failure. Your app should treat the blocked request as a failure. However, keep in mind that your app’s UI will be shown again after the user has solved or cancelled the challenge. If the request was triggered by a user action, you should make it clear that the user may try again.
• Use the promise result to write analytics, logs, etc.
• You may use the returned promise to retry the original request when appropriate. Consider the following:
  • The promise returns out of the original request’s scope. Make sure you handle that case correctly.
  • The user might cancel the challenge. In this case, you shouldn’t retry the request because it would be blocked again.
  • The retry attempt might fail. Don’t assume it will be successful.

Understanding the block response

1. HUMAN’s Enforcer, when it decides to block a request, returns a JSON string in the response body with status code 403. For example:

1
{
2
  "vid": "928d7ab3-9cf1-11ee-a624-b802520f369f",
3
  "uuid": "fd01e6d6-9cf2-11ee-808c-acde48001122",
4
  "page": "...",
5
  "appId": "PXj9y4Q8Em",
6
  "action": "captcha",
7
  "collectorUrl": "https://collector-pxj9y4q8em.perimeterx.net"
8
}

2. The JSON contains metadata for the SDK.
3. Your app should pass the entire JSON as response in a string format, along with the status code and URL, to the SDK via the following. Otherwise, the SDK won’t present a challenge to the user.

1
HumanSecurity.BD.handleResponse(response: string, code: number, url: string): Promise<HSBotDefenderChallengeResult>

Set Custom Parameters for Bot Defender (Optional)

You can set custom parameters to configure HUMAN’s backend with additional values. To do so:

• Set those parameters as an object in JavaScript using keys in the format custom_param_[x], where [x] is a number between 1 and 10.
• After calling startWithAppId, call setCustomParameters.

For example:

1
import { HumanSecurity } from "@humansecurity/expo-mobile-sdk";
2
3
function setCustomParametersForBotDefender() {
4
    const parameters = { custom_param_1: "value1", custom_param_2: "value2" };
5
    try {
6
        HumanSecurity.BD.setCustomParameters(parameters, "<APP_ID>");
7
        console.log("Custom Parameters Set Successfully");
8
    } catch (error) {
9
        console.log("Failed to Set Custom Parameters");
10
    }
11
}

Bot Defender Delegates

Bot Defender provides several delegates, or callbacks, to notify about events related to headers and challenges. These callbacks are mainly intended for analytics and statistics rather than for taking specific actions. In the Expo library, these callbacks work as events.

To listen to a specific event, you must add a listener for it. When the event triggers, you can log or handle the result accordingly. Be sure to remove the listener when leaving the context to avoid memory leaks.

Below is an example implementation for listening to all events and also how to handle a single specific event.

1
import { HumanSecurity, HS_EVENTS } from "@humansecurity/expo-mobile-sdk";
2
import { useEffect } from "react";
3
4
useEffect(() => {
5
  const eventListeners = Object.values(HS_EVENTS).map((eventName) => {
6
    console.log(`Registering listener for event: ${eventName}`);
7
    return HumanSecurity.BD.addListener(eventName, (data) => {
8
      handleEvent(eventName, data);
9
    });
10
  });
11
12
  return () => {
13
    eventListeners.forEach((subscription) => subscription.remove());
14
  };
15
}, []);
16
17
const handleEvent = (eventName: string, data: any) => {
18
  console.log(`Event Received: ${eventName}`, data);
19
  // This is the full list of events.
20
  switch (eventName) {
21
    case HS_EVENTS.BOT_DEFENDER_REQUEST_BLOCKED:
22
      console.log("Request Blocked");
23
      break;
24
25
    case HS_EVENTS.BOT_DEFENDER_CHALLENGE_SOLVED:
26
      console.log("Challenge Solved");
27
      break;
28
29
    case HS_EVENTS.BOT_DEFENDER_CHALLENGE_CANCELLED:
30
      console.log("Challenge Cancelled");
31
      break;
32
33
    case HS_EVENTS.BOT_DEFENDER_CHALLENGE_RENDERED:
34
      console.log("Challenge Rendered");
35
      break;
36
37
    case HS_EVENTS.BOT_DEFENDER_CHALLENGE_RENDER_FAILED:
38
      console.log("Challenge Render Failed");
39
      break;
40
41
    case HS_EVENTS.BOT_DEFENDER_DID_UPDATE_HEADERS:
42
      console.log("Headers Were Updated");
43
      break;
44
45
    default:
46
      console.log("Unknown event received:", eventName);
47
      break;
48
  }
49
};

Listening to a Single Event

If you only want to listen to a single specific event, you can do the following:

1
useEffect(() => {
2
  const specificEvent = HS_EVENTS.BOT_DEFENDER_CHALLENGE_SOLVED;
3
  console.log(`Registering listener for event: ${specificEvent}`);
4
5
  const eventListener = HumanSecurity.BD.addListener(specificEvent, (data) => {
6
    // Handle the specific event
7
    console.log(`Specific Event Received: ${specificEvent}`, data);
8
  });
9
10
  // Clean up the listener when leaving the context
11
  return () => {
12
    eventListener.remove();
13
  };
14
}, []);

Account Defender Integration

Enable Account Defender in your app

In order to enable Account Defender, you should set the UserID of your current logged-in user in the SDK. When the user logs out, make sure to call the function with null to clear the user ID. For example:

1
import { HumanSecurity } from "@humansecurity/expo-mobile-sdk";
2
3
function onUserLoggedIn(userID) {
4
  try {
5
    HumanSecurity.AD.setUserId(userID, "<APP_ID>");
6
  } catch (error) {
7
    console.log(`Exception: ${error.message}`);
8
  }
9
}
10
11
function onUserLoggedOut() {
12
  try {
13
    HumanSecurity.AD.setUserId(null, "<APP_ID>");
14
  } catch (error) {
15
    console.log(`Exception: ${error.message}`);
16
  }
17
}

Notify HUMAN’s backend on outgoing URL requests from the app

In order to allow Account Defender to protect the user’s account, your app must provide the SDK with outgoing URL requests. This should be done after you set the user id.

1
import { HumanSecurity } from "@humansecurity/expo-mobile-sdk";
2
3
...
4
   // In your sendAPIRequest function
5
6
    const headers = await HumanSecurity.BD.headersForURLRequest(appId);
7
8
    // Add this for account defender
9
    HumanSecurity.AD.registerOutgoingUrlRequest(url, appId);
10
11
    const response = await fetch(url, {
12
      method: "GET",
13
      headers,
14
    });
15
16
...

Here’s what the code includes:

Call the HumanSecurity.AD.registerOutgoingUrlRequest(url: string, appId?: string): void function before sending the URL request. If you’re using a custom HttpClient service, add this function to the request interceptor.

Set additional data (optional)

You can set additional data to configure HUMAN’s backend with extra parameters.

To do so, call HumanSecurity.AD.setAdditionalData(parameters: { [key: string]: string }, appId?: string): void after calling HumanSecurity.startWithAppId(appId: string, policy?: HSPolicy): Promise<void>.

For example:

1
import { HumanSecurity } from "@humansecurity/expo-mobile-sdk";
2
3
function setAdditionalDataForAccountDefender() {
4
    try {
5
        const additionalData = {
6
          my_key1: "hello",
7
          my_key2: "world"
8
      };
9
      HumanSecurity.AD.setAdditionalData(additionalData, "<APP_ID>");
10
    } catch (error) {
11
        console.error(`Failed to Set Additional Data: ${error.message}`);
12
    }
13
}

Simulate a challenge

You can simulate a challenge to test the integration. To do so, follow the steps in our help article.