@embarkai/ui-kit 0.1.1

package/dist/iframe/oauth/x.js

@@ -0,0 +1,436 @@
+/**
+ * X (Twitter) OAuth Popup Script
+ * Handles OAuth 2.0 with PKCE flow for X authentication
+ */
+
+// Get configuration from URL parameters
+const urlParams = new URLSearchParams(window.location.search);
+
+// TSS_URL and PROJECT_ID are build-time constants, passed via URL on initial load
+// After backend redirect, we use stored values from localStorage
+const TSS_URL = urlParams.get('tssUrl') || localStorage.getItem('x_oauth_tssUrl') || (typeof __LUMIA_TSS_URL__ !== 'undefined' ? __LUMIA_TSS_URL__ : null);
+const MODE = urlParams.get('mode') || localStorage.getItem('x_oauth_mode') || 'login';
+const PROJECT_ID = urlParams.get('projectId') || localStorage.getItem('x_oauth_projectId') || (typeof window !== 'undefined' && window.__LUMIA_PROJECT_ID__) || null;
+
+const STATE = urlParams.get('state');
+const CODE = urlParams.get('code');
+const ERROR_PARAM = urlParams.get('error');
+const SUCCESS = urlParams.get('success'); // Backend redirected with success=true
+
+console.log('[X OAuth] Initializing with:', { TSS_URL, MODE, PROJECT_ID, STATE, CODE, ERROR_PARAM, SUCCESS });
+
+const contentEl = document.getElementById('content');
+
+// Track if we've successfully sent auth result to parent
+let authResultSent = false;
+// Track if we're redirecting to X OAuth (to prevent cancellation on redirect)
+let isRedirectingToProvider = false;
+
+function showLoading(message) {
+  if (contentEl) {
+    contentEl.innerHTML = `
+      <div class="loading">
+        <div class="spinner"></div>
+        <p>${message}</p>
+      </div>
+    `;
+  }
+}
+
+function showError(message, allowRetry = true) {
+  console.error('[X OAuth] Error:', message);
+
+  if (contentEl) {
+    contentEl.innerHTML = `
+      <div class="error">
+        <strong>Error:</strong> ${message}
+      </div>
+      ${allowRetry ? '<button class="retry-button" onclick="window.location.reload()">Retry</button>' : ''}
+    `;
+  }
+
+  // Send error to opener
+  if (window.opener) {
+    window.opener.postMessage({
+      type: 'X_AUTH_ERROR',
+      provider: 'x',
+      error: message
+    }, '*');
+  }
+}
+
+function showSuccess(message) {
+  if (contentEl) {
+    contentEl.innerHTML = `
+      <div class="success">
+        ✓ ${message}<br>
+        <small style="color: #666;">Closing window...</small>
+      </div>
+    `;
+  }
+}
+
+async function startOAuthFlow() {
+  if (!TSS_URL) {
+    showError('TSS URL not configured. Missing tssUrl parameter.', false);
+    return;
+  }
+
+  try {
+    showLoading('Starting X OAuth flow...');
+
+    // Determine the correct endpoint based on mode
+    const endpoint = MODE === 'link'
+      ? `${TSS_URL}/api/auth/link/x/start`
+      : `${TSS_URL}/api/auth/x/start`;
+
+    // Add projectId to endpoint if available
+    const fullEndpoint = PROJECT_ID
+      ? `${endpoint}?projectId=${encodeURIComponent(PROJECT_ID)}`
+      : endpoint;
+
+    console.log('[X OAuth] Starting flow with config:', { TSS_URL, MODE, PROJECT_ID, endpoint: fullEndpoint });
+    console.log('[X OAuth] Making request to:', fullEndpoint);
+
+    // Call backend to get authorization URL
+    const response = await fetch(fullEndpoint, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+        ...(MODE === 'link' ? {
+          'Authorization': `Bearer ${urlParams.get('token')}`
+        } : {})
+      },
+      credentials: 'include'
+    });
+
+    if (!response.ok) {
+      const errorText = await response.text().catch(() => '');
+      let errorData;
+      try {
+        errorData = JSON.parse(errorText);
+      } catch {
+        errorData = { message: errorText };
+      }
+      console.error('[X OAuth] Backend error response:', { status: response.status, errorData, errorText });
+      throw new Error(errorData.message || errorText || `Failed to start OAuth: ${response.statusText}`);
+    }
+
+    const data = await response.json();
+    console.log('[X OAuth] Backend response:', data);
+
+    // Backend may return 'url' or 'authorizationUrl'
+    const authUrl = data.authorizationUrl || data.url;
+    console.log('[X OAuth] Authorization URL:', authUrl);
+
+    if (!authUrl) {
+      throw new Error('No authorization URL returned from server');
+    }
+
+    // Store state and config in localStorage (persists across redirects)
+    if (data.state) {
+      localStorage.setItem('x_oauth_state', data.state);
+    }
+    localStorage.setItem('x_oauth_mode', MODE);
+    localStorage.setItem('x_oauth_tssUrl', TSS_URL);
+    if (PROJECT_ID) {
+      localStorage.setItem('x_oauth_projectId', PROJECT_ID);
+    }
+
+    // Redirect to X OAuth page
+    showLoading('Redirecting to X...');
+    isRedirectingToProvider = true; // Prevent cancellation message on redirect
+    window.location.href = authUrl;
+
+  } catch (error) {
+    console.error('[X OAuth] Start flow error:', error);
+    const errorMessage = error.message || 'Failed to start OAuth flow';
+    console.error('[X OAuth] Error details:', { error, MODE, TSS_URL, PROJECT_ID });
+    showError(errorMessage);
+  }
+}
+
+/**
+ * Handle successful OAuth after backend redirect
+ * Backend processes callback and redirects back with success=true
+ * If authCode is present, exchanges it for tokens (Safari ITP fix)
+ * Otherwise falls back to cookie-based verify (desktop browsers)
+ */
+async function handleBackendSuccess() {
+  try {
+    showLoading('Completing authentication...');
+
+    console.log('[X OAuth] Backend redirected with success, verifying session...');
+    console.log('[X OAuth] Using config:', { TSS_URL, PROJECT_ID, MODE });
+
+    // Validate required parameters
+    if (!TSS_URL) {
+      throw new Error('Missing TSS URL. Check build-time configuration.');
+    }
+
+    // Check for auth code (new flow for Safari ITP compatibility)
+    const authCode = urlParams.get('authCode');
+    let userData;
+    let tokens = null;
+
+    if (authCode) {
+      // New flow: Exchange auth code for tokens (fixes Safari ITP issues)
+      console.log('[X OAuth] Auth code present, exchanging for tokens...');
+
+      const exchangeEndpoint = PROJECT_ID
+        ? `${TSS_URL}/api/auth/exchange-code?projectId=${encodeURIComponent(PROJECT_ID)}`
+        : `${TSS_URL}/api/auth/exchange-code`;
+
+      const exchangeResponse = await fetch(exchangeEndpoint, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ code: authCode })
+      });
+
+      if (!exchangeResponse.ok) {
+        const errorData = await exchangeResponse.json().catch(() => ({}));
+        console.error('[X OAuth] Code exchange failed:', exchangeResponse.status, errorData);
+        throw new Error(errorData.error || 'Failed to exchange auth code');
+      }
+
+      const exchangeData = await exchangeResponse.json();
+      console.log('[X OAuth] Code exchange successful:', { userId: exchangeData.userId, hasKeyshare: exchangeData.hasKeyshare });
+
+      // Extract tokens for postMessage
+      tokens = {
+        accessToken: exchangeData.accessToken,
+        refreshToken: exchangeData.refreshToken
+      };
+
+      // Build userData in the same format as verify endpoint
+      userData = {
+        valid: true,
+        userId: exchangeData.userId,
+        sessionId: exchangeData.sessionId,
+        expiresIn: exchangeData.expiresIn,
+        hasKeyshare: exchangeData.hasKeyshare,
+        displayName: exchangeData.displayName,
+        providers: exchangeData.providers
+      };
+    } else {
+      // Legacy flow: Use cookies (works on desktop browsers)
+      console.log('[X OAuth] No auth code, falling back to cookie-based verify...');
+
+      const verifyEndpoint = PROJECT_ID
+        ? `${TSS_URL}/api/auth/verify?projectId=${encodeURIComponent(PROJECT_ID)}`
+        : `${TSS_URL}/api/auth/verify`;
+
+      const verifyResponse = await fetch(verifyEndpoint, {
+        method: 'GET',
+        credentials: 'include',
+      });
+
+      if (!verifyResponse.ok) {
+        console.error('[X OAuth] Verify failed:', verifyResponse.status);
+        throw new Error('Failed to verify authentication. Session may not be created.');
+      }
+
+      userData = await verifyResponse.json();
+    }
+
+    console.log('[X OAuth] Authentication verified:', userData);
+
+    // Send success to opener
+    if (window.opener) {
+      const message = {
+        type: 'X_AUTH_SUCCESS',
+        provider: 'x',
+        user: userData,
+        mode: MODE
+      };
+
+      // Include tokens if we have them (new flow)
+      if (tokens) {
+        message.tokens = tokens;
+      }
+
+      window.opener.postMessage(message, '*');
+
+      // Mark that we've sent the auth result
+      authResultSent = true;
+
+      showSuccess(MODE === 'link' ? 'Account linked successfully!' : 'Authentication successful!');
+
+      // Clean up localStorage
+      localStorage.removeItem('x_oauth_state');
+      localStorage.removeItem('x_oauth_mode');
+      localStorage.removeItem('x_oauth_tssUrl');
+      localStorage.removeItem('x_oauth_projectId');
+
+      setTimeout(() => {
+        window.close();
+      }, 1500);
+    } else {
+      console.error('[X OAuth] No opener window found');
+      showError('No opener window found. Please close this window manually.');
+    }
+
+  } catch (error) {
+    console.error('[X OAuth] Backend success handler error:', error);
+    showError(error.message || 'Failed to complete authentication');
+
+    // Clean up localStorage on error
+    localStorage.removeItem('x_oauth_state');
+    localStorage.removeItem('x_oauth_mode');
+    localStorage.removeItem('x_oauth_tssUrl');
+    localStorage.removeItem('x_oauth_projectId');
+  }
+}
+
+/**
+ * Handle OAuth callback (legacy, may not be used if backend handles redirect_uri)
+ */
+async function handleCallback() {
+  try {
+    showLoading('Completing authentication...');
+
+    // Verify state matches
+    const savedState = localStorage.getItem('x_oauth_state');
+    const savedMode = localStorage.getItem('x_oauth_mode');
+
+    if (savedState && STATE !== savedState) {
+      throw new Error('Invalid state parameter. Possible CSRF attack.');
+    }
+
+    if (ERROR_PARAM === 'access_denied') {
+      console.warn('[X OAuth] User denied authorization during legacy callback');
+      redirectWithAccessDenied();
+      return;
+    }
+
+    if (ERROR_PARAM) {
+      throw new Error(`OAuth error: ${ERROR_PARAM}`);
+    }
+
+    if (!CODE) {
+      throw new Error('No authorization code received');
+    }
+
+    console.log('[X OAuth] Callback successful, mode:', savedMode);
+
+    // For login mode, the backend callback endpoint handles everything
+    // and redirects back with tokens. For link mode, we need to verify.
+    if (savedMode === 'login') {
+      // The callback endpoint should have set cookies/tokens
+      // Get user info to verify
+      const response = await fetch(`${TSS_URL}/api/auth/verify`, {
+        credentials: 'include'
+      });
+
+      if (!response.ok) {
+        throw new Error('Failed to verify authentication');
+      }
+
+      const userData = await response.json();
+      console.log('[X OAuth] User data:', userData);
+
+      // Send success to opener
+      if (window.opener) {
+        window.opener.postMessage({
+          type: 'X_AUTH_SUCCESS',
+          provider: 'x',
+          user: userData,
+          mode: 'login'
+        }, '*');
+
+        showSuccess('Authentication successful!');
+
+        setTimeout(() => {
+          window.close();
+        }, 1500);
+      } else {
+        showError('No opener window found');
+      }
+    } else {
+      // Link mode - backend has already linked the account
+      if (window.opener) {
+        window.opener.postMessage({
+          type: 'X_AUTH_SUCCESS',
+          provider: 'x',
+          mode: 'link'
+        }, '*');
+
+        showSuccess('Account linked successfully!');
+
+        setTimeout(() => {
+          window.close();
+        }, 1500);
+      } else {
+        showError('No opener window found');
+      }
+    }
+
+  } catch (error) {
+    console.error('[X OAuth] Callback error:', error);
+    showError(error.message || 'Failed to complete authentication');
+  }
+}
+
+// Determine if this is a callback or initial load
+if (ERROR_PARAM) {
+  // Backend redirected with error
+  const errorMessage = decodeURIComponent(ERROR_PARAM);
+  console.error('[X OAuth] Backend returned error:', errorMessage);
+  showError(errorMessage);
+
+  // Send error to opener
+  if (window.opener) {
+    window.opener.postMessage({
+      type: 'X_AUTH_ERROR',
+      provider: 'x',
+      error: errorMessage
+    }, '*');
+    authResultSent = true; // Mark that we've sent result
+  }
+} else if (SUCCESS === 'true') {
+  // Backend redirected back after successful OAuth
+  handleBackendSuccess();
+} else if (CODE) {
+  // This is a callback from X (should not happen with backend redirect_uri)
+  console.warn('[X OAuth] Received code parameter, but backend should handle this');
+  handleCallback();
+} else {
+  // This is initial load, start OAuth flow
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', startOAuthFlow);
+  } else {
+    startOAuthFlow();
+  }
+}
+
+// Handle popup closing without authentication
+window.addEventListener('beforeunload', () => {
+  // Only send cancellation if we haven't sent success/error AND not redirecting to provider
+  if (!authResultSent && !isRedirectingToProvider && window.opener) {
+    console.log('[X OAuth] Window closing without auth result, sending cancellation');
+    window.opener.postMessage({
+      type: 'X_AUTH_CANCELLED',
+      provider: 'x'
+    }, '*');
+  }
+});
+function redirectWithAccessDenied() {
+  const storedState = localStorage.getItem('x_oauth_state');
+  const storedMode = localStorage.getItem('x_oauth_mode') || MODE || 'login';
+
+  localStorage.removeItem('x_oauth_state');
+  localStorage.removeItem('x_oauth_mode');
+  localStorage.removeItem('x_oauth_tssUrl');
+  localStorage.removeItem('x_oauth_projectId');
+
+  const params = new URLSearchParams();
+  params.set('success', 'false');
+  params.set('error', 'ACCESS_DENIED');
+  params.set('mode', storedMode);
+  if (storedState) {
+    params.set('state', storedState);
+  }
+
+  const redirectUrl = `${window.location.origin}${window.location.pathname}?${params.toString()}`;
+  window.location.replace(redirectUrl);
+}