JavaScript
This quick start guide will walk you through the steps to integrate Rupt into your app or website using JavaScript.
1. Installation
Using a package manager
yarn add rupt
Using HTML script tags
You can also include the library via a script
tag in your HTML files like so:
<Script
src="https://unpkg.com/rupt@latest/index"
onLoad={async () => {
const Rupt = window.Rupt;
// Use Rupt here
}}
/>
When using HTML script tags. Be sure to wait for the script to be loaded before Using it. Also Rupt will be injected into the window
so you can use window.Rupt
instead of Rupt.
2. Usage
The two main things you need to do are:
- Attach devices to accounts. Ideally you should do this on every page once.
- Detach devices from accounts. You should do this when the user logs out.
By doing these two things, Rupt associates devices to accounts and detect behaviors that indicate account sharing. For more on this, see How account sharing prevention works?
Attach a device
First import the script (only if you installed using a package manager)
import Rupt from "rupt";
Call the attach
function to link the device to the account. You must pass the client_id
and a account
.
const { device_id } = await Rupt.attach({
client_id: "client_id",
account: "account_id",
email: "user_email", // Optional
phone: "user_phone", // Optional
redirect_urls: {
logout_url: "https://your-logout-url.com",
new_account_url: "https://your-create-new-account-url.com",
},
groups: [{
id: "group_id",
name: "group name", // Optional
}] // Optional, can pass an array or single Group object
});
You should call the attach
function on every page as soon as you have the account id available. For more on this refer to the advanced section: When and where to call the attach function?
The email
and phone
are optional but strongly recommended. If you want to ask users to verify accounts before they kick out other people using their account, you should provide the email
and phone
fields.
Rupt will take care of the rest. If Rupt determines there's misbehavior, it will trigger a challenge. For more on this, see Challenges
Detach a device
By default, devices are automatically detached if they are not used for 1 week. You can change this behavior in the dashboard settings.
But you should also call the detach
function when the user logs out. This will ensure that Rupt has the most up-to-date information about the devices associated with the account. To do this, call the detach
function like so:
await Rupt.detach({
client_id: `client_id`,
account: `account_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 the logout flow so the user will be redirected to the callbacks.logout_url
in the target device. Ensure that you have set the logout_url
in the redirect_urls
object when calling the attach
function. For more, see Signing the user out