---
source_url: "https://developer.transmitsecurity.com/guides/risk/quick_start_web"
title: JavaScript SDK quick start
mirrored_at: 2026-08-14T01:39:35.249Z
host: developer.transmitsecurity.com
cited_in_42a: true
mirror_canonical: "https://index.42a.ai/developer.transmitsecurity.com/guides/risk/quick_start_web"
---

> **Original source:** https://developer.transmitsecurity.com/guides/risk/quick_start_web

This guide describes how to quickly integrate Fraud Prevention into your web application to get started. This includes both the client-side integration, as well as the backend API integration required to complete the flow.

[Check out our sample app ![](https://developer.transmitsecurity.com/assets/external-link-light.4df94bb69d7e4b3a55938c8f3dcdfbdcbbf62d7475987ed4e85f8f528cad1141.9c1bb791.svg)](https://github.com/TransmitSecurity/ciam-expressjs-vanilla-samples/tree/main/password-authentication-drs) 

## How it works

The flow starts with the user navigating to the webpage (1). The SDK gets initialized and starts sending telemetry to Mosaic (2). When a user performs an action, for example, clicks a login button (3), the SDK 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).

![](https://developer.transmitsecurity.com/assets/drs-integrations.e8bd6c270c3421cd094a28293ef02bbedc1ec768e8b114e37ca9db8266381857.e95a590b.png)

## Before you start

Before you start integrating the SDK:

-   Ensure that **Fraud Prevention** is enabled as the risk engine for your tenant. Identity Threat Protection and Fraud Prevention are mutually exclusive—contact your Customer Success Manager to enable the appropriate engine.
-   Ensure effective communication with Mosaic's assets, including enabling Mosaic's IPs and URLs on your network and extending the `Content-Security-Policy` header (if you have enabled [Content Security Policy](https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP) (MDN) on your web server). See [Enable communication with Mosaic APIs](https://developer.transmitsecurity.com/guides/quick_start/enable_communication) for additional information.

## Step 1: Get client credentials

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](https://developer.transmitsecurity.com/guides/user/create_new_application) in the [Admin Portal](https://portal.transmitsecurity.io/) (if you don't have one yet).

From **Applications**, click **Add application** and enter the friendly application name to display in the Admin Portal.

Then open the application's **Clients** tab and [add an OIDC-based User authentication client](https://developer.transmitsecurity.com/guides/user/manage_clients) for this integration. Keep **Client Secret** as the authentication method and, if prompted, enter your website URL as the redirect URI. Upon saving the client, Mosaic automatically generates the **Client ID** and **Client Secret**.

Note

The redirect URI is required for client setup, but it isn't used in this flow.

## Step 2: Load SDK

Client

Start by loading the SDK from the registry (recommended) or CDN.

npm install @transmitsecurity/platform-web-sdk@^2

Then import the Fraud Prevention module and initialize it. For more details about available options and customizations, see the [SDK reference](https://developer.transmitsecurity.com/sdk-ref/platform/installation).

-   `clientId`: (required) your client ID from [Step 1](https://developer.transmitsecurity.com/guides/risk/quick_start_web#step-1-get-client-credentials).
-   `serverPath`: (required) the base URL for submitting telemetry and actions. Set based on your region or [custom domain](https://developer.transmitsecurity.com/guides/deployment/custom_domains):
    -   US: `https://api.transmitsecurity.io/risk-collect/`
    -   EU: `https://api.eu.transmitsecurity.io/risk-collect/`
    -   CA: `https://api.ca.transmitsecurity.io/risk-collect/`
    -   AU: `https://api.au.transmitsecurity.io/risk-collect/`
    -   JP: `https://api.gasne1-ts01.transmitsecurity.io/risk-collect/`
    -   Sandbox: `https://api.sbx.transmitsecurity.io/risk-collect/`
    -   Custom domain: `https://<your_custom_domain>/risk-collect/`

import { drs, initialize } from '@transmitsecurity/platform-web-sdk';
initialize({
  clientId: "\[CLIENT\_ID\]",
  drs: {
    serverPath: "https://api.transmitsecurity.io/risk-collect/" // Required: Set serverPath based on your region or custom domain
  }
});

## Step 3: Trigger actions

Client

To obtain risk recommendations for sensitive actions, your application should report these actions using the SDK. To do this, add the JS code below to relevant user interactions (such as the Login button `click` event handler). Replace `[ACTION_TYPE]` with the appropriate action type from our [list of actions](https://developer.transmitsecurity.com/guides/risk/recommendations#action-types). To improve Fraud Prevention, optionally pass the correlation ID, and claimed user ID and its type. This call returns an `actionToken` that you should pass to your backend to obtain the recommendation in the next step and, if needed, report the final outcome of that action. For successful login flows, reporting the final result also sets the authenticated user in Mosaic.

const actionResponse = await drs.triggerActionEvent("\[ACTION\_TYPE\]", { correlationId: "\[CORRELATION\_ID\]", claimedUserId: "\[CLAIMED\_USER\_ID\]" });
const actionToken = actionResponse.actionToken;
// Add code here to send the received actionToken to your backend

## Step 4: Fetch recommendation

Backend

You can fetch recommendations for the reported action using the [Recommendation API](https://developer.transmitsecurity.com/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:

  const resp = 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\]'
      })
    }
  );
  const { access\_token } \= await resp.json();

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 from the SDK in step 3.

const query = new URLSearchParams({
  action\_token: '\[ACTION\_TOKEN\]', // Obtained in Step 3
}).toString();
const resp = await fetch(
  \`https://api.transmitsecurity.io/risk/v1/recommendation?${query}\`,
  {
    method: 'GET',
    headers: {
      Authorization: 'Bearer \[ACCESS\_TOKEN\]',
    },
  }
);

## Step 5: Set user

Client

A user identifier should be reported to Mosaic only after the user is fully authenticated, including any required 2FA. This sets the user for subsequent events in the current device session until the user is cleared or the app starts a new login flow.

For successful `login` and custom login actions, if the code that completes the login still has the original `actionToken` from [Step 3](https://developer.transmitsecurity.com/guides/risk/quick_start_web#step-3-trigger-actions), use [`reportActionResult()`](https://developer.transmitsecurity.com/sdk-ref/platform/modules/drs#reportactionresult). This records the outcome on that login action event. When `userId` is included, Mosaic updates the user ID on that original login action and also sets the same user for subsequent events in the current device session.

By reporting the result with the original `actionToken`, Mosaic links the authenticated user and final outcome to the login action that initiated the flow. This provides action-level visibility in the **Admin Portal** (**Fraud Prevention** > **Recommendations**) and allows Mosaic to evaluate the login with the full action context.

We recommend to pass the `[USER_ID]` as an opaque identifier from your system, not a plain-text personal identifier such as an email address.

await drs.reportActionResult('\[ACTION\_TOKEN\]', 'success', {
  userId: '\[USER\_ID\]'
});

Beyond login

You can also use [`reportActionResult()`](https://developer.transmitsecurity.com/sdk-ref/platform/modules/drs#reportactionresult) for any action previously triggered with `triggerActionEvent()` to report its final outcome. For non-login actions, this updates that specific action record only and does not set the user for the device session.

Fallback option

If your application architecture does not preserve the original `actionToken` through login completion, for example after a redirect, in a different page or component, in a server-side callback, or in an external identity flow, use [`setAuthenticatedUser()`](https://developer.transmitsecurity.com/sdk-ref/platform/modules/drs#setauthenticateduser) as a fallback.

await drs.setAuthenticatedUser('\[USER\_ID\]');

## Step 6: Clear user

The user gets automatically cleared once the session or in case of a new login action. After the user logs out, you should clear the set user so they are not associated with future actions. To clear the user, call the `clearUser()` method:

await drs.clearUser();