humanbehavior-js 0.2.3 → 0.2.4

package/dist/types/index.d.ts

@@ -194,6 +194,10 @@ declare class HumanBehaviorTracker {
         userId?: string;
         userProperties: Record<string, any>;
     }): Promise<string>;
+    /**
+     * Get current user attributes
+     */
+    getUserAttributes(): Record<string, any>;
     start(): Promise<void>;
     stop(): Promise<void>;
     addEvent(event: any): Promise<void>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "humanbehavior-js",
-  "version": "0.2.3",
+  "version": "0.2.4",
   "description": "SDK for HumanBehavior session and event recording",
   "type": "module",
   "main": "./dist/cjs/index.js",

package/simple-spa.html

@@ -228,6 +228,57 @@
                     <button class="button secondary" onclick="trackCustomEvent('demo_button_2', {button: 'demo2'})">Demo Button 2</button>
                     <button class="button success" onclick="trackCustomEvent('demo_button_3', {button: 'demo3'})">Demo Button 3</button>
                     
+                    <h3>User Authentication Test</h3>
+                    <button class="button" onclick="testUserAuthentication()">
+                        Test User Authentication
+                    </button>
+                    <p style="font-size: 12px; color: #666; margin-top: 5px;">
+                        Tests the new behavior where endUserId stays the same but posthogName gets updated with email
+                    </p>
+                    
+                    <h3>Real User Authentication</h3>
+                    <form onsubmit="handleAuthSubmit(event)" style="background: rgba(255,255,255,0.1); padding: 20px; border-radius: 10px; margin: 15px 0;">
+                        <div style="margin-bottom: 15px;">
+                            <label for="authEmail" style="display: block; margin-bottom: 5px; font-weight: 600;">Email:</label>
+                            <input type="email" id="authEmail" placeholder="your.email@example.com" required 
+                                   style="width: 100%; padding: 10px; border-radius: 5px; border: none; background: rgba(255,255,255,0.9);">
+                        </div>
+                        
+                        <div style="margin-bottom: 15px;">
+                            <label for="authName" style="display: block; margin-bottom: 5px; font-weight: 600;">Name:</label>
+                            <input type="text" id="authName" placeholder="Your Name" required 
+                                   style="width: 100%; padding: 10px; border-radius: 5px; border: none; background: rgba(255,255,255,0.9);">
+                        </div>
+                        
+                        <div style="margin-bottom: 15px;">
+                            <label for="authPlan" style="display: block; margin-bottom: 5px; font-weight: 600;">Plan:</label>
+                            <select id="authPlan" style="width: 100%; padding: 10px; border-radius: 5px; border: none; background: rgba(255,255,255,0.9);">
+                                <option value="free">Free</option>
+                                <option value="basic">Basic</option>
+                                <option value="premium">Premium</option>
+                                <option value="enterprise">Enterprise</option>
+                            </select>
+                        </div>
+                        
+                        <div style="margin-bottom: 15px;">
+                            <label for="authCompany" style="display: block; margin-bottom: 5px; font-weight: 600;">Company (Optional):</label>
+                            <input type="text" id="authCompany" placeholder="Your Company" 
+                                   style="width: 100%; padding: 10px; border-radius: 5px; border: none; background: rgba(255,255,255,0.9);">
+                        </div>
+                        
+                        <button type="submit" class="button success" style="width: 100%;">
+                            🔐 Authenticate User
+                        </button>
+                    </form>
+                    
+                    <div style="margin-top: 15px; display: flex; gap: 10px;">
+                        <button class="button secondary" onclick="showAuthStatus()" style="flex: 1;">
+                            📊 Show Auth Status
+                        </button>
+                    </div>
+                    
+                    <div id="authResult" style="margin-top: 15px; padding: 10px; border-radius: 5px; display: none;"></div>
+                    
                     <div class="logs" id="demoLogs">
                         <div>Demo events will appear here...</div>
                     </div>
@@ -498,7 +549,45 @@
                     addLog('customEvent method not available');
                 }
             } catch (error) {
-                addLog(`Error tracking event: ${error.message}`);
+                console.error('Error tracking custom event:', error);
+                addLog('Error tracking custom event: ' + error.message);
+            }
+        }
+
+        // Test user authentication (new behavior)
+        async function testUserAuthentication() {
+            if (!tracker) {
+                addLog('Tracker not available');
+                return;
+            }
+            
+            try {
+                const originalEndUserId = tracker.getSessionId();
+                addLog(`Original endUserId: ${originalEndUserId}`);
+                
+                // Simulate user sign-in
+                const userId = await tracker.addUserInfo({
+                    userId: 'user123@example.com',
+                    userProperties: {
+                        email: 'user123@example.com',
+                        name: 'John Doe',
+                        plan: 'premium',
+                        signupDate: new Date().toISOString()
+                    }
+                });
+                
+                const newEndUserId = tracker.getSessionId();
+                addLog(`New endUserId: ${newEndUserId}`);
+                addLog(`endUserId changed: ${originalEndUserId !== newEndUserId ? 'YES (BAD)' : 'NO (GOOD)'}`);
+                addLog(`User authenticated: ${userId}`);
+                
+                // The endUserId should stay the same, but posthogName will be updated with email
+                addLog('✅ endUserId maintained for session continuity');
+                addLog('✅ posthogName will be updated with email for UI display');
+                
+            } catch (error) {
+                console.error('Error testing user authentication:', error);
+                addLog('Error testing user authentication: ' + error.message);
             }
         }
         
@@ -524,6 +613,60 @@
             
             input.value = '';
         }
+
+        // Handle authentication form submission
+        async function handleAuthSubmit(event) {
+            event.preventDefault();
+            const email = document.getElementById('authEmail').value;
+            const name = document.getElementById('authName').value;
+            const plan = document.getElementById('authPlan').value;
+            const company = document.getElementById('authCompany').value;
+
+            if (!email || !name) {
+                alert('Email and Name are required for authentication.');
+                return;
+            }
+
+            try {
+                const userId = await tracker.addUserInfo({
+                    userId: email, // Use email as userId
+                    userProperties: {
+                        email: email,
+                        name: name,
+                        plan: plan,
+                        company: company,
+                        signupDate: new Date().toISOString()
+                    }
+                });
+
+                const newEndUserId = tracker.getSessionId();
+                addLog(`New endUserId after authentication: ${newEndUserId}`);
+                addLog(`endUserId changed: ${tracker.getSessionId() !== newEndUserId ? 'YES (BAD)' : 'NO (GOOD)'}`);
+                addLog(`User authenticated: ${userId}`);
+
+                const authResultDiv = document.getElementById('authResult');
+                authResultDiv.style.display = 'block';
+                authResultDiv.innerHTML = `
+                    <strong>Authentication Successful!</strong><br>
+                    New End User ID: ${newEndUserId}<br>
+                    Original End User ID: ${tracker.getSessionId()}<br>
+                    endUserId changed: ${tracker.getSessionId() !== newEndUserId ? 'YES (BAD)' : 'NO (GOOD)'}
+                `;
+                authResultDiv.style.color = 'green';
+
+            } catch (error) {
+                console.error('Error authenticating user:', error);
+                addLog('Error authenticating user: ' + error.message);
+
+                const authResultDiv = document.getElementById('authResult');
+                authResultDiv.style.display = 'block';
+                authResultDiv.innerHTML = `
+                    <strong>Authentication Failed!</strong><br>
+                    Error: ${error.message}
+                `;
+                authResultDiv.style.color = 'red';
+            }
+        }
         
         // View logs
         function viewLogs() {
@@ -571,8 +714,7 @@
             try {
                 const userInfo = tracker.getUserInfo ? tracker.getUserInfo() : null;
                 if (userInfo) {
-                    const infoText = `
-                        <strong>Detailed User Information:</strong><br>
+                    const infoText = `                        <strong>Detailed User Information:</strong><br>
                         End User ID: ${userInfo.endUserId || 'Not set'}<br>
                         Session ID: ${userInfo.sessionId}<br>
                         Is Preexisting User: ${userInfo.isPreexistingUser ? 'Yes' : 'No'}<br>
@@ -593,6 +735,44 @@
                 addLog(`Error getting user info: ${error.message}`);
             }
         }
+
+        // Show current authentication status
+        function showAuthStatus() {
+            if (!tracker) {
+                addLog('Tracker not available');
+                return;
+            }
+            try {
+                const userInfo = tracker.getUserInfo ? tracker.getUserInfo() : null;
+                const userAttributes = tracker.getUserAttributes ? tracker.getUserAttributes() : {};
+                
+                if (userInfo) {
+                    const statusText = `
+                        <strong>Current Authentication Status:</strong><br>
+                        End User ID: ${userInfo.endUserId || 'Not set'}<br>
+                        Session ID: ${userInfo.sessionId}<br>
+                        Is Preexisting User: ${userInfo.isPreexistingUser ? 'Yes' : 'No'}<br>
+                        Initialized: ${userInfo.initialized ? 'Yes' : 'No'}<br>
+                        <br>
+                        <strong>User Attributes:</strong><br>
+                        ${Object.keys(userAttributes).length > 0 ? 
+                            Object.entries(userAttributes).map(([key, value]) => `${key}: ${value}`).join('<br>') : 
+                            'No user attributes set'
+                        }
+                        <br><br>
+                        <strong>Cookie Check:</strong><br>
+                        End User Cookie: ${tracker.getCookie ? tracker.getCookie(`human_behavior_end_user_id_13c3e029-ca45-4a3c-a33b-f5dcb297e31c`) : 'Method not available'}<br>
+                        Session Cookie: ${tracker.getCookie ? tracker.getCookie('human_behavior_session_id') : 'Method not available'}
+                    `;
+                    addLog('Authentication status displayed', { userInfo, userAttributes });
+                    alert(statusText);
+                } else {
+                    addLog('getUserInfo method not available for status');
+                }
+            } catch (error) {
+                addLog(`Error getting authentication status: ${error.message}`);
+            }
+        }
         
         // Add log message
         function addLog(message, data = null) {
@@ -655,4 +835,4 @@
         }, 5000); // Check every 5 seconds
     </script>
 </body>
-</html> 
+</html> 

package/src/api.ts

@@ -222,24 +222,31 @@ export class HumanBehaviorAPI {
 
     async sendUserData(userId: string, userData: Record<string, any>, sessionId: string) {
         try {
+            const payload = {
+                userId: userId,
+                userAttributes: userData,
+                sessionId: sessionId,
+                posthogName: userData.email || userData.name || null // Update posthogName with email
+            };
+            
+            console.log('Sending user data to server:', payload);
+            
             const response = await fetch(`${this.baseUrl}/api/ingestion/user`, {
                 method: 'POST',
                 headers: {
                     'Content-Type': 'application/json',
                     'Authorization': `Bearer ${this.apiKey}`
                 },
-                body: JSON.stringify({
-                    userId: userId,
-                    userAttributes: userData,
-                    sessionId: sessionId
-                })
+                body: JSON.stringify(payload)
             });
             
             if (!response.ok) {
                 throw new Error(`Failed to send user data: ${response.statusText} with API key: ${this.apiKey}`);
             }
             
-            return await response.json();
+            const result = await response.json();
+            console.log('Server response:', result);
+            return result;
         } catch (error) {
             logError('Error sending user data:', error);
             throw error;

package/src/tracker.ts

@@ -725,19 +725,26 @@ export class HumanBehaviorTracker {
         { userId, userProperties }: { userId?: string, userProperties: Record<string, any> }
     ): Promise<string> {
         await this.ensureInitialized();
-        // Determine the userId to use
-        const resolvedUserId = userId || userProperties.email;
-        if (!resolvedUserId) {
-            return this.endUserId || '';
-        }
+        
+        // Keep the original endUserId (UUID) - don't change it
+        const originalEndUserId = this.endUserId;
+        
+        // Store user properties
         this.userProperties = userProperties;
-        await this.api.sendUserData(resolvedUserId, userProperties, this.sessionId);
-        // Update endUserId and cookie if changed
-        if (resolvedUserId !== this.endUserId) {
-            this.endUserId = resolvedUserId;
-            this.setCookie(`human_behavior_end_user_id_${this.apiKey}`, resolvedUserId, 365);
-        }
-        return this.endUserId || '';
+        
+        // Send user data with the original endUserId
+        await this.api.sendUserData(originalEndUserId!, userProperties, this.sessionId);
+        
+        // Don't update endUserId - keep it as the original UUID
+        // The posthogName will be updated on the server side with the email
+        
+        return originalEndUserId || '';
+    }
+    /**
+     * Get current user attributes
+     */
+    public getUserAttributes(): Record<string, any> {
+        return { ...this.userProperties };
     }
 
     public async start() {