Javascript SDK

📘

This is v2 version of @suprsend/web-sdk

We have changed the web SDK authentication from workspace key-secret to public key and JWT based authentication. This is done to improve security in frontend applications.

• Refer the v1 SDK documentation
• For migrating to v2, follow this guide

This is the client javascript SDK used to integrate SuprSend features like Webpush, Preferences in javascript websites like React, Next.js, Angular, Vue.js etc.

NPM link: https://www.npmjs.com/package/@suprsend/web-sdk

Github link: https://github.com/suprsend/suprsend-web-sdk

Installation

npm install @suprsend/web-sdk@latest

yarn add @suprsend/web-sdk@beta

Integration

1. Create Client

Create suprSendClient instance and use same instance to access all the methods of SuprSend library.

import SuprSend from '@suprsend/web-sdk';

export const suprSendClient = new SuprSend(publicApiKey: string);

2. Authenticate user

Authenticate user so that all the actions performed after authenticating will be w.r.t that user. This is mandatory step and need to be called before using any other method. This is usually performed after successful login and on reload of page to re-authenticate user.

const authResponse = await suprSendClient.identify(
  distinctId: any,
  userToken?: string, // only needed in production environments for security
  { refreshUserToken: (oldUserToken: string, tokenPayload: Dictionary) => Promise<string> }
);

Returns: Promise<ApiResponse>

2.1 Check if user is authenticated

This method will check if user is authenticated i.e., distinctId is attached to SuprSend instance. To check for userToken also pass checkUserToken flag true.

suprSendClient.isIdentified(checkUserToken?: boolean): boolean

3. Reset user

This will remove user data from SuprSend instance. This is usually called on logout action.

await suprSendClient.reset();

Returns: Promise<ApiResponse>

Response Structure

Almost all the methods in this SDK return response type Promise<ApiResponse>

interface ApiResponse {
  status: 'success' | 'error';
  statusCode?: number;
  error?: { type?: string; message?: string };
  body?: any;
}

// success response
{
  status: "success",
  body?: any,
  statusCode?: number
}

// error response
{
  status: "error",
  error: {
    type: string,
    message: string
  }
}