Quick Start

This Quick Start guide will walk you through the steps to integrate Sabil into your app or website using JavaScript. By the end of this guide, you will have a fully working account-sharing mechanism integrated into your website.

Installation

Using a package manager

yarn add sabil-js

Note the common js version can be found in sabil-js/index.cjs. Depending on your project environment, you might need to transpile the library.

Using HTML script tags

You can also include the library via a script tag in your HTML files like so:

<script type="module" src="https://unpkg.com/sabil-js@latest/index.js" defer />

Usage

Attach a device

First import the script (only if you installed using a package manager)

import Sabil from "sabil-js";

Call the attach function to link the device to the user. You must pass the client_id and a user.

const { device_id } = await Sabil.attach({  client_id: `client_id`,  user: `user_id`,  limit_config: {    overall_limit: 2, // How many total devices the user is allowed to use  },  appearance_config: {    font_family: `Inter, -apple-system, BlinkMacSystemFont`,  },  on_current_device_logout: () => {    //TODO: [important] Perform log out logic  },});

Ideally, you should call the attach function on every page as soon as you have the user id available. Alternatively, you can call it only when the user id becomes available and/or on key entry pages like the dashboard, login, ...etc. For more on this refer to the advanced section: When and where to call the attach function?

Detach a device

By default, the devices are automatically detached if they are not used for 1 week. You can change this behavior in the dashboard settings. But it might be useful to manually detach the devices sometimes. For example, if the user logs out, it's good to detach the device. If you need to manually detach the device, do the following:

await Sabil.detach({  client_id: `client_id`,  user: `user_id`,  device: `device_id`,});

The device field takes the device ID that is returned in the attach function response as device_id. Finally, when a detach function is called, it triggers on_current_device_logout callback in the target device. Ensure that you handle this callback and sign the user out when it's called. For more, see Signing the user out