Quick start

Use the Rupt APIs in your React Native app to manage user devices with ease.

React Native runs your JavaScript in a JS engine rather than compiling it to native code, so @ruptjs/react-native is a wrapper around the real iOS and Android SDKs. Signal collection, the evaluate transport, the realtime listener, and the challenge UI all run natively. That means React Native apps get the same device identifiers the native SDKs use (identifierForVendor on iOS, ANDROID_ID on Android), which the web SDK has no way to reach.

Requirements

• React Native 0.71 or newer. Both the old and new architectures work.
• iOS 15.6 or newer. This is the floor of the bundled RuptClient.xcframework, and it is higher than the React Native and Expo defaults, so bare projects need to raise their deployment target.
• Android minSdk 21 or newer.
• Expo Go is not supported, because it cannot load custom native modules. Use a development build or EAS Build.

Installation

npm install @ruptjs/react-native

Bare React Native

Raise the iOS deployment target to 15.6 in two places, then install the pods. The Podfile line covers the pods; it does not touch your app target, so set that one in Xcode (or in project.pbxproj) as well. Miss it and your app links a framework built for a newer OS than itself.

# ios/Podfile
platform :ios, '15.6'

# Xcode: your target > Build Settings > Minimum Deployments > iOS
IPHONEOS_DEPLOYMENT_TARGET = 15.6

cd ios && pod install

Expo

Add the config plugin to app.json, then create a development build. The plugin raises the iOS deployment target for you.

{
  "expo": {
    "plugins": ["@ruptjs/react-native"]
  }
}

npx expo prebuild
npx expo run:ios

Instantiate

Create a Rupt instance with your client ID. Create one per app, usually next to your auth context.

import { Rupt } from "@ruptjs/react-native";

export const rupt = new Rupt({
  clientId: "<your client id>",
});

Show challenges

Nothing to wire up. When an evaluation requires a challenge, the native SDK presents its own webview over your app: a full-screen sheet on iOS, an activity on Android. Your React Native views stay mounted underneath.

Evaluate

evaluate is the single entry point. Use one of the three canonical actions, or any free-string action for a custom event.

const response = await rupt.evaluate.login({
  user: "<user id>",
  email: "<email>",
});

await rupt.evaluate.signup({ email: "<email>" });
await rupt.evaluate.access({ user: "<user id>" });
await rupt.evaluate("checkout_started", { user: "<user id>" });

Call access on protected screens once the user is authenticated. It also opens the realtime listener that fires logout when the server kicks the session, and it surfaces a challenge automatically. login, signup, and custom actions do not auto-challenge by default, so they never cover a flow the user is in the middle of. Pass auto_challenge: true to override, or read response.redirect and handle it yourself.

A failed evaluation resolves to null rather than throwing, so a network problem on Rupt's side never breaks your flow. Turn on debug: true to log the underlying error.

React to challenge events

useEffect(() => {
  const logout = rupt.on("logout", () => auth.signOut());
  const complete = rupt.on("complete", () => refresh());
  return () => {
    logout.remove();
    complete.remove();
  };
}, []);

| Event | Fires when | | ------------------------------ | ------------------------------------------------------------------------------------------------------------------ | | logout | The server kicked the session, or the user chose to log out from the challenge. | | complete | The user completed verification. | | primary_cta, secondary_cta | A CTA button on a CTA-bearing challenge page. The challenge stays open, so call dismissChallenge() to close it. | | back_pressed | The user hit the challenge's back affordance. |

You can also pass a default logout handler to the constructor:

new Rupt({ clientId, on_logout: () => auth.signOut() });

Self-hosted deployments

new Rupt({ clientId, domain: "rupt.example.com" });

Reference

new Rupt({ clientId, domain?, debug?, on_logout? });

rupt.evaluate.access(params);
rupt.evaluate.login(params);
rupt.evaluate.signup(params);
rupt.evaluate(action, params);
rupt.on(event, handler);
rupt.dismissChallenge();
rupt.destroy();

Rupt.version;        // this package
Rupt.nativeVersion;  // the underlying iOS / Android SDK

params accepts user, email, phone, metadata, and auto_challenge. At least one of user, email, or phone is required. Metadata values are coerced to strings, since the native SDKs type metadata as a string map.

A successful evaluation resolves to:

{
  evaluation_id: string | null;
  redirect?: string;
  next_nonce: string;
  expires_at: number;
}