# React Native module quick start

This guide describes how to integrate Fraud Prevention into your React Native application. It helps you set up the Mosaic React Native module, enabling you to enhance your mobile applications' security with Fraud Prevention services.

Note
Client-side integrations are recommended for POCs and testing. For production environments, consider implementing [Backend integration](/guides/risk/quick_start_backendapi). Learn more about integration options: [Client-side integration vs Backend integration](/guides/risk/integration_clientside_vs_backend).

## How it works

The flow starts with the user navigating to the app (1). The module gets initialized and starts sending telemetry to Mosaic (2). When a user performs an action, for example, clicks a login button (3), the module triggers an action event (4) and obtains an action token (5) which then forwards to the backend (6). Having received an action token, the application backend uses it to fetch recommendation from Mosaic (7 & 8) and instructs the client to act accordingly (9) in order to complete the login procedure (10). Upon successful login, the client sets the user (11).

![](/assets/drs-integrations.88751400966c093ef32f43c3a699d31f766f7ff46b9053f2fbaa898cf39860b5.e95a590b.png)

## Step 1: Get client credentials

div
div
Admin Portal
Client credentials are used to identify your app and generate access tokens for authorizing Mosaic requests. To obtain them, you'll need to create an application in the [Admin Portal](https://portal.transmitsecurity.io/) (if you don't have one yet).

1. From **Applications**, click **Add application**.
2. Add the friendly application name to display in the Admin Portal.
3. Add an OIDC client, specify the client secret as an authentication method, and your website URL as a redirect URI (e.g., `https://your-domain.com`).


Note
These fields are required for all Mosaic apps, but won't be used for Fraud Prevention.

1. Click **Add** to create your application. This will automatically generate your client credentials.


## Step 2: Install the module

div
div
Client
Install the Mosaic React Native module:


```bash
npm install react-native-ts-accountprotection
```

## Step 3: Configure the module

div
div
Client
Android
### Update build.gradle

In your `app/build.gradle` file, add the following under `repositories`:


```gradle
repositories {
  google()
  maven {
    url 'https://transmit.jfrog.io/artifactory/transmit-security-gradle-release-local/'
  }
}
```

Then, add the following under `dependencies`:


```gradle
dependencies {
  implementation "com.ts.sdk:accountprotection:3.0.0"
}
```

Code shrinking and obfuscation
If your React Native Android app enables code shrinking or obfuscation (`minifyEnabled true` in `build.gradle`), add the following keep rule to your app's `proguard-rules.pro` file:


```proguard
-keep class com.facebook.react.** { *; }
```

### Update strings.xml

Update your `strings.xml` file by adding the following:


```xml
<resources>
    <!-- Mosaic Credentials -->
    <string name="transmit_security_client_id">"CLIENT_ID"</string>
    <string name="transmit_security_base_url">https://api.transmitsecurity.io/risk-collect/</string>
</resources>
```

Use the appropriate base URL for your environment:

| Environment | Base URL |
|  --- | --- |
| US | `https://api.transmitsecurity.io/risk-collect/` |
| EU | `https://api.eu.transmitsecurity.io/risk-collect/` |
| Canada | `https://api.ca.transmitsecurity.io/risk-collect/` |
| Australia | `https://api.au.transmitsecurity.io/risk-collect/` |
| Custom domain | `https://<your_custom_domain>/risk-collect/` |


iOS
### Install CocoaPods dependencies

Navigate to your iOS project directory and run `pod install`.

### Create TransmitSecurity.plist

Create a file named `TransmitSecurity.plist` in your native iOS Xcode project and add the following content:


```xml
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
    <key>credentials</key>
    <dict>
        <key>baseUrl</key>
        <string>https://api.transmitsecurity.io/risk-collect/</string>
        <key>clientId</key>
        <string>[CLIENT_ID]</string>
    </dict>
</dict>
</plist>
```

Use the appropriate base URL for your environment:

| Environment | Base URL |
|  --- | --- |
| US | `https://api.transmitsecurity.io/risk-collect/` |
| EU | `https://api.eu.transmitsecurity.io/risk-collect/` |
| Canada | `https://api.ca.transmitsecurity.io/risk-collect/` |
| Australia | `https://api.au.transmitsecurity.io/risk-collect/` |
| Custom domain | `https://<your_custom_domain>/risk-collect/` |


## Step 4: Import and initialize the module

div
div
Client
Android
Open your `MainApplication.kt` file in your React Native Android project, and add:


```kotlin
import com.transmit.accountprotection.TSAccountProtection

class MainApplication : Application() {
  override fun onCreate() {
    super.onCreate()
    TSAccountProtection.initializeSDK(this.applicationContext)
    // ...
  }
}
```

iOS
On iOS, the module can be initialized from the React Native layer. Choose **one** of the following options:

**Option A: Using plist configuration**

If you created a `TransmitSecurity.plist` file in [Step 3](#step-3-configure-the-module):


```javascript
import React, { useEffect } from 'react';
import { Platform } from 'react-native';
import { initializeSDKIOS } from 'react-native-ts-accountprotection';

function App() {
  useEffect(() => {
    if (Platform.OS === 'ios') {
      initializeSDKIOS();
    }
  }, []);

  // ...
}
```

**Option B: Using explicit parameters**

Initialize with explicit client ID, base URL, and optional configuration:


```javascript
import React, { useEffect } from 'react';
import { Platform } from 'react-native';
import { initializeIOS } from 'react-native-ts-accountprotection';

function App() {
  useEffect(() => {
    if (Platform.OS === 'ios') {
      initializeIOS(
        "CLIENT_ID",
        "https://api.transmitsecurity.io/risk-collect/",
        {
          enableTrackingBehavioralData: true, // Defaults to true
          enableLocationEvents: true // Defaults to false
        },
        "optional-user-id" // Optional: Set user ID during initialization
      );
    }
  }, []);

  // ...
}
```

The optional configuration object accepts the following properties:

| Property | Type | Description |
|  --- | --- | --- |
| `enableTrackingBehavioralData` | `boolean` | Enables collection of behavioral data such as user interactions and navigation patterns. Default: `true` |
| `enableLocationEvents` | `boolean` | Enables reporting device location during module initialization and when the app moves to the foreground. Default: `false`. The user must consent to sharing location in advance (see [Track geolocation](/guides/risk/report_geolocation)). |


Use the appropriate base URL for your environment:

| Environment | Base URL |
|  --- | --- |
| US | `https://api.transmitsecurity.io/risk-collect/` |
| EU | `https://api.eu.transmitsecurity.io/risk-collect/` |
| Canada | `https://api.ca.transmitsecurity.io/risk-collect/` |
| Australia | `https://api.au.transmitsecurity.io/risk-collect/` |
| Custom domain | `https://<your_custom_domain>/risk-collect/` |


Backend integration
Start a module session and obtain a device session token after module initialization and prior to triggering events, and persist it on your backend. This step is optional for client-side integration but **strongly recommended** as it allows you to transition to the [backend integration](/guides/risk/quick_start_backendapi)—a device session token is needed to trigger events from the backend and binds the user's interactions to their device.


```javascript
import { getSessionToken } from 'react-native-ts-accountprotection';

const sessionToken = await getSessionToken();
```

## Step 5: Collect behavioral data

div
div
Client
To collect behavioral data in addition to the other telemetry the module sends, do the following:

1. **Track screen navigation** by calling `logPageLoad()` whenever the active route changes. If you use [React Navigation](https://reactnavigation.org/), attach handlers to `NavigationContainer` as in this example:



```tsx
import React from 'react';
import { NavigationContainer, useNavigationContainerRef } from '@react-navigation/native';
import { logPageLoad } from 'react-native-ts-accountprotection';

export default function App() {
  const navigationRef = useNavigationContainerRef();
  const previousRouteNameRef = React.useRef<string | undefined>();

  return (
    <NavigationContainer
      ref={navigationRef}
      onReady={() => {
        const routeName = navigationRef.getCurrentRoute()?.name;
        if (routeName) {
          previousRouteNameRef.current = routeName;
          logPageLoad(routeName);
        }
      }}
      onStateChange={() => {
        const routeName = navigationRef.getCurrentRoute()?.name;
        if (routeName && routeName !== previousRouteNameRef.current) {
          previousRouteNameRef.current = routeName;
          logPageLoad(routeName);
        }
      }}
    >
      <YourNavigator />
    </NavigationContainer>
  );
}
```

Replace `<YourNavigator />` with your app's navigator component.

1. **Label important UI elements.** We strongly recommend assigning a value to the `testID` property on views that hold significance within the user flow in your app, such as buttons, inputs, and other key controls. Elements without a `testID` attribute are not included in behavioral data collection.



```tsx
<TouchableOpacity testID="login_button" onPress={handleLogin}>
  <Text>Login</Text>
</TouchableOpacity>

<TextInput
  testID="username_input"
  placeholder="Username"
  value={username}
  onChangeText={setUsername}
/>

<TouchableOpacity testID="submit_payment_button" onPress={handlePayment}>
  <Text>Submit Payment</Text>
</TouchableOpacity>
```

## Step 6: Use the React Native module

div
div
Client
The example below demonstrates triggering a login event from a login button, setting and clearing a user.

Note
For an alternative approach that directly utilizes our backend API instead, refer to our [Backend API implementation](/guides/risk/quick_start_backendapi#step-4-trigger-actions) guide.

- `triggerAction()` receives an action type and returns a response that includes the `actionToken` that you should pass to the backend. To obtain risk recommendations for sensitive actions, your application should report these actions. To do this, add the code below to relevant user interactions (such as the Login button `click` event handler). The module allows reporting on events with specific action types. Replace `[ACTION_TYPE]` with the appropriate action type from our [list of actions](/guides/risk/recommendations).
  - To improve Fraud Prevention, optionally pass the correlation ID, and claimed user ID and its type (for users that haven't authenticated yet).
  - To report precise device location, add `locationConfig` to the call (the user has to consent to sharing location in advance, see [Track geolocation](/guides/risk/report_geolocation)).
  - `customAttributes` is an optional object that adds context to an action but must match the schema defined in the Portal. Invalid attributes are ignored (see [Custom attributes](/guides/risk/action-attributes)).



```javascript
import { triggerAction, setAuthenticatedUser, clearUser, TSAction, TSClaimedUserIdType } from 'react-native-ts-accountprotection';

private handleTriggerActionLoginExample = async () => {
  const triggerActionResponse = await triggerAction(
    TSAction.login,
    {
      correlationId: "CORRELATION_ID",
      claimedUserId: "91e25bea0c...", // hashed email
      claimedUserIdType: TSClaimedUserIdType.email,
      referenceUserId: "REFERENCE_USER_ID",
      transactionData: undefined
    },
    { // locationConfig (optional)
      mode: "default" // Options: "disabled", "default", "forceCurrent", "forceLastKnown", "lastKnown"
    },
    { // customAttributes (optional)
      userLevel: "premium"
    }
  )
  const actionToken = triggerActionResponse.actionToken;
  console.log("Action Token: ", actionToken);
}
```

- `setAuthenticatedUser()` sets the user context for all subsequent events for the session (or until the user is explicitly cleared). It should be called only after you've fully authenticated the user (including, for example, any 2FA that was required). For the complete list of action types, see our [recommendations](/guides/risk/recommendations#action-types) page.

```javascript
await setAuthenticatedUser(username);
```
- `clearUser()` clears the user context for all subsequent events in the mobile session. The user gets automatically cleared once the session expires or in case of a login action.

```javascript
await clearUser();
```
- `getSessionToken()` returns a session token needed for triggering events from the backend.

```javascript
import { getSessionToken } from 'react-native-ts-accountprotection';
const sessionToken = await getSessionToken();
```


## Step 7: Fetch recommendations

div
div
Backend
You can fetch recommendations for the reported action using the [Recommendation API](/openapi/risk/recommendations.openapi/other/getriskrecommendation). This is the same API that's also used for mobile integrations.

Mosaic APIs are authorized using an OAuth access token so you'll need to fetch a token using your client credentials (from Step 1). To do this, send the following request:


```javascript
  const { access_token } = await fetch(
    `https://api.transmitsecurity.io/oidc/token`,
    {
      method: 'POST',
      headers: {
        'Content-Type': 'application/x-www-form-urlencoded'
      },
      body: new URLSearchParams({
        grant_type: client_credentials,
        client_id: [CLIENT_ID],
        client_secret: [CLIENT_SECRET]
      })
    }
  );
```

From your backend, invoke the Recommendation API by sending a request like the one below. The `[ACCESS_TOKEN]` is the authorization token you obtained using your client credentials and `[ACTION_TOKEN]` is the `actionToken` received in Step 6.


```javascript
const query = new URLSearchParams({
  action_token: '[ACTION_TOKEN]',
}).toString();

const resp = await fetch(
  `https://api.transmitsecurity.io/risk/v1/recommendation?${query}`,
  {
    method: 'GET',
    headers: {
      Authorization: 'Bearer [ACCESS_TOKEN]',
    },
  }
);
```