React Native fingerprinting

Using the Castle React Native SDK to fingerprint React Native app user devices

Summary

Fingerprinting is a core component of a Castle integration that enhances Castle’s ability to detect fraudulent and malicious abuse of in-application activity.


Steps

  1. Configure with API key
  2. Forward the fingerprint
  3. (optional) Configuration


Tutorial

Step 1. Configure with API key

Grab your Publishable API Key from the Castle dashboard settings page and configure the SDK:

import Castle from "@casteio/react-native-castle";

await Castle.configureWithPublishableKey("{Publishable-API-Key}");

The Castle SDK collects fingerprint information from the device and sends this information directly to Castle. These requests are batched to optimize device performance. See the last section below, Configuration Notes, to make changes to the way Castle collects and batch-processes this fingerprint information.

Step 2. Forward the fingerprint

The Castle React Native SDK generates a value that we call the client_id. Forward the Castle client_id in relevant requests to your application server.

The client_id value contains a proprietary signature of the mobile device fingerprint. This value should not be used as an identifier. It should be treated as a token. The value will change over time.

You will need to forward the client identifier as a request header to every request to your API. This header will then be parsed by the Castle server-side SDK. You can specify this header name in the SDK configuration.

import Castle from "@casteio/react-native-castle";

const clientIdHeaderName = await Castle.clientIdHeaderName();
const clientId = await Castle.clientId();

let requestHeaders = new Headers();
requestHeaders.append(clientIdHeaderName, clientId);

then, from the application server (this code results in an error for invalid ip - it is meant for reference only):

curl -s https://api.castle.io/v1/authenticate \
  -X POST \
  -u ":$SECRET" \
  -H "Content-Type: application/json" \
  -d '
  {
    "event": "$login.succeeded",
    "user_id": "{user_id}",
    "user_traits": {
      "email": "{user_email}"
    },
    "context": {
      "client_id": "{castle_client_id}",
      "ip": "{ip}",
      "headers": {
        "User-Agent": "{User-Agent}"
      }
    }
  }' | json_pp

Step 3. (optional) Configuration

  • The SDK allows for additional configuration options. Please refer to the documentation packaged with the SDK code for full details. Below is an example.
import Castle from "@casteio/react-native-castle";

// screen tracking and device ID auto forwarding are disabled
const configuration = await Castle.configure({
  publishableKey: "{Publishable-API-Key}",
  debugLoggingEnabled: true,
  flushLimit: 10, // default: 20
  maxQueueLimit: 100, // default: 1000
  baseURLAllowList: ['https://api.castle.io/'],
});

Configuration notes

Queue flushing

The SDK queues API calls to save battery life, and it only flushes queued events to the Castle API whenever the app is installed, updated, opened or closed; when identify is called; or when the queue reaches 20 events. This ensures that the device fingerprint is fully profiled before any requests to your server side.

Automatic screen tracking

When automatic screen tracking is enabled any activities or view controllers shown will automatically generate a screen event. The screen name will use a normalized version of the activities or view controllers title. For more granular control we suggest disabling automatic screen tracking (on by default) and calling screen manually.