@rehers/rehers-roleplay-sdk 2.5.1 → 2.5.3

package/README.md

@@ -6,26 +6,32 @@
 npm install @rehers/rehers-roleplay-sdk
 ```
 
+For a working end-to-end example in this repo, use `sdk-demo/`.
+
 ---
 
 ## 1. Wrap your app with the Provider
 
 Add this once, above all your routes. It initializes the SDK for the logged-in Seamless user.
 
+Production flow:
+
+1. Your backend requests a short-lived `userToken` from `POST /api/seamless/auth/user-token`
+2. Your frontend receives that `userToken`
+3. You pass `publishableKey` + `userToken` into the SDK
+
+The browser should not mint sessions from raw `userId`, `userEmail`, or `userRole` in production.
+
 ```tsx
 import { SeamlessRoleplayProvider } from "@rehers/rehers-roleplay-sdk/react";
 
 function App() {
-  // You already have the logged-in user from your auth/session.
-  // The SDK needs their id and email.
-  const me = useCurrentUser(); // however you get the logged-in user
+  const userToken = useRoleplayUserToken(); // fetched from your backend
 
   return (
     <SeamlessRoleplayProvider
       publishableKey="pk_live_..."
-      userId={String(me.id)}
-      userEmail={me.username}
-      userRole={me.orgRole}
+      userToken={userToken}
       onReady={() => console.log("Roleplay SDK ready")}
       onError={(err) => console.error("Roleplay SDK error", err)}
     >
@@ -39,17 +45,15 @@ function App() {
 }
 ```
 
-If you fetch the user via API:
+If you need a backend shape, the secure flow looks like this:
 
 ```ts
-const res = await fetch("https://api.seamless.ai/api/users/me", {
+const tokenRes = await fetch("/api/roleplay/user-token", {
+  method: "POST",
   credentials: "include",
 }).then((r) => r.json());
 
-const me = res.data ?? res;
-// me.id       → pass as userId (convert to string)
-// me.username → pass as userEmail
-// me.orgRole  → pass as userRole directly
+const userToken = tokenRes.userToken;
 ```
 
 That's the only setup. Everything below just works.
@@ -219,8 +223,7 @@ import "@rehers/rehers-roleplay-sdk";
 // Initialize once
 SeamlessRoleplay.init({
   publishableKey: "pk_live_...",
-  userId: "...",
-  userEmail: "...",
+  userToken: "...",
   onReady() { console.log("ready"); },
 });
 

package/index.d.ts

@@ -1,13 +1,9 @@
-export interface SeamlessRoleplayInitOptions {
+interface SeamlessRoleplayInitBase {
   /** Publishable API key (starts with pk_live_ or pk_test_) */
   publishableKey: string;
-  /** Logged-in Seamless user ID. Pass String(me.id) from GET /api/users/me */
-  userId: string;
-  /** Logged-in Seamless user email. Pass me.username from GET /api/users/me */
-  userEmail: string;
   /** Optional user role for syncing permissions ("owner" | "admin" | "member") */
   userRole?: "owner" | "admin" | "member";
-  /** Optional signed JWT for identity verification */
+  /** Optional short-lived signed JWT for identity verification */
   userToken?: string;
   /** Override the app origin — where the iframe loads from (for dev/testing only) */
   origin?: string;
@@ -17,6 +13,23 @@ export interface SeamlessRoleplayInitOptions {
   onError?: (error: { code: string; message: string }) => void;
 }
 
+export type SeamlessRoleplayInitOptions =
+  | (SeamlessRoleplayInitBase & {
+      /** Preferred production auth path: signed Seamless bootstrap token */
+      userToken: string;
+      /** Optional fallback fields kept for local demos/internal tools */
+      userId?: string;
+      userEmail?: string;
+    })
+  | (SeamlessRoleplayInitBase & {
+      /** Legacy/demo fallback path when no signed token is available */
+      userToken?: string;
+      /** Logged-in Seamless user ID. Pass String(me.id) from GET /api/users/me */
+      userId: string;
+      /** Logged-in Seamless user email. Pass me.username from GET /api/users/me */
+      userEmail: string;
+    });
+
 export interface SeamlessRoleplayOpenData {
   /** Full name of the contact */
   name: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rehers/rehers-roleplay-sdk",
-  "version": "2.5.1",
+  "version": "2.5.3",
   "description": "Seamless Roleplay SDK — embed roleplay call sessions via a modal + iframe",
   "main": "roleplay-sdk.js",
   "types": "index.d.ts",
@@ -32,6 +32,6 @@
   "license": "UNLICENSED",
   "repository": {
     "type": "git",
-    "url": "https://github.com/rehers/seamless-frontend-independent"
+    "url": "git+https://github.com/rehers/seamless-frontend-independent.git"
   }
 }

package/react.d.ts

@@ -1,5 +1,5 @@
 import { type ReactNode } from "react";
-import type { SeamlessRoleplaySDK, AddToScenarioContact, AddToScenarioCompleteData } from "@rehers/rehers-roleplay-sdk";
+import type { SeamlessRoleplaySDK, AddToScenarioContact, AddToScenarioCompleteData, SeamlessRoleplayInitOptions } from "@rehers/rehers-roleplay-sdk";
 import "@rehers/rehers-roleplay-sdk";
 export type { AddToScenarioContact, AddToScenarioCompleteData };
 interface SeamlessRoleplayContextValue {
@@ -10,20 +10,9 @@ interface SeamlessRoleplayContextValue {
     } | null;
     sdk: SeamlessRoleplaySDK;
 }
-export interface SeamlessRoleplayProviderProps {
-    publishableKey: string;
-    userId: string;
-    userEmail: string;
-    userRole?: "owner" | "admin" | "member";
-    userToken?: string;
-    origin?: string;
-    onReady?: () => void;
-    onError?: (error: {
-        code: string;
-        message: string;
-    }) => void;
+export type SeamlessRoleplayProviderProps = SeamlessRoleplayInitOptions & {
     children: ReactNode;
-}
+};
 export declare function SeamlessRoleplayProvider({ publishableKey, userId, userEmail, userRole, userToken, origin, onReady, onError, children, }: SeamlessRoleplayProviderProps): import("react/jsx-runtime").JSX.Element;
 export declare function useSeamlessRoleplay(): SeamlessRoleplayContextValue;
 export interface RoleplayDialogProps {

package/react.js

@@ -36,28 +36,51 @@ export function SeamlessRoleplayProvider({ publishableKey, userId, userEmail, us
         }
         mountedRef.current = true;
         setState({ isReady: false, error: null });
-        sdk.init({
-            publishableKey,
-            userId,
-            userEmail,
-            userRole,
-            userToken,
-            origin,
-            onReady: () => {
-                var _a;
-                if (!mountedRef.current)
-                    return;
-                setState({ isReady: true, error: null });
-                (_a = onReadyRef.current) === null || _a === void 0 ? void 0 : _a.call(onReadyRef);
-            },
-            onError: (err) => {
-                var _a;
-                if (!mountedRef.current)
-                    return;
-                setState({ isReady: false, error: err });
-                (_a = onErrorRef.current) === null || _a === void 0 ? void 0 : _a.call(onErrorRef, err);
-            },
-        });
+        const initOptions = userToken
+            ? {
+                publishableKey,
+                userToken,
+                userId,
+                userEmail,
+                userRole,
+                origin,
+                onReady: () => {
+                    var _a;
+                    if (!mountedRef.current)
+                        return;
+                    setState({ isReady: true, error: null });
+                    (_a = onReadyRef.current) === null || _a === void 0 ? void 0 : _a.call(onReadyRef);
+                },
+                onError: (err) => {
+                    var _a;
+                    if (!mountedRef.current)
+                        return;
+                    setState({ isReady: false, error: err });
+                    (_a = onErrorRef.current) === null || _a === void 0 ? void 0 : _a.call(onErrorRef, err);
+                },
+            }
+            : {
+                publishableKey,
+                userId: userId || "",
+                userEmail: userEmail || "",
+                userRole,
+                origin,
+                onReady: () => {
+                    var _a;
+                    if (!mountedRef.current)
+                        return;
+                    setState({ isReady: true, error: null });
+                    (_a = onReadyRef.current) === null || _a === void 0 ? void 0 : _a.call(onReadyRef);
+                },
+                onError: (err) => {
+                    var _a;
+                    if (!mountedRef.current)
+                        return;
+                    setState({ isReady: false, error: err });
+                    (_a = onErrorRef.current) === null || _a === void 0 ? void 0 : _a.call(onErrorRef, err);
+                },
+            };
+        sdk.init(initOptions);
         return () => {
             mountedRef.current = false;
             providerMountCount--;

package/roleplay-sdk.js

@@ -4,7 +4,7 @@
  * Publishable-key auth model. No build step required.
  *
  * Usage:
- *   SeamlessRoleplay.init({ publishableKey: 'pk_live_...', userId: 'user_789' });
+ *   SeamlessRoleplay.init({ publishableKey: 'pk_live_...', userToken: 'jwt...' });
  *   SeamlessRoleplay.open({ name: '...', domain: '...', company: '...', title: '...' });
  */
 (function () {
@@ -28,6 +28,8 @@
   var sessionExpiresAt = 0; // epoch ms
   var refreshTimer = null;
   var fetchingSession = null; // single-flight Promise
+  var activeSessionXhr = null;
+  var activeInitVersion = 0;
 
   var initCallbacks = { onReady: null, onError: null };
   var initCalled = false;
@@ -71,6 +73,16 @@
     return DEFAULT_API_ORIGIN;
   }
 
+  function buildIframeSrc(path) {
+    var targetPath = path || "/embed/roleplay-call";
+    var url = new URL(targetPath, getOrigin());
+    // Force the embedded app to drop any stale auth before it handles the
+    // SDK session-init message. Without this, hosted app sessions can leak
+    // through when switching users or entering trial mode in the demo.
+    url.searchParams.set("seamlessResetAuth", "1");
+    return url.toString();
+  }
+
   function sendMsg(iframeEl, msg) {
     try {
       if (iframeEl && iframeEl.contentWindow) {
@@ -83,25 +95,54 @@
 
   // ── Session management ────────────────────────────────────────────
 
+  function clearSessionRequest() {
+    if (activeSessionXhr) {
+      try {
+        activeSessionXhr.abort();
+      } catch (_) {}
+      activeSessionXhr = null;
+    }
+    fetchingSession = null;
+  }
+
   function fetchSession() {
-    if (fetchingSession) return fetchingSession;
+    var requestInitVersion = activeInitVersion;
+
+    if (fetchingSession && fetchingSession.initVersion === requestInitVersion) {
+      return fetchingSession.promise;
+    }
 
-    fetchingSession = new Promise(function (resolve, reject) {
+    var requestPromise = new Promise(function (resolve, reject) {
       var url = getApiOrigin() + "/api/sdk/session";
-      var body = { userId: userId };
-      if (userEmail) body.userEmail = userEmail;
-      if (userRole) body.userRole = userRole;
-      if (userToken) body.userToken = userToken;
+      var body = userToken
+        ? { userToken: userToken }
+        : { userId: userId, userEmail: userEmail, userRole: userRole };
 
       var xhr = new XMLHttpRequest();
+      activeSessionXhr = xhr;
       xhr.open("POST", url, true);
       xhr.setRequestHeader("Content-Type", "application/json");
       xhr.setRequestHeader("X-Publishable-Key", publishableKey);
       xhr.withCredentials = false;
       xhr.timeout = SESSION_TIMEOUT_MS;
 
+      function cleanupRequest() {
+        if (activeSessionXhr === xhr) {
+          activeSessionXhr = null;
+        }
+        if (fetchingSession && fetchingSession.promise === requestPromise) {
+          fetchingSession = null;
+        }
+      }
+
       xhr.onload = function () {
-        fetchingSession = null;
+        cleanupRequest();
+
+        if (requestInitVersion !== activeInitVersion) {
+          reject({ code: "ABORTED", message: "Stale session response ignored" });
+          return;
+        }
+
         var data;
         try {
           data = JSON.parse(xhr.responseText);
@@ -134,24 +175,29 @@
       };
 
       xhr.onerror = function () {
-        fetchingSession = null;
+        cleanupRequest();
         reject({ code: "NETWORK_ERROR", message: "Network error contacting session endpoint" });
       };
 
       xhr.ontimeout = function () {
-        fetchingSession = null;
+        cleanupRequest();
         reject({ code: "TIMEOUT", message: "Session request timed out after " + SESSION_TIMEOUT_MS + "ms" });
       };
 
       xhr.onabort = function () {
-        fetchingSession = null;
+        cleanupRequest();
         reject({ code: "ABORTED", message: "Session request was aborted" });
       };
 
       xhr.send(JSON.stringify(body));
     });
 
-    return fetchingSession;
+    fetchingSession = {
+      initVersion: requestInitVersion,
+      promise: requestPromise,
+    };
+
+    return requestPromise;
   }
 
   function getSessionToken() {
@@ -381,7 +427,7 @@
 
   function createIframe(path) {
     var iframeEl = document.createElement("iframe");
-    iframeEl.src = getOrigin() + (path || "/embed/roleplay-call");
+    iframeEl.src = buildIframeSrc(path);
     iframeEl.allow = "camera; microphone; display-capture; autoplay";
     iframeEl.style.width = "100%";
     iframeEl.style.height = "100%";
@@ -398,8 +444,19 @@
      */
     init: function (opts) {
       try {
-        if (!opts || !opts.publishableKey || !opts.userId || !opts.userEmail) {
-          logError("init", "requires { publishableKey, userId, userEmail }");
+        var initVersion = activeInitVersion + 1;
+        var hasUserToken = !!(opts && opts.userToken && String(opts.userToken).trim());
+        var hasLegacyIdentity = !!(opts && opts.userId && opts.userEmail);
+
+        if (!opts || !opts.publishableKey || (!hasUserToken && !hasLegacyIdentity)) {
+          var error = {
+            code: "INVALID_INIT",
+            message: "requires { publishableKey, userToken } or legacy { publishableKey, userId, userEmail }",
+          };
+          logError("init", error.message);
+          if (opts && typeof opts.onError === "function") {
+            try { opts.onError(error); } catch (_) {}
+          }
           return;
         }
 
@@ -408,12 +465,14 @@
           clearTimeout(refreshTimer);
           refreshTimer = null;
         }
-        fetchingSession = null;
+        activeInitVersion = initVersion;
+        clearSessionRequest();
         sessionToken = null;
         sessionExpiresAt = 0;
+        paymentLink = null;
 
         publishableKey = opts.publishableKey;
-        userId = opts.userId;
+        userId = opts.userId || null;
         userEmail = opts.userEmail || null;
         userRole = opts.userRole || null;
         userToken = opts.userToken || null;
@@ -425,6 +484,7 @@
         // Fetch session immediately
         fetchSession()
           .then(function (result) {
+            if (initVersion !== activeInitVersion) return;
             if (result.trialMode && !paymentLink) {
               // User not found and no payment link from server — still call onReady
               // The open() will show an error state in the iframe
@@ -432,6 +492,8 @@
             if (initCallbacks.onReady) initCallbacks.onReady();
           })
           .catch(function (err) {
+            if (initVersion !== activeInitVersion) return;
+            if (err && err.code === "ABORTED") return;
             if (initCallbacks.onError) {
               initCallbacks.onError({ code: err.code || "INIT_ERROR", message: err.message || "Initialization failed" });
             }
@@ -650,7 +712,7 @@
         cs.boxShadow = "0 25px 60px rgba(0,0,0,0.3)";
 
         var iframeEl = document.createElement("iframe");
-        iframeEl.src = getOrigin() + "/embed/add-to-scenario";
+        iframeEl.src = buildIframeSrc("/embed/add-to-scenario");
         iframeEl.style.width = "100%";
         iframeEl.style.height = "100%";
         iframeEl.style.border = "none";
@@ -733,10 +795,12 @@
      */
     destroy: function () {
       try {
+        activeInitVersion++;
         if (refreshTimer) {
           clearTimeout(refreshTimer);
           refreshTimer = null;
         }
+        clearSessionRequest();
         teardownDialog();
         teardownMount();
         publishableKey = null;
@@ -747,7 +811,6 @@
         paymentLink = null;
         sessionToken = null;
         sessionExpiresAt = 0;
-        fetchingSession = null;
         initCallbacks = { onReady: null, onError: null };
         initCalled = false;
       } catch (e) {