refactor(auth): replace JSONP with fetch for OTP request and add fallback

Improve the OTP request logic by first attempting a regular fetch request, which is more modern and secure. If the fetch fails, fall back to the JSONP approach. This ensures better compatibility and error handling, including a timeout mechanism and proper cleanup of resources.

Author: Ali-Cheikh

Assets/js/auth.js

@@ -23,7 +23,6 @@ export function setupOtpInputs() {
 }
 
 // Request OTP from server (using GET)
-// Request OTP from server (using JSONP workaround)
 export async function requestOtp() {
   const email = DOM.loginEmail.value.trim();
 
@@ -33,13 +32,31 @@ export async function requestOtp() {
   }
 
   try {
-      // Use JSONP approach
-      const callbackName = `jsonp_${Date.now()}`;
-      const url = `${CONFIG.googleScriptUrl}?action=requestOtp&email=${encodeURIComponent(email)}&callback=${callbackName}`;
-      
+      // First try regular fetch (works if CORS is properly configured)
+      try {
+          const url = `${CONFIG.googleScriptUrl}?action=requestOtp&email=${encodeURIComponent(email)}`;
+          const response = await fetch(url);
+          if (response.ok) {
+              const result = await response.json();
+              if (result.status === 'success') {
+                  DOM.emailForm.classList.add('hidden');
+                  DOM.otpForm.classList.remove('hidden');
+                  DOM.otpEmailDisplay.textContent = email;
+                  return true;
+              }
+          }
+      } catch (fetchError) {
+          console.log('Regular fetch failed, trying JSONP');
+      }
+
+      // Fallback to JSONP if fetch fails
       return new Promise((resolve) => {
+          const callbackName = `jsonp_${Date.now()}`;
+          const url = `${CONFIG.googleScriptUrl}?action=requestOtp&email=${encodeURIComponent(email)}&callback=${callbackName}`;
+          
           window[callbackName] = (response) => {
               delete window[callbackName];
+              document.body.removeChild(script);
 
               if (response.status === 'success') {
                   DOM.emailForm.classList.add('hidden');
@@ -52,15 +69,20 @@ export async function requestOtp() {
               }
           };
 
-          // Create script tag to make JSONP request
           const script = document.createElement('script');
           script.src = url;
+          script.onerror = () => {
+              delete window[callbackName];
+              showAlert('error', 'Connection Error', 'Failed to connect to server');
+              resolve(false);
+          };
           document.body.appendChild(script);
 
-          // Fallback timeout
+          // Timeout after 10 seconds
           setTimeout(() => {
               if (window[callbackName]) {
                   delete window[callbackName];
+                  document.body.removeChild(script);
                   showAlert('error', 'Timeout', 'Server response timed out');
                   resolve(false);
               }

Assets/js/config.js

@@ -1,6 +1,6 @@
 // Configuration constants
 export const CONFIG = {
-  googleScriptUrl: 'https://script.google.com/macros/s/AKfycbwnFQV7ukTBCUgGSjipMreyl4t-Zh3cxX4ARLepZ-k8-YL_qARV7chBXhMKVmVOhZ--/exec', //  auth
+  googleScriptUrl: 'https://script.google.com/macros/s/AKfycbx4YHIB02db77gwBh8bKWEtGgE8nJmZmVbD8278d6tYX_TvrXOclJMTy1yRGqqxVLNm/exec', //  auth
   sessionExpiryHours: 1, // Matches GAS session duration
   otpExpiryMinutes: 5,   // Matches GAS OTP duration