Nuxt

This guide will walk you through the steps to integrate Rupt into your app or website using Nuxt.

1. Installation

Install Rupt using your favorite package manager.

yarn add rupt

2. Usage

The two main things you need to do are:

1. Attach devices to accounts. Ideally you should do this on every page once.
2. 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

Call the attach function to link the device to the account. This should be done once on every page as soon as you have the account id available. For example, in the app.vue file, you can do this in the setup script block. For more information regarding the app.vue file, please refer to the Nuxt documentation.

import Rupt from "rupt";
const route = useRoute();

watch(route.path, () => {
  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",
    },
  })
});

(To learn more about the best practices for calling the attach function, refer to the advanced section: When and where to call the attach function?)

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