Update authorize for google & github

main.py

@@ -114,17 +114,38 @@ app.include_router(
     tags=["users"],
 )
 app.include_router(
-    fastapi_users.get_oauth_router(google_oauth_client, auth_backend, JWT_SECRET, redirect_url="https://mgzon-mgzon-app.hf.space/chat"),
+    fastapi_users.get_oauth_router(
+        google_oauth_client,
+        auth_backend,
+        JWT_SECRET,
+        redirect_url="/auth/google/callback"  # Updated to callback endpoint
+    ),
     prefix="/auth/google",
     tags=["auth"],
 )
 app.include_router(
-    fastapi_users.get_oauth_router(github_oauth_client, auth_backend, JWT_SECRET, redirect_url="https://mgzon-mgzon-app.hf.space/chat"),
+    fastapi_users.get_oauth_router(
+        github_oauth_client,
+        auth_backend,
+        JWT_SECRET,
+        redirect_url="/auth/github/callback"  # Updated to callback endpoint
+    ),
     prefix="/auth/github",
     tags=["auth"],
 )
 app.include_router(api_router)
 
+# Custom OAuth callbacks to redirect to /chat
+@app.get("/auth/google/callback", response_class=RedirectResponse)
+async def google_oauth_callback(request: Request):
+    logger.info(f"Processing Google OAuth callback: {request.url}")
+    return RedirectResponse(url="/chat", status_code=302)
+
+@app.get("/auth/github/callback", response_class=RedirectResponse)
+async def github_oauth_callback(request: Request):
+    logger.info(f"Processing GitHub OAuth callback: {request.url}")
+    return RedirectResponse(url="/chat", status_code=302)
+
 # Custom middleware for handling 404 and 500 errors
 class NotFoundMiddleware(BaseHTTPMiddleware):
     async def dispatch(self, request: Request, call_next):
@@ -144,12 +165,12 @@ app.add_middleware(NotFoundMiddleware)
 @app.exception_handler(GetIdEmailError)
 async def handle_oauth_error(request: Request, exc: GetIdEmailError):
     logger.error(f"OAuth error: {exc}")
-    return RedirectResponse(url="/login?error=oauth_failed", status_code=302)
-
-# Custom Google OAuth callback to redirect to /chat
-
-
-# Manual OAuth authorize endpoints (to ensure they work even if router fails)
+    error_message = "Failed to authenticate with OAuth. Please try again or contact support."
+    return templates.TemplateResponse(
+        "login.html",
+        {"request": request, "error": error_message},
+        status_code=400
+    )
 
 # Root endpoint for homepage
 @app.get("/", response_class=HTMLResponse)

templates/login.html

@@ -104,12 +104,12 @@
         </button>
       </form>
       <div class="flex justify-center gap-4 mt-4 flex-wrap">
-        <button id="googleLoginBtn" class="inline-flex items-center bg-gradient-to-r from-white to-gray-200 text-gray-800 px-6 py-3 rounded-full font-semibold hover:scale-105 transition-transform">
+        <a id="googleLoginBtn" href="/auth/google" class="inline-flex items-center bg-gradient-to-r from-white to-gray-200 text-gray-800 px-6 py-3 rounded-full font-semibold hover:scale-105 transition-transform">
           Login with Google <i class="bx bxl-google ml-2"></i>
-        </button>
-        <button id="githubLoginBtn" class="inline-flex items-center bg-gradient-to-r from-gray-800 to-black text-white px-6 py-3 rounded-full font-semibold hover:scale-105 transition-transform">
+        </a>
+        <a id="githubLoginBtn" href="/auth/github" class="inline-flex items-center bg-gradient-to-r from-gray-800 to-black text-white px-6 py-3 rounded-full font-semibold hover:scale-105 transition-transform">
           Login with GitHub <i class="bx bxl-github ml-2"></i>
-        </button>
+        </a>
       </div>
       <p class="mt-4">Don't have an account? <a href="/register" class="text-emerald-300 hover:underline">Register</a></p>
       <p id="errorMsg" class="text-red-500 mt-4 hidden"></p>
@@ -194,6 +194,8 @@
     const loginBtn = document.getElementById('loginBtn');
     const spinner = document.getElementById('spinner');
     const errorMsg = document.getElementById('errorMsg');
+
+    // Handle email/password login
     loginForm.addEventListener('submit', async (e) => {
       e.preventDefault();
       spinner.classList.remove('hidden');
@@ -216,60 +218,27 @@
         spinner.classList.add('hidden');
         errorMsg.textContent = 'An error occurred. Please try again.';
         errorMsg.classList.remove('hidden');
+        console.error('Error during login:', error);
       }
     });
+
+    // Handle card details toggle
     function showCardDetails(cardId) {
       document.getElementById(`${cardId}-details`).classList.remove('hidden');
     }
+
     function closeCardDetails(cardId) {
       document.getElementById(`${cardId}-details`).classList.add('hidden');
     }
-    // Google Login
-    document.getElementById('googleLoginBtn').addEventListener('click', async () => {
-      try {
-        const response = await fetch('/auth/google/authorize');
-        const data = await response.json();
-        if (data.authorization_url) {
-          window.location.href = data.authorization_url;
-        } else {
-          console.error('No authorization URL received');
-          errorMsg.textContent = 'Error starting Google login. Try again.';
-          errorMsg.classList.remove('hidden');
-        }
-      } catch (error) {
-        console.error('Error initiating Google login:', error);
-        errorMsg.textContent = 'Error starting Google login. Try again.';
-        errorMsg.classList.remove('hidden');
-      }
-    });
-    // GitHub Login
-    document.getElementById('githubLoginBtn').addEventListener('click', async () => {
-      try {
-        const response = await fetch('/auth/github/authorize');
-        const data = await response.json();
-        if (data.authorization_url) {
-          window.location.href = data.authorization_url;
-        } else {
-          console.error('No authorization URL received');
-          errorMsg.textContent = 'Error starting GitHub login. Try again.';
-          errorMsg.classList.remove('hidden');
-        }
-      } catch (error) {
-        console.error('Error initiating GitHub login:', error);
-        errorMsg.textContent = 'Error starting GitHub login. Try again.';
-        errorMsg.classList.remove('hidden');
-      }
-    });
-    // تسجيل Service Worker لتفعيل الـ PWA
+
+    // Service Worker for PWA
     if ('serviceWorker' in navigator) {
       navigator.serviceWorker.register('/static/js/sw.js')
-        .then(function(reg) {
-          console.log('✅ Service Worker Registered', reg);
-        }).catch(function(err) {
-          console.error('❌ Service Worker registration failed', err);
-        });
+        .then(reg => console.log('✅ Service Worker Registered', reg))
+        .catch(err => console.error('❌ Service Worker registration failed', err));
     }
-    // التعامل مع حدث beforeinstallprompt لتثبيت التطبيق
+
+    // Handle PWA install prompt
     let deferredPrompt;
     window.addEventListener('beforeinstallprompt', (e) => {
       e.preventDefault();