Merge pull request #228 from Open-STEM/env

NikhilGangaram · web-flow · commit 344e6cc1c98b · 2026-02-22T09:42:41.000-05:00
movd to backend
diff --git a/index.html b/index.html
@@ -19,6 +19,7 @@
         }
     }
     </script>
+    <meta http-equiv="Cross-Origin-Opener-Policy" content="same-origin-allow-popups">
 </head>
 
 <body class="debug-screens">
diff --git a/src/components/chat/ai-chat.tsx b/src/components/chat/ai-chat.tsx
@@ -31,27 +31,36 @@ export default function AIChat() {
 
         // Generate a unique session ID for this chat session
         const newSessionId = uuidv4();
-        console.log(`[AIChat] Generated new session ID: ${newSessionId}`);
         setSessionId(newSessionId);
 
         // Ensure documentation is loaded via backend when chat opens
         const initDocs = async () => {
             if (!geminiClient.current || !newSessionId) return;
-            setContextStatus('loading');
-            const status = await geminiClient.current.getDocsStatus(newSessionId);
-            if (!status.loaded) {
-                const res = await geminiClient.current.loadDocs(newSessionId);
-                setContextStatus(res.success ? 'loaded' : 'error');
-            } else {
-                setContextStatus('loaded');
+            
+            try {
+                setContextStatus('loading');
+                
+                // STEP 1: Perform the handshake first!
+                await geminiClient.current.performHandshake();
+                
+                // STEP 2: Now that we have the cookie and token, check docs
+                const status = await geminiClient.current.getDocsStatus(newSessionId);
+                if (!status.loaded) {
+                    const res = await geminiClient.current.loadDocs(newSessionId);
+                    setContextStatus(res.success ? 'loaded' : 'error');
+                } else {
+                    setContextStatus('loaded');
+                }
+            } catch (err) {
+                console.error("Handshake/Init failed", err);
+                setContextStatus('error');
             }
         };
         initDocs();
 
         // Cleanup function when component unmounts (user closes chat or leaves IDE)
         return () => {
             if (geminiClient.current && newSessionId) {
-                console.log(`[AIChat] Component unmounting, cleaning up session ${newSessionId.substring(0, 8)}...`);
                 geminiClient.current.cleanupSession(newSessionId);
             }
         };
@@ -64,7 +73,6 @@ export default function AIChat() {
                 // Use sendBeacon for more reliable cleanup on page unload (uses POST)
                 const url = `/api/session/${sessionId}`;
                 navigator.sendBeacon(url);
-                console.log(`[AIChat] Page unloading, sent cleanup beacon for session ${sessionId.substring(0, 8)}...`);
             }
         };
 
@@ -159,7 +167,6 @@ export default function AIChat() {
             
             // Use the new simplified chat API - all teaching guidelines are now in backend
             const currentLanguage = i18n.language || 'en';
-            console.log(`[AIChat] Sending message with session ${sessionId.substring(0, 8)}... (history: ${messages.length} messages, language: ${currentLanguage})`);
             await geminiClient.current.chatWithContext(
                 sessionId,
                 userMessage.content,
@@ -186,7 +193,7 @@ export default function AIChat() {
         } catch (error) {
             // Handle abort gracefully
             if (error instanceof Error && error.name === 'AbortError') {
-                console.log('Generation was stopped by user');
+                console.log('Generation was stopped by user'); // Keep this for user feedback on abort
                 return;
             }
 
@@ -344,4 +351,4 @@ export default function AIChat() {
             </div>
         </div>
     );
-} 
+}
diff --git a/src/main.tsx b/src/main.tsx
@@ -1,15 +1,46 @@
-import { StrictMode } from 'react'
+import { StrictMode, useState, useEffect } from 'react'
 import { createRoot } from 'react-dom/client'
 import '@/index.css'
 import '@/utils/i18n';
 import '@/utils/blockly-global'; // Expose Blockly globally for external plugins
 import App from '@/App.tsx'
 import { GoogleOAuthProvider } from '@react-oauth/google';
 
+function Root() {
+  const [googleClientId, setGoogleClientId] = useState<string | null>(null);
+  const googleAuthBackendUrl = import.meta.env.VITE_GOOGLE_AUTH_URL;
+
+  useEffect(() => {
+    const fetchClientId = async () => {
+      try {
+        const response = await fetch(`${googleAuthBackendUrl}/google-auth/client-id`);
+        if (!response.ok) {
+          throw new Error(`Failed to fetch client ID: ${response.statusText}`);
+        }
+        const data = await response.json();
+        setGoogleClientId(data.client_id);
+      } catch (error) {
+        console.error("Error fetching Google Client ID:", error);
+        // Handle error appropriately, e.g., show an error message to the user
+      }
+    };
+    fetchClientId();
+  }, []);
+
+  if (!googleClientId) {
+    // Optionally render a loading spinner or message
+    return <div>Loading Google authentication...</div>;
+  }
+
+  return (
+    <StrictMode>
+      <GoogleOAuthProvider clientId={googleClientId}>
+        <App />
+      </GoogleOAuthProvider>
+    </StrictMode>
+  );
+}
+
 createRoot(document.getElementById('root')!).render(
-  <StrictMode>
-    <GoogleOAuthProvider clientId={import.meta.env.GOOGLE_CLIENT_ID}>
-      <App />
-    </GoogleOAuthProvider>
-  </StrictMode>,
+  <Root />
 )
diff --git a/src/services/google-auth.ts b/src/services/google-auth.ts
@@ -24,27 +24,23 @@ export type UserInfo = {
  * including obtaining access tokens and refreshing them.
  */
 class GoogleAuthService {
-    // Define the constructor with parameters if needed{
-    private _tokenUrl: string = 'https://oauth2.googleapis.com/token';
-    private _clientId: string;
+    private _googleAuthBackendUrl: string;
+    private _handshakeToken: string | null = null;
     private _isLogin: boolean = false;
     private _isAdmin: boolean = false;
-    private _clientSecret: string;
-    private _redirectUri: string;
     private _code: string | null = null;
     private _refreshToken: string | null = null;
     private _expiresIn: number | null = null;
     private _accessToken: string | null = null;
-    private _timeoutId: NodeJS.Timeout | undefined
+    private _timeoutId: NodeJS.Timeout | undefined;
     private _userProfile: UserProfile;
     private _modeLogger = logger.child({ module: 'googleapi' });
     
 
     constructor() {
-        this._clientId = import.meta.env.GOOGLE_CLIENT_ID || '';
-        this._clientSecret = import.meta.env.GOOGLE_CLIENT_SECRET || '';
-        this._redirectUri = import.meta.env.GOOGLE_REDIRECT_URI || '';
+        this._googleAuthBackendUrl = import.meta.env.VITE_GOOGLE_AUTH_URL;
         this._userProfile = { id: '', email: '', name: '', picture: '' };
+        this.initHandshake(); // Initiate handshake on service creation
     }
 
     dispose() {
@@ -111,21 +107,39 @@ class GoogleAuthService {
         this._isAdmin = isAdmin;
     }
 
+    private async initHandshake() {
+        try {
+            const response = await fetch(`${this._googleAuthBackendUrl}/google-auth/handshake`, {
+                credentials: 'include', // Include cookies in cross-origin requests
+            });
+            if (!response.ok) {
+                throw new Error(`Handshake failed: ${response.statusText}`);
+            }
+            const data = await response.json();
+            this._handshakeToken = data.handshake_token;
+        } catch (error) {
+            if (error instanceof Error) {
+                this._modeLogger.error(`Error during Google Auth handshake: ${error.stack ?? error.message}`);
+            } else {
+                this._modeLogger.error(`Error during Google Auth handshake: ${String(error)}`);
+            }
+        }
+    }
+
     /**
      * Refreshes the access token using the stored refresh token.
      * @returns A Promise that resolves to the new access token.
      */
     private async refreshToken() 
     {        
-        if (this._refreshToken) {
+        if (this._refreshToken && this._handshakeToken) {
             this.getAccessToken().then((token) => {
                 this._accessToken = token;
-                this._modeLogger.debug(`Access Token refreshed: , ${this._accessToken}`);
             }).catch((error) => {
                 this._modeLogger.error('Error refreshing access token:', error);
             });
         } else {
-            this._modeLogger.warn('No refresh token available to refresh access token.');
+            this._modeLogger.warn('No refresh token or handshake token available to refresh access token.');
         }
         // Set a timeout to refresh the token again after the current token expires
         this._timeoutId = setTimeout(this.refreshToken.bind(this), this._expiresIn ? this._expiresIn * 1000 * .95 : 3600000); // Default to 1 hour if expires_in is not set
@@ -146,38 +160,58 @@ class GoogleAuthService {
       // Logic to handle Google logout
       googleLogout();
       this._isLogin = false;
+      // Also notify backend to clean up session
+      if (this._handshakeToken) {
+        try {
+            await fetch(`${this._googleAuthBackendUrl}/google-auth/session/${this._handshakeToken}`, {
+                method: 'DELETE',
+                headers: {
+                    'X-Handshake-Token': this._handshakeToken,
+                },
+                credentials: 'include', // Include cookies in cross-origin requests
+            });
+        } catch (error) {
+            if (error instanceof Error) {
+                this._modeLogger.error(`Error cleaning up backend session: ${error.stack ?? error.message}`);
+            } else {
+                this._modeLogger.error(`Error cleaning up backend session: ${String(error)}`);
+            }
+        }
+      }
     }
 
     /**
      * Retrieves the access token using the stored refresh token.
      * @returns A Promise that resolves to the access token.
      */
     async getAccessToken() {
-        const payload = {
-            grant_type: 'refresh_token',
-            refresh_token: this._refreshToken ?? '',
-            client_id: this._clientId,
-            client_secret: this._clientSecret,
-        };
+        if (!this._handshakeToken || !this._refreshToken) {
+            throw new Error('Handshake token or refresh token not available.');
+        }
 
         try {
-            const response = fetch(this._tokenUrl, {
+            const response = await fetch(`${this._googleAuthBackendUrl}/google-auth/refresh-token`, {
                 method: 'POST',
                 headers: {
-                    'Content-Type': 'application/x-www-form-urlencoded',
+                    'Content-Type': 'application/json',
+                    'X-Handshake-Token': this._handshakeToken,
                 },
-                body: new URLSearchParams(payload).toString(),
+                body: JSON.stringify({ session_id: this._handshakeToken }), // Sending handshakeToken as session_id
+                credentials: 'include', // Include cookies in cross-origin requests
             });
 
-            return (await response).json().then(data => {
-                if (data.access_token) {
-                    this._accessToken = data.access_token;
-                    this._expiresIn = data.expires_in;
-                    return data.access_token;
-                } else {
-                    throw new Error('Failed to get access token');
-                }
-            });
+            if (!response.ok) {
+                throw new Error(`Failed to refresh access token from backend: ${response.statusText}`);
+            }
+            const data = await response.json();
+
+            if (data.access_token) {
+                this._accessToken = data.access_token;
+                this._expiresIn = data.expires_in;
+                return data.access_token;
+            } else {
+                throw new Error('Failed to get access token from backend response');
+            }
         }
         catch (error) {
             if (error instanceof Error) {
@@ -192,34 +226,35 @@ class GoogleAuthService {
      * @returns A Promise that resolves to an object containing access_token, refresh_token, and expires_in.
      */
     async getRefreshToken() {
-        const payload = {
-            grant_type: 'authorization_code',
-            code: this._code ?? '',
-            client_id: this._clientId,
-            client_secret: this._clientSecret,
-            redirect_uri: this._redirectUri,
-        };
+        if (!this._handshakeToken || !this._code) {
+            throw new Error('Handshake token or authorization code not available.');
+        }
 
         try {
-            const response = fetch(this._tokenUrl, {
+            const response = await fetch(`${this._googleAuthBackendUrl}/google-auth/exchange-code`, {
                 method: 'POST',
                 headers: {
-                    'Content-Type': 'application/x-www-form-urlencoded',
+                    'Content-Type': 'application/json',
+                    'X-Handshake-Token': this._handshakeToken,
                 },
-                body: new URLSearchParams(payload).toString(),
+                body: JSON.stringify({ code: this._code }),
+                credentials: 'include', // Include cookies in cross-origin requests
             });
 
-            return (await response).json().then(data => {
-                if (data.access_token) {
-                    this._timeoutId = setTimeout(() => this.refreshToken(), 1000);
-                    this._accessToken = data.access_token;
-                    this._refreshToken = data.refresh_token;
-                    this._expiresIn = data.expires_in;
-                    return { access_token: data.access_token, refresh_token: data.refresh_token, expires_in: data.expires_in };
-                } else {
-                    throw new Error('Failed to refresh access token');
-                }
-            });
+            if (!response.ok) {
+                throw new Error(`Failed to exchange code for tokens from backend: ${response.statusText}`);
+            }
+            const data = await response.json();
+
+            if (data.access_token) {
+                this._timeoutId = setTimeout(() => this.refreshToken(), 1000);
+                this._accessToken = data.access_token;
+                this._refreshToken = data.refresh_token; // Backend returns refresh token on first exchange
+                this._expiresIn = data.expires_in;
+                return { access_token: data.access_token, refresh_token: data.refresh_token, expires_in: data.expires_in };
+            } else {
+                throw new Error('Failed to get refresh token from backend response');
+            }
         }
         catch (error) {
             if (error instanceof Error) {
@@ -230,4 +265,4 @@ class GoogleAuthService {
     }
 }
 
-export default GoogleAuthService;
+export default GoogleAuthService;
diff --git a/src/utils/gemini-client.ts b/src/utils/gemini-client.ts
diff --git a/src/widgets/login.tsx b/src/widgets/login.tsx

Original file line number	Diff line number	Diff line change
`@@ -19,6 +19,7 @@`
`19`	`19`	`}`
`20`	`20`	`}`
`21`	`21`	`</script>`
	`22`	`+ <meta http-equiv="Cross-Origin-Opener-Policy" content="same-origin-allow-popups">`
`22`	`23`	`</head>`
`23`	`24`
`24`	`25`	`<body class="debug-screens">`