npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@ruptjs/rupt-react-native

v0.1.25

Published

Rupt SDK for React Native

Downloads

153

Readme

@ruptjs/rupt-react-native

Rupt SDK for React Native. Library for monitoring and preventing account sharing in web apps.

Installation

Using a package manager

yarn

yarn add @ruptjs/rupt-react-native

npm

npm install @ruptjs/rupt-react-native

::

Usage

The two main ways to implement Rupt into your project:

  1. Import react-native UI component
import { RuptProvider } from "@ruptjs/rupt-react-native";

Import the RuptProvider component to link the device to the account. You must pass the client_id and a account.

 <RuptProvider
   // required
   clientId={client_id}
   account={account_id}
   // optional
   email={user_email},
   phone={user_phone},
   matadata={},
   callbacks={{
      onSuccess,
      onChallenge,
      onNewAccount,
      onSuspended,
      onLimitExceeded,
      onCurrentDeviceLogout,
   }}
   debug={false}
   />
  1. Custom integration (no UI)
  • 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 { attach, detach } from "@ruptjs/rupt-react-native";

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

const { device_id } = await attach({
  client_id: "client_id",
  account: "account_id",
  email: "user_email", // Optional
  phone: "user_phone", // Optional
  matadata: {}, // Optional
  redirect_urls: {
    logout_url: "https://your-logout-url.com",
    new_account_url: "https://your-create-new-account-url.com",
  },
});

::alert{type="tip"} 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 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