ideas-generator/SECURITY_COMPONENTS.md

# Security Components to Temporarily Disable for Local Development

## Authentication Components to Comment Out

### 1. Microsoft MSAL Authentication (index.html)

**Lines to comment out:**

#### Block 1: MSAL Library Import (lines 11-18)
```html
<!-- DISABLE FOR LOCAL DEV
<script src="https://alcdn.msauth.net/browser/2.15.0/js/msal-browser.min.js" crossorigin="anonymous"></script>
<style>
    #protected-content {
        display: none;
    }
</style>
-->
```

#### Block 2: Login/Logout Buttons (lines 27-32)
```html
<!-- DISABLE FOR LOCAL DEV
<div style="text-align: left;">
    <button id="logout-button" onclick="signOut()" style="display:none;">Log Out</button>
    <button id="login-button" onclick="signIn()" style="display:none;">Log In</button>
</div>
-->
```

#### Block 3: Protected Content Wrapper (line 51)
Change from:
```html
<div class="page" id="protected-content">
```
To:
```html
<div class="page" id="protected-content" style="display: flex;">
```

#### Block 4: MSAL Configuration & Functions (lines 68-127)
```html
<!-- DISABLE FOR LOCAL DEV
<script>
    const msalConfig = {
        auth: {
            clientId: "9079054c-9620-4757-a256-23413042f1ef",
            authority: "https://login.microsoftonline.com/e519c2e6-bc6d-4fdf-8d9c-923c2f002385",
            redirectUri: "https://ai-sandbox.oliver.solutions/ideas-sparkplug/index.html"
        },
        cache: {
            cacheLocation: "sessionStorage",
            storeAuthStateInCookie: true,
        }
    };

    const loginRequest = {
        scopes: ["user.read"]
    };

    const myMSALObj = new msal.PublicClientApplication(msalConfig);

    signIn();

    function signIn() {
        myMSALObj.loginPopup(loginRequest)
            .then(loginResponse => {
                console.log("User logged in:", loginResponse.account.username);
                thisUser = loginResponse.account.username;
                sessionStorage.setItem('accessToken', loginResponse.accessToken);
                showProtectedContent();
                onAuthenticated();
            }).catch(error => {
                console.error("Error during login:", error);
            });
    }

    function signOut() {
        sessionStorage.removeItem('accessToken');
        console.log("User logged out.");
        document.getElementById('protected-content').style.display = 'none';
        document.getElementById('logout-button').style.display = 'none';
        document.getElementById('login-button').style.display = 'flex';
    }

    function showProtectedContent() {
        const accessToken = sessionStorage.getItem('accessToken');
        if (accessToken) {
            document.getElementById('protected-content').style.display = 'flex';
            document.getElementById('logout-button').style.display = 'flex';
            document.getElementById('login-button').style.display = 'none';
        }
    }

    window.addEventListener('load', showProtectedContent);
</script>
-->
```

### 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
<!-- DISABLE FOR LOCAL DEV
<div style="color: rgb(255, 255, 255); text-decoration: none; font-weight: 200; position: absolute; bottom: 0; right: 1px; height: 50px; width: 250px; background-color: black; z-index: 2000;">
    <a href="privacy/" style="color: rgb(255, 255, 255); text-decoration: none; font-weight: 200; position: absolute; bottom: 15px; right: 30px;">View our privacy policy here</a>
</div>
-->
```

## 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