``` To: ```html

``` #### Block 4: MSAL Configuration & Functions (lines 68-127) ```html ``` ### 2. JavaScript Authentication Logic (script.js) #### Update thisUser Variable (line 13) Change from: ```javascript var thisUser = ""; ``` To: ```javascript var thisUser = "dev@local.dev"; // Default development user ``` #### Update gcp_fetch Function (lines 46-61) Replace authentication headers: ```javascript async function gcp_fetch(url) { console.log("running gcp_fetch"); return await fetch(url, { method: "POST", mode: "cors", headers: { "Content-type": "application/json" // Remove authenticateduser header for local dev }, body: JSON.stringify({ // Remove authenticateduser from body for local dev }) }); } ``` #### Update onAuthenticated Function (lines 397-402) Replace with direct initialization: ```javascript const onAuthenticated = () => { goToCreateNewConversationsPage(); getConversations(); getAssistants(); getTOVs(); }; // Call directly on page load for development document.addEventListener('DOMContentLoaded', onAuthenticated); ``` ### 3. Backend Authentication (GCF/index.js) **For local development, this entire Google Cloud Function can be ignored since we'll be creating a local backend.** **Components that handle authentication:** - Lines 44-52: Cookie-based auth token extraction - Lines 58-63: Token handling and cookie setting ### 4. Privacy Policy Link (index.html) **Optional - Comment out for cleaner dev environment (lines 45-47):** ```html ``` ## Development Setup Steps ### Step 1: Create Development Flag Add to `js/variables.js`: ```javascript // Development configuration const isDevelopment = true; const developmentUser = "dev@local.dev"; ``` ### Step 2: Conditional Authentication Wrap authentication calls in development checks: ```javascript if (!isDevelopment) { // Original authentication code } else { // Skip authentication, set default user thisUser = developmentUser; document.getElementById('protected-content').style.display = 'flex'; onAuthenticated(); } ``` ### Step 3: Update CSS for Development Ensure protected content is visible: ```css #protected-content { display: flex !important; /* Override for development */ } ``` ## Security Components to Keep Active ### 1. Data Sanitization (script.js) **Keep Active:** `maskUKBankDetails()` function (lines 27-43) - UK banking detail masking - Cybersecurity term filtering - These provide valuable data protection even in development ### 2. CORS Configuration **Keep Active:** Basic CORS handling in local backend - Configure appropriate origins for development - Maintain security headers ### 3. Content Validation **Keep Active:** Basic input validation and sanitization - Message length limits - Content type validation - XSS prevention ## Re-enabling Authentication Checklist When ready to re-enable authentication: 1. [ ] Uncomment all MSAL authentication blocks 2. [ ] Update redirect URI to production domain 3. [ ] Restore `authenticateduser` headers in API calls 4. [ ] Update CORS origins to production domains 5. [ ] Test Microsoft AD login flow 6. [ ] Verify session management 7. [ ] Test logout functionality 8. [ ] Update environment variables for production ## Notes - Keep a backup of the original files before making changes - Use feature flags to easily toggle between development and production - Consider creating separate HTML files for development vs production - All security features should be thoroughly tested before production deployment - The transition approach allows gradual re-enabling of security features