@truly-you/trulyyou-web-sdk 0.1.16 → 0.1.18

package/dist/sdk/TrulyYouSDK.d.ts

@@ -17,8 +17,14 @@ export declare class TrulyYouSDK {
     private getKeyIdByAuthFlowId;
     /**
      * Fetch app branding from SDK backend
+     * Returns true if authFlowId was successfully loaded
      */
     private fetchBranding;
+    /**
+     * Ensure authFlowId is loaded before proceeding with signing operations
+     * Throws error if authFlowId cannot be loaded
+     */
+    private ensureAuthFlowIdLoaded;
     /**
      * Generate QR code with app icon overlaid in center
      */
@@ -45,6 +51,7 @@ export declare class TrulyYouSDK {
     /**
      * Probe iframe to check if key exists in iframe's localStorage
      * Also checks backend to verify key exists and is active
+     * REQUIRES authFlowId to be loaded first
      */
     private probeIframeForKey;
     /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@truly-you/trulyyou-web-sdk",
-  "version": "0.1.16",
+  "version": "0.1.18",
   "description": "TrulyYou Web SDK for secure authentication and payload signing",
   "type": "module",
   "main": "dist/index.esm.js",

package/src/sdk/TrulyYouSDK.ts

@@ -63,9 +63,13 @@ export class TrulyYouSDK {
 
   /**
    * Fetch app branding from SDK backend
+   * Returns true if authFlowId was successfully loaded
    */
-  private async fetchBranding(): Promise<void> {
-    if (!this.authAppId) return
+  private async fetchBranding(): Promise<boolean> {
+    if (!this.authAppId) {
+      console.warn('[SDK]: Cannot fetch branding - authAppId not configured')
+      return false
+    }
     
     try {
       // Call SDK backend API directly
@@ -88,13 +92,37 @@ export class TrulyYouSDK {
             authFlowId: app.authFlowId
           }
           console.log('[SDK]: Branding and authFlowId fetched and cached:', this.brandingCache)
+          return !!app.authFlowId
         }
       }
+      console.warn('[SDK]: Failed to fetch branding - response not ok or missing app data')
+      return false
     } catch (error) {
       console.warn('[SDK]: Error fetching branding:', error)
+      return false
     }
   }
 
+  /**
+   * Ensure authFlowId is loaded before proceeding with signing operations
+   * Throws error if authFlowId cannot be loaded
+   */
+  private async ensureAuthFlowIdLoaded(): Promise<void> {
+    if (this.brandingCache?.authFlowId) {
+      console.log('[SDK]: authFlowId already loaded:', this.brandingCache.authFlowId)
+      return
+    }
+    
+    console.log('[SDK]: authFlowId not yet loaded, fetching branding...')
+    const success = await this.fetchBranding()
+    
+    if (!success || !this.brandingCache?.authFlowId) {
+      throw new Error('authFlowId is required for signing but not available. Please check that your app configuration includes an authFlowId.')
+    }
+    
+    console.log('[SDK]: authFlowId loaded successfully:', this.brandingCache.authFlowId)
+  }
+
   /**
    * Generate QR code with app icon overlaid in center
    */
@@ -279,8 +307,17 @@ export class TrulyYouSDK {
   /**
    * Probe iframe to check if key exists in iframe's localStorage
    * Also checks backend to verify key exists and is active
+   * REQUIRES authFlowId to be loaded first
    */
   private async probeIframeForKey(): Promise<string | null> {
+    // Ensure authFlowId is loaded before probing
+    await this.ensureAuthFlowIdLoaded()
+    
+    if (!this.brandingCache?.authFlowId) {
+      console.error('[SDK-PROBE]: authFlowId is required but not available after fetch')
+      return null
+    }
+    
     return new Promise((resolve) => {
       try {
         const origin = window.location.origin
@@ -292,103 +329,58 @@ export class TrulyYouSDK {
         probeUrl.searchParams.set('probe', 'true')
         probeUrl.searchParams.set('origin', origin)
         
-        // Add authFlowId if available from branding cache
-        if (this.brandingCache?.authFlowId) {
-          probeUrl.searchParams.set('authFlowId', this.brandingCache.authFlowId)
-          console.log('[SDK-PROBE]: Adding authFlowId to probe:', this.brandingCache.authFlowId)
-        } else {
-          console.log('[SDK-PROBE]: No authFlowId available in cache, will check for any key')
-        }
+        // Add authFlowId (guaranteed to exist now after ensureAuthFlowIdLoaded)
+        const authFlowId = this.brandingCache!.authFlowId!
+        probeUrl.searchParams.set('authFlowId', authFlowId)
+        console.log('[SDK-PROBE]: Adding authFlowId to probe:', authFlowId)
         
         iframe.src = probeUrl.toString()
-        
-        console.log('[SDK-PROBE]: Creating probe iframe with URL:', probeUrl.toString())
-        console.log('[SDK-PROBE]: Current origin:', origin)
-        console.log('[SDK-PROBE]: Frontend URL:', this.frontendUrl)
 
         let timeout: NodeJS.Timeout | undefined
-        let globalTimeout: NodeJS.Timeout | undefined
         let backendCheckPromise: Promise<boolean> | null = null
-        let globalListener: ((e: MessageEvent) => void) | undefined
 
         const cleanup = () => {
           window.removeEventListener('message', handleMessage)
-          if (globalListener) {
-            window.removeEventListener('message', globalListener)
-          }
           if (iframe.parentNode) {
             iframe.parentNode.removeChild(iframe)
           }
           if (timeout) {
             clearTimeout(timeout)
           }
-          if (globalTimeout) {
-            clearTimeout(globalTimeout)
-          }
         }
 
         const handleMessage = async (event: MessageEvent) => {
           const data = event.data as any
           
-          // Log ALL messages during probe to debug
-          console.log('[SDK-PROBE-DEBUG]: Message received - type:', data?.type, 'origin:', event.origin, 'data:', data)
-          
           // Only process probe-related messages
           if (data?.type === 'KEY_CHECK_RESULT' || data?.type === 'KEY_CHECK_FAILED') {
-            console.log('[SDK-PROBE]: Processing probe message:', event.data, 'from origin:', event.origin)
-            
             try {
               const frontendOrigin = new URL(this.frontendUrl).origin
-              console.log('[SDK-PROBE]: Checking origin - expected:', frontendOrigin, 'received:', event.origin)
               if (event.origin !== frontendOrigin) {
-                console.log('[SDK-PROBE]: Origin mismatch, ignoring message')
                 return
               }
-              
             } catch (e) {
-              console.log('[SDK-PROBE]: Origin check failed, using hostname fallback')
               if (!event.origin.includes(window.location.hostname)) {
-                console.log('[SDK-PROBE]: Hostname not in origin, ignoring message')
                 return
               }
             }
-
-            console.log('[SDK-PROBE]: Message passed origin check, type:', data?.type)
             
             if (data?.type === 'KEY_CHECK_RESULT') {
-              console.log('[SDK-PROBE]: KEY_CHECK_RESULT received - hasKey:', data.hasKey, 'keyId:', data.keyId)
               cleanup()
               if (data.hasKey && data.keyId) {
-                // Key found in localStorage - it will be validated when used in /api/signatures/create
                 resolve(data.keyId)
               } else {
                 resolve(null)
               }
             } else if (data?.type === 'KEY_CHECK_FAILED') {
-              console.log('[SDK-PROBE]: KEY_CHECK_FAILED received')
               cleanup()
               resolve(null)
             }
           }
         }
 
-        console.log('[SDK-PROBE]: Registering message listener on window')
         window.addEventListener('message', handleMessage)
-        console.log('[SDK-PROBE]: Message listener registered, appending iframe')
         document.body.appendChild(iframe)
-        console.log('[SDK-PROBE]: Iframe appended to body, waiting for response...')
-        
-        // Also add a temporary global listener to see if ANY messages arrive
-        globalListener = (e: MessageEvent) => {
-          console.log('[SDK-PROBE-GLOBAL]: Any message received:', e.data, 'from:', e.origin)
-        }
-        window.addEventListener('message', globalListener)
-        globalTimeout = setTimeout(() => {
-          if (globalListener) {
-            window.removeEventListener('message', globalListener)
-            console.log('[SDK-PROBE-GLOBAL]: Removed temporary global listener')
-          }
-        }, 5000)
 
         // Timeout to allow for React hydration on sign page
         timeout = setTimeout(() => {
@@ -1705,7 +1697,7 @@ export class TrulyYouSDK {
       }
       
       // Step 2: Mobile device - use existing keyId if provided, otherwise probe
-      let keyId = existingKeyId
+      let keyId: string | null | undefined = existingKeyId
       
       if (!keyId) {
         console.log('[SDK]: Mobile device detected, probing iframe for existing key...')
@@ -1743,6 +1735,9 @@ export class TrulyYouSDK {
     url: string,
     options: FetchOptions = {}
   ): Promise<FetchResult> {
+    // Ensure authFlowId is loaded before any signing operations
+    await this.ensureAuthFlowIdLoaded()
+    
     // Declare signatureId at function scope so it's accessible in catch block
     let signatureId: string | undefined = undefined
     try {