brandtech-sandbox-video-subtitle-generator/temporary_MSAL_bypass.md

Temporary MSAL Bypass Notes

Purpose

This document tracks the temporary bypass of MSAL authentication to allow server testing before Azure Entra app configuration is complete.

MSAL Implementation Details (To Re-enable Later)

Configuration Used

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/subtitle-v2"
    },
    cache: {
        cacheLocation: "localStorage",
        storeAuthStateInCookie: false
    }
};

Authentication Flow Implemented

• PKCE Security: Proof Key for Code Exchange enabled by default in MSAL 2.x
• Redirect Flow: Using loginRedirect() and logoutRedirect()
• Silent Token Refresh: acquireTokenSilent() with fallback to redirect
• Scopes: ["User.Read"] for basic profile access

Files Modified for MSAL

1. index.php:

   • Added MSAL library script tag
   • Added authentication UI components
   • Added MSAL configuration and handlers
   • Added authentication guards in form submissions

2. styles.css:

   • Added .auth-container, .auth-section, .auth-button styles
   • Added responsive styles for authentication components

Components Added

• Sign In/Sign Out buttons
• Welcome message display
• Authentication state management
• Protected main content area

Changes Made for Temporary Bypass

What Was Disabled

1. Authentication Checks: Commented out user authentication validation
2. MSAL Initialization: Commented out MSAL instance creation and handlers
3. Authentication UI: Hidden authentication components
4. Protected Content: Made main container visible by default
5. Token Requests: Removed access token inclusion in API calls

Files Modified for Bypass

• index.php: Authentication logic commented out
• UI elements hidden via CSS display properties

Re-enabling MSAL Authentication

Steps to Restore

1. Uncomment MSAL Code: Remove comment blocks around authentication logic
2. Show Auth UI: Change display: none to display: block for auth components
3. Hide Main Content: Change main container back to display: none initially
4. Restore Form Guards: Uncomment authentication checks in form submissions
5. Test Flow: Verify login/logout and token refresh work properly

Azure Configuration Needed

• Entra app registration must be configured
• Redirect URI must be added: https://ai-sandbox.oliver.solutions/subtitle-v2
• API permissions for User.Read scope
• Application ID must match: 9079054c-9620-4757-a256-23413042f1ef

Testing Checklist (When Re-enabling)

• Login redirect works
• User info displays correctly
• Logout redirect works
• Token refresh handles expiration
• Form submissions include access tokens
• Unauthenticated users cannot access content
• Dark mode toggle still works
• Responsive design works on mobile

Notes

• PKCE is enabled by default in MSAL 2.x, providing enhanced security
• Current implementation uses redirect flow (good for production)
• LocalStorage is used for token caching
• Silent token refresh prevents unnecessary user interruptions