Skip to main content
The web front-end SDK is available at https://www.npmjs.com/package/@prelude.so/js-sdk and it provides different features. In this guide we focus on integrating the signals collection to augment the verification process so that it includes extra browser information.

​
Backend integration overview

When you integrate any of the Prelude backend SDKs (available for Node.js, Go, Python or Kotlin/Java) to perform user verification, you will usually follow the Quickstart guide for the platform you are working with. Regardless of the platform the basic steps to follow are:
  1. Install the backend SDK for your platform.
  2. Create a new instance of the SDK with your API key.
  3. Request the user to input their phone number and send it to your backend. Use the phone number to create a verification request with the SDK.
  4. Redirect the user to a check page where the user will input the verification code received.
  5. When the user submits the verification code to your backend, you forward it to Prelude using the SDK to check if it is the correct code. Then you will redirect the user to the appropriate page depending on the result.

​
Frontend web SDK integration

With the web SDK you can augment the verification process to include additional browser information which can be used to combat fraud. The process is quite simple. During step 3 above, your application will use the web SDK to gather browser signals and report them to your Prelude account. Then, when your application submits the phone number to your backend, it will also include a dispatchId value (just a string value) that the web SDK will provide after gathering the browser signals.

​
Installation

The SDK is provided as an npm package and can be installed using the following command: 
npm install @prelude.so/js-sdk
This package contains wasm code In the default entrypoints, the wasm is inlined in the javascript file as a base64 data url. If you want to optimize your bundle size, you can use the slim version of the entrypoints (check previous code block) instead of the inline ones. This require further configuration, please refer to specific comments in the next section. 
import { dispatchSignals } from "@prelude.so/js-sdk/signals";

​
Configuration

@prelude.so/js-sdk contains a web worker and .wasm code. This means if you are developping a bundled web app, you’ll need some setup steps to make it work. This section explains those steps for different bundlers. 
{
  // If you're using a `/slim` entrypoint,
  // then you'll have to copy the `.wasm` core as a static asset in your bundle.
  assetsInclude: ["./node_modules/@prelude.so/**/*.wasm"],
  // Vite dev server config
  optimizeDeps: {
    // @prelude.so/js-sdk uses a web worker. Vite dev server does not handle optimization of web worker files.
    exclude: ["@prelude.so/js-sdk"],
    // As per Vite's docs, a commonJS sub dependency of a dependency should be optimized.
    include: ["@prelude.so/js-sdk > browser-tabs-lock"],
  },
  // Vitest config
  test: {
    // @prelude.so/js-sdk should only be used in browser like environments.
    environment: "jsdom",
    // If you're using a slim @prelude.so/js-sdk entrypoint,
    // in vitest it's better to resolve the inline one to avoid any issue with the `.wasm` asset.
    // This example config is aliasing all 3 entrypoints, but you can keep only the ones you need.
    alias: {
      "@prelude.so/js-sdk/slim": "@prelude.so/js-sdk",
      "@prelude.so/js-sdk/session/slim": "@prelude.so/js-sdk/session",
      "@prelude.so/js-sdk/signals/slim": "@prelude.so/js-sdk/signals",
    },
  },
}

​
How to use

In general, you will simply need to instantiate the web SDK with your SDK key and call the dispatchSignals function in the same page that you already have to capture the phone number. 
import { dispatchSignals } from "@prelude.so/js-sdk/signals";

const dispatchId = await dispatchSignals(<your-prelude-sdk-key>);
Finally, when you create the verification in your backend, besides the phone number you can now also pass this dispatchId value in all the backend SDKs. Refer to the Quickstart guide for your platform of choice to see how to include it.