astra-sdk-web 1.1.26 → 1.1.28

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "astra-sdk-web",
-  "version": "1.1.26",
+  "version": "1.1.28",
   "description": "Official Astra SDK for JavaScript/TypeScript",
   "type": "module",
   "main": "./dist/astra-sdk.cjs.js",

package/src/pages/MobileRoute.tsx

@@ -1,5 +1,6 @@
 import { useEffect, useState } from 'react';
 import { isMobileDevice } from '../utils/deviceDetection';
+import { getKycConfig, clearExpiredConfigs } from '../utils/kycConfigStorage';
 import FaceScanModal from './FaceScanModal';
 import { KycProvider } from '../contexts/KycContext';
 import '../index.css';
@@ -22,27 +23,45 @@ function MobileRoute({ onClose, onNavigate }: MobileRouteProps = {}) {
   } | null>(null);
 
   useEffect(() => {
+    // Clear expired configs on mount
+    clearExpiredConfigs();
+
     if (!isMobileDevice() && onNavigate) {
       onNavigate('qr');
       return;
     }
 
-    // If accessed standalone (via URL), get config from URL params
+    // Get sessionId from URL params
     const searchParams = new URLSearchParams(window.location.search);
     const sessionId = searchParams.get('sessionId');
-    const apiBaseUrl = searchParams.get('apiBaseUrl') || searchParams.get('apiUrl') || '';
-    const serverKey = searchParams.get('serverKey') || '';
 
-    if (sessionId && apiBaseUrl && serverKey) {
-      setConfig({
-        apiBaseUrl,
-        sessionId,
-        serverKey,
-      });
-    } else if (sessionId) {
-      // Try to get from localStorage or use defaults
-      // For now, we'll need these to be passed via URL
-      console.error('Missing required parameters: apiBaseUrl and serverKey must be in URL');
+    if (sessionId) {
+      // Try to get apiBaseUrl and serverKey from localStorage
+      const storedConfig = getKycConfig(sessionId);
+      
+      if (storedConfig) {
+        setConfig({
+          apiBaseUrl: storedConfig.apiBaseUrl,
+          sessionId,
+          serverKey: storedConfig.serverKey,
+        });
+      } else {
+        // Fallback: try to get from URL params (for backward compatibility)
+        const apiBaseUrl = searchParams.get('apiBaseUrl') || searchParams.get('apiUrl') || '';
+        const serverKey = searchParams.get('serverKey') || '';
+        
+        if (apiBaseUrl && serverKey) {
+          setConfig({
+            apiBaseUrl,
+            sessionId,
+            serverKey,
+          });
+        } else {
+          console.error('Missing required parameters: apiBaseUrl and serverKey not found in localStorage or URL');
+        }
+      }
+    } else {
+      console.error('Missing required parameter: sessionId must be in URL');
     }
   }, [onNavigate]);
 
@@ -90,7 +109,7 @@ function MobileRoute({ onClose, onNavigate }: MobileRouteProps = {}) {
       <div className="bg-white p-6 rounded-lg text-center max-w-md mx-4">
         <p className="text-red-600 mb-2">Missing Configuration</p>
         <p className="text-sm text-gray-600">
-          Please ensure the URL includes sessionId, apiBaseUrl, and serverKey parameters.
+          Please ensure the URL includes sessionId parameter. The configuration should be stored automatically when scanning the QR code.
         </p>
       </div>
     </div>

package/src/pages/QRCodePage.tsx

@@ -1,6 +1,7 @@
 import { useState, useEffect } from 'react';
 import { QRCodeSVG } from 'qrcode.react';
 import { KycApiService } from '../services/kycApiService';
+import { storeKycConfig } from '../utils/kycConfigStorage';
 // @ts-ignore - optional dependency, may not be installed in some consumers
 import { toast, ToastContainer } from 'react-toastify';
 // @ts-ignore - import styles only when package is present
@@ -21,25 +22,17 @@ function QRCodePage({ onClose, mobileBaseUrl = 'https://kyc-sdk.astraprotocol.co
   const [copied, setCopied] = useState<boolean>(false);
 
   useEffect(() => {
-    // Get search params from current URL
-    const searchParams = new URLSearchParams(window.location.search);
-    
-    // Add required params to query string for mobile route
-    if (sessionId) {
-      searchParams.set('sessionId', sessionId);
+    // Store config in localStorage for mobile route to retrieve
+    if (sessionId && apiBaseUrl && serverKey) {
+      storeKycConfig(sessionId, apiBaseUrl, serverKey);
     }
-    if (apiBaseUrl) {
-      searchParams.set('apiBaseUrl', apiBaseUrl);
-    }
-    if (serverKey) {
-      searchParams.set('serverKey', serverKey);
+
+    // Only include sessionId in URL, not apiBaseUrl or serverKey
+    if (sessionId) {
+      const mobileRoute = '/mobileroute';
+      const fullUrl = `${mobileBaseUrl}${mobileRoute}?sessionId=${sessionId}`;
+      setQrUrl(fullUrl);
     }
-    
-    const mobileRoute = '/mobileroute';
-    const queryString = searchParams.toString();
-    const fullUrl = `${mobileBaseUrl}${mobileRoute}${queryString ? `?${queryString}` : ''}`;
-    
-    setQrUrl(fullUrl);
   }, [mobileBaseUrl, sessionId, apiBaseUrl, serverKey]);
 
   const handleCopyUrl = async () => {
@@ -104,7 +97,7 @@ function QRCodePage({ onClose, mobileBaseUrl = 'https://kyc-sdk.astraprotocol.co
         backgroundSize: '40px 40px'
       }}></div>
       
-      <div className="relative bg-[rgba(20,20,20,0.95)] backdrop-blur-sm rounded-2xl p-5 sm:p-6 md:p-7 max-w-[450px] w-full h-[80vh] flex flex-col text-center shadow-[0_8px_32px_rgba(0,0,0,0.5)] border border-white/10">
+      <div className="relative bg-[rgba(20,20,20,0.95)] backdrop-blur-sm rounded-2xl p-5 sm:p-6 md:p-7 max-w-[450px] w-full h-[80vh] flex flex-col text-center shadow-[0_8px_32px_rgba(0,0,0,0.5)]">
         {/* <button 
           className="absolute top-5 right-5 bg-transparent border-none text-white cursor-pointer p-2 flex items-center justify-center rounded transition-colors hover:bg-white/10 active:bg-white/20" 
           onClick={handleClose} 
@@ -138,7 +131,7 @@ function QRCodePage({ onClose, mobileBaseUrl = 'https://kyc-sdk.astraprotocol.co
           <div className="w-full text-left mt-auto">
             <p className="m-0 mb-2 text-white text-xs sm:text-sm opacity-80">Or open:</p>
             <div className="flex flex-col sm:flex-row items-start sm:items-center gap-2 p-2 sm:p-3 bg-white/10 rounded-lg border border-white/20">
-              <code className="flex-1 text-white text-xs sm:text-sm break-all text-left m-0 font-mono line-clamp-1">{qrUrl}</code>
+              <code className="flex-1 text-white text-xs sm:text-sm break-all text-left m-0 font-mono line-clamp-1 ">{qrUrl}</code>
               <button 
                 className="bg-transparent border-none text-white cursor-pointer p-1.5 flex items-center justify-center rounded transition-colors flex-shrink-0 hover:bg-white/10 active:bg-white/20 self-end sm:self-auto" 
                 onClick={handleCopyUrl}

package/src/utils/kycConfigStorage.ts

@@ -0,0 +1,125 @@
+/**
+ * Utility functions for storing and retrieving KYC configuration
+ * Uses localStorage to store apiBaseUrl and serverKey associated with sessionId
+ */
+
+interface KycConfig {
+  apiBaseUrl: string;
+  serverKey: string;
+  sessionId: string;
+}
+
+const STORAGE_PREFIX = 'kyc_config_';
+const STORAGE_EXPIRY_MS = 24 * 60 * 60 * 1000; // 24 hours
+
+/**
+ * Store KYC configuration in localStorage
+ */
+export function storeKycConfig(sessionId: string, apiBaseUrl: string, serverKey: string): void {
+  if (!sessionId || !apiBaseUrl || !serverKey) {
+    console.warn('Cannot store KYC config: missing required parameters');
+    return;
+  }
+
+  try {
+    const config: KycConfig = {
+      apiBaseUrl,
+      serverKey,
+      sessionId,
+    };
+    
+    const storageKey = `${STORAGE_PREFIX}${sessionId}`;
+    const data = {
+      config,
+      timestamp: Date.now(),
+    };
+    
+    localStorage.setItem(storageKey, JSON.stringify(data));
+  } catch (error) {
+    console.error('Failed to store KYC config:', error);
+  }
+}
+
+/**
+ * Retrieve KYC configuration from localStorage
+ */
+export function getKycConfig(sessionId: string): { apiBaseUrl: string; serverKey: string } | null {
+  if (!sessionId) {
+    return null;
+  }
+
+  try {
+    const storageKey = `${STORAGE_PREFIX}${sessionId}`;
+    const stored = localStorage.getItem(storageKey);
+    
+    if (!stored) {
+      return null;
+    }
+
+    const data = JSON.parse(stored);
+    
+    // Check if config is expired
+    if (data.timestamp && Date.now() - data.timestamp > STORAGE_EXPIRY_MS) {
+      localStorage.removeItem(storageKey);
+      return null;
+    }
+
+    if (data.config && data.config.apiBaseUrl && data.config.serverKey) {
+      return {
+        apiBaseUrl: data.config.apiBaseUrl,
+        serverKey: data.config.serverKey,
+      };
+    }
+
+    return null;
+  } catch (error) {
+    console.error('Failed to retrieve KYC config:', error);
+    return null;
+  }
+}
+
+/**
+ * Clear KYC configuration from localStorage
+ */
+export function clearKycConfig(sessionId: string): void {
+  if (!sessionId) {
+    return;
+  }
+
+  try {
+    const storageKey = `${STORAGE_PREFIX}${sessionId}`;
+    localStorage.removeItem(storageKey);
+  } catch (error) {
+    console.error('Failed to clear KYC config:', error);
+  }
+}
+
+/**
+ * Clear all expired KYC configurations
+ */
+export function clearExpiredConfigs(): void {
+  try {
+    const keys = Object.keys(localStorage);
+    const now = Date.now();
+
+    keys.forEach((key) => {
+      if (key.startsWith(STORAGE_PREFIX)) {
+        try {
+          const stored = localStorage.getItem(key);
+          if (stored) {
+            const data = JSON.parse(stored);
+            if (data.timestamp && now - data.timestamp > STORAGE_EXPIRY_MS) {
+              localStorage.removeItem(key);
+            }
+          }
+        } catch (error) {
+          // If parsing fails, remove the key
+          localStorage.removeItem(key);
+        }
+      }
+    });
+  } catch (error) {
+    console.error('Failed to clear expired configs:', error);
+  }
+}
+