RID-8543: Expose getSessionToken() method (#21)

* RID-8543: expose getSessionToken

* RID-8543: Update package version, update readme, write about the changes in changelog

* RID-8543: Update upload-artifiact to v4, cause v3 is deprecated

* RID-8543: Update vite to fix vulnerable package

* RID-8543: Bump vite even higher, to fix all vulnerabilities

* RID-8543: Bump node version in pipeline

* RID-8543: Remove redundant spacebars

* RID-8543: Switch invocation of getSessionToken to use ref

Author: TaRaNTuLaH

.github/workflows/ci.yml

@@ -1,14 +1,14 @@
 name: CI
 
 env:
-  NODE_VERSION: 18.0.0
+  NODE_VERSION: 22.14
   RUNID_VERSION_SUFFIX: ${{ github.run_id }}.${{ github.run_attempt }}
 
 on:
   workflow_dispatch:
   pull_request:
   push:
-    branches: [ main ]
+    branches: [main]
 
 jobs:
   build:
@@ -60,16 +60,16 @@ jobs:
           yarn pack --filename ../transmitsecurity-riskid-reactjs-ts-v$PACKAGE_VERSION.tgz
           cd ..
       - name: Archive NPM package
-        uses: actions/upload-artifact@v3
+        uses: actions/upload-artifact@v4
         with:
           if-no-files-found: error
           retention-days: 30
           name: react-ts-riskid-npm-package
           path: package/transmitsecurity-riskid-reactjs-ts-v*.tgz
       - name: Archive failure data
         if: ${{ failure() }}
-        uses: actions/upload-artifact@v3
+        uses: actions/upload-artifact@v4
         with:
           name: failure-data
           path: |
-            /home/runner/.npm/_logs
+            /home/runner/.npm/_logs

.github/workflows/release.yml

@@ -1,7 +1,7 @@
 name: Release Artifact
 
 env:
-  NODE_VERSION: 18.0.0
+  NODE_VERSION: 22.14
   RUNID_VERSION_SUFFIX: ${{ github.run_id }}.${{ github.run_attempt }}
 
 on:
@@ -50,7 +50,7 @@ jobs:
 
       - name: Archive failure data
         if: ${{ failure() }}
-        uses: actions/upload-artifact@v3
+        uses: actions/upload-artifact@v4
         with:
           name: failure-data
           path: |
@@ -67,15 +67,15 @@ jobs:
         uses: actions/setup-node@v3
         with:
           node-version: ${{ env.NODE_VERSION }}
-          registry-url: 'https://npm.pkg.github.com'
+          registry-url: "https://npm.pkg.github.com"
           always-auth: true
 
       - name: Fetch cached workspace
         uses: actions/cache@v3
         with:
           path: ${{ github.workspace }}
           key: ${{ runner.os }}-${{ env.RUNID_VERSION_SUFFIX }}
-        
+
       - name: Enable Corepack
         run: corepack enable
 
@@ -90,7 +90,7 @@ jobs:
 
       - name: Archive failure data
         if: ${{ failure() }}
-        uses: actions/upload-artifact@v3
+        uses: actions/upload-artifact@v4
         with:
           name: failure-data
           path: |
@@ -107,15 +107,15 @@ jobs:
         uses: actions/setup-node@v3
         with:
           node-version: ${{ env.NODE_VERSION }}
-          registry-url: 'https://registry.npmjs.org'
+          registry-url: "https://registry.npmjs.org"
           always-auth: true
 
       - name: Fetch cached workspace
         uses: actions/cache@v3
         with:
           path: ${{ github.workspace }}
           key: ${{ runner.os }}-${{ env.RUNID_VERSION_SUFFIX }}
-        
+
       - name: Enable Corepack
         run: corepack enable
 
@@ -130,8 +130,8 @@ jobs:
 
       - name: Archive failure data
         if: ${{ failure() }}
-        uses: actions/upload-artifact@v3
+        uses: actions/upload-artifact@v4
         with:
           name: failure-data
           path: |
-            /home/runner/.npm/_logs
+            /home/runner/.npm/_logs

demo/src/App.tsx

@@ -7,6 +7,7 @@ function App() {
   const accountProtectionOptions: DRSConfigOptions = {
     userId: 'demo-user-id',
     initSuccessLog: 'Detection and Response SDK successfully initialized',
+    enableSessionToken: true,
   };
 
   return (

demo/src/InnerComponent.tsx

@@ -1,7 +1,7 @@
 import { useTSAccountProtection } from '@transmitsecurity/riskid-reactjs-ts';
 
 function InnerComponent() {
-  const { triggerActionEvent, setAuthenticatedUser, clearUser } = useTSAccountProtection();
+  const { triggerActionEvent, setAuthenticatedUser, clearUser, getSessionToken } = useTSAccountProtection();
 
   return (
     <>
@@ -21,6 +21,10 @@ function InnerComponent() {
         style={{width: '100px', height: '100px' }}
         onClick={() => clearUser()}
       >Reset</button>
+      <button
+        style={{width: '100px', height: '100px' }}
+        onClick={getSessionToken}
+      >Get Session Token</button>
     </>
   );
 };

package/CHANGELOG.md

@@ -1,5 +1,9 @@
 # Changelog
 
+
+## Version 1.2.0
+1. Expose `getSessionToken()` method from the SDK.
+
 ## Version 1.1.1
 1. Update react quickstart documentation link in package README
 

package/README.md

@@ -37,19 +37,21 @@ import { TSAccountProtectionProvider } from '@transmitsecurity/riskid-reactjs-ts
 
 ## Step 4: Use the React library
 
-The example below demonstrates triggering a login event from a login button, setting and clearing a user.
+The example below demonstrates triggering a login event from a login button, setting and clearing a user and obtaining a session token.
 
 - `triggerActionEvent()` receives an action type and returns a response that includes the `actionToken`. To obtain risk recommendations for sensitive actions, your application should report these actions. To do this, add the code below to relevant user interactions (such as the Login button `click` event handler). The library allows reporting on events with the following action types: `login`, `register`, `transaction`, `password_reset`, `logout`, `checkout`, `account_details_change`, `account_auth_change`, `withdraw` or `credits_change`.
 
 - `setAuthenticatedUser()` sets the user context for all subsequent events in the browser session (or until the user is explicitly cleared). It should be set only after you've fully authenticated the user (including, for example, any 2FA that was required). Receives an opaque identifier of the user in your system ([USER_ID] in the snippet), which shouldn't contain any personal info.
 
 - `clearUser()` clears the user context for all subsequent events in the browser session.
+  
+- `getSessionToken()` retrieves the current device session token as a string, that can be used to trigger action events via backend API.
 
 ```js
 import { useTSAccountProtection } from '@transmitsecurity/riskid-reactjs-ts';
 
 function InnerComponent() {
-  const { triggerActionEvent, setAuthenticatedUser, clearUser } = useTSAccountProtection();
+  const { triggerActionEvent, setAuthenticatedUser, clearUser, getSessionToken } = useTSAccountProtection();
 
   return (
     <>
@@ -69,6 +71,10 @@ function InnerComponent() {
       style={{width: '100px', height: '100px' }}
       onClick={() => clearUser()}
     >Reset</button>
+    <button
+        style={{width: '100px', height: '100px' }}
+        onClick={getSessionToken}
+      >Get Session Token</button>
       </>
   );
 };

package/TSAccountProtectionProvider.tsx

@@ -16,6 +16,7 @@ const SDK_LOAD_ERR = 'SDK load error';
 const SDK_TRIGGER_ACTION_ERR = 'Error sending action event';
 const SDK_AUTHENTICATE_USER_ERR = 'Error authenticating user';
 const SDK_CLEAR_USER_ERR = 'Error clearing user';
+const SDK_GET_SESSION_TOKEN_ERR = 'Error getting session token';
 
 type ProviderState = DRSConfigOptions & {
   initialized: Promise<boolean>;
@@ -68,6 +69,12 @@ type ErrHandler = (err: any) => void;
    * A string to log when the sdk initialization completes. If not provided - logging will be skipped.
    */
   initSuccessLog?: string;
+
+  /**
+   * Setting that determines if session token is enabled
+   * Default: false
+   */
+  enableSessionToken?: boolean;
 }
 
 interface QuerablePromise extends Promise<any> {
@@ -148,6 +155,7 @@ const buildProviderState = (clientId: string, options?: DRSConfigOptions): Provi
   return {
     initialized: new Promise((res) => undefined), // making default promise in pending state
     clientId,
+    enableSessionToken: options?.enableSessionToken ?? false,
     serverUrl: options?.serverUrl ?? (options?.serverPath || 'https://api.transmitsecurity.io/risk-collect/'),
     sdkVersion,
     sdkLoadUrl: options?.sdkLoadUrl ?? generateSdkUrl(sdkVersion),
@@ -213,8 +221,8 @@ export function TSAccountProtectionProvider({
       const initializedPromise = makeQuerablePromise(providerState.initialized);
       if (initializedPromise.status != PromiseStatus.Fulfilled && !window.myTSAccountProtection) {
         try {
-          const serverPath = providerState.serverUrl;
-          window.myTSAccountProtection = new TSAccountProtection(providerState.clientId, { serverPath });
+          const { serverUrl: serverPath, enableSessionToken } = providerState;
+          window.myTSAccountProtection = new TSAccountProtection(providerState.clientId, { serverPath, enableSessionToken});
           try {
             await window.myTSAccountProtection.init(providerState?.userId);
             if (providerState.initSuccessLog) {
@@ -286,6 +294,19 @@ function getClearUserFunc(providerState: ProviderState, providerDispatch: Functi
   }
 }
 
+function getSessionTokenFunc(providerState: ProviderState) {
+  return async function getSessionToken(): Promise<string | null> {
+    if (await providerState.initialized) {
+      try {
+        return await window.myTSAccountProtection?.getSessionToken();
+      } catch (err) {
+        (providerState.onError as ErrHandler)(buildSdkError(err, SDK_GET_SESSION_TOKEN_ERR));
+      }
+    }
+    return null;
+  }
+}
+
 const useAccountProtectionContext = () => {
   const context = useContext(AccountProtectionContext);
   if (context === undefined) {
@@ -302,5 +323,6 @@ export const useTSAccountProtection = () => {
     triggerActionEvent: getTriggerActionEventFunc(state),
     setAuthenticatedUser: getAuthenticatedUserFunc(state, dispatch),
     clearUser: getClearUserFunc(state, dispatch),
+    getSessionToken: getSessionTokenFunc(state),
   };
 };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@transmitsecurity/riskid-reactjs-ts",
-    "version": "1.1.1",
+    "version": "1.2.0",
     "license": "SEE LICENSE IN LICENSE",
     "module": "./dist/index.es.js",
     "main": "./dist/index.cjs.js",
@@ -52,7 +52,7 @@
         "react": "17.0.2",
         "react-error-overlay": "6.0.9",
         "typescript": "4.9.4",
-        "vite": "2.9.18",
+        "vite": "6.3.4",
         "vite-plugin-dts": "1.7.1",
         "vite-plugin-environment": "1.1.0",
         "vite-plugin-rewrite-all": "0.1.2",