Real Google Auth Upgrade: Integrated Google Identity Services (GIS). Button now triggers real Google Popup if GOOGLE_CLIENT_ID is set in secrets.

main.py

@@ -38,7 +38,12 @@ templates = Jinja2Templates(directory="templates")
 # ================= HOME =================
 @app.get("/")
 async def home(request: Request):
-    return templates.TemplateResponse("index.html", {"request": request})
+    import os
+    cid = os.getenv("GOOGLE_CLIENT_ID", "")
+    return templates.TemplateResponse("index.html", {
+        "request": request, 
+        "google_client_id": cid
+    })
 
 
 # ================= API =================

static/app.js

@@ -68,6 +68,64 @@ const els = {
 function init() {
     setupEventListeners();
     initChart();
+    initRealGoogleAuth();
+}
+
+function initRealGoogleAuth() {
+    const cid = document.querySelector('meta[name="google-signin-client_id"]').content;
+    if (!cid || !window.google) return;
+
+    google.accounts.id.initialize({
+        client_id: cid,
+        callback: handleGoogleCredentialResponse,
+        cancel_on_tap_outside: false
+    });
+}
+
+function handleGoogleCredentialResponse(response) {
+    // This is the JWT token from Google
+    const token = response.credential;
+    const base64Url = token.split('.')[1];
+    const base64 = base64Url.replace(/-/g, '+').replace(/_/g, '/');
+    const jsonPayload = decodeURIComponent(atob(base64).split('').map(c => {
+        return '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2);
+    }).join(''));
+
+    const payload = JSON.parse(jsonPayload);
+    const email = payload.email;
+    
+    if (email) {
+        authenticateViaGoogleEmail(email);
+    }
+}
+
+async function authenticateViaGoogleEmail(email) {
+    els.authError.style.display = 'none';
+    const originalBtnText = els.googleAuthBtn.innerHTML;
+    els.googleAuthBtn.disabled = true;
+    els.googleAuthBtn.innerText = "Authenticating...";
+
+    try {
+        const res = await fetch('/api/google_login', {
+            method: 'POST',
+            headers: {'Content-Type': 'application/json'},
+            body: JSON.stringify({ email })
+        });
+        const data = await res.json();
+        
+        if (data.status === 'success') {
+            onLoginSuccess(data.user);
+        } else {
+            els.authError.innerText = data.message;
+            els.authError.style.display = 'block';
+        }
+    } catch(err) {
+        els.authError.innerText = "Google Auth failed.";
+        els.authError.style.display = 'block';
+    } finally {
+        els.googleAuthBtn.disabled = false;
+        els.googleAuthBtn.innerHTML = originalBtnText;
+    }
 }
 
 // --- Event Listeners ---
@@ -233,34 +291,16 @@ async function handleAuth() {
 }
 
 async function handleGoogleAuth() {
-    els.authError.style.display = 'none';
-    const email = prompt("Google Sign In:\n\nPlease enter your Google email address to authenticate:");
-    if (!email) return;
-    if (!email.includes("@")) return alert("Please enter a valid email.");
-    
-    els.googleAuthBtn.disabled = true;
-    els.googleAuthBtn.innerText = "Authenticating...";
-    
-    try {
-        const res = await fetch('/api/google_login', {
-            method: 'POST',
-            headers: {'Content-Type': 'application/json'},
-            body: JSON.stringify({ email })
-        });
-        const data = await res.json();
-        
-        if (data.status === 'success') {
-            onLoginSuccess(data.user);
-        } else {
-            els.authError.innerText = data.message;
-            els.authError.style.display = 'block';
-        }
-    } catch(err) {
-        els.authError.innerText = "Google Auth failed.";
-        els.authError.style.display = 'block';
-    } finally {
-        els.googleAuthBtn.disabled = false;
-        els.googleAuthBtn.innerHTML = '<i class="fa-brands fa-google" style="color: #4285F4; font-size: 20px;"></i> Sign in with Google';
+    const cid = document.querySelector('meta[name="google-signin-client_id"]').content;
+    if (cid && window.google) {
+        google.accounts.id.prompt(); // Shows the Google One-Tap/Login popup
+    } else {
+        // Fallback simulation if no Client ID is provided
+        els.authError.style.display = 'none';
+        const email = prompt("Google Sign In (Simulation):\n\nPlease enter your Google email address to authenticate:");
+        if (!email) return;
+        if (!email.includes("@")) return alert("Please enter a valid email.");
+        authenticateViaGoogleEmail(email);
     }
 }
 

templates/index.html

@@ -8,6 +8,7 @@
     <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
     <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
     <script src="https://accounts.google.com/gsi/client" async defer></script>
+    <meta name="google-signin-client_id" content="{{ google_client_id }}">
 </head>
 <body class="dark-theme">