modified ConnectGithub.tsx and aith.github.js file to fix the redirct bug

Author: lorencDedaj

client/src/components/ConnectGithub.tsx

@@ -1,4 +1,6 @@
-import { useEffect, useState } from "react";
+import { useEffect, useState } from 'react';
+// Added by Lorenc
+import { BASE, startGitHubOAuth } from '../lib/api';
 
 /**
  * Shows a "Connect GitHub" button if the user is not logged in.
@@ -11,33 +13,36 @@ export default function ConnectGithub() {
 
   useEffect(() => {
     // Ask the backend if we have a session.
-    fetch("/mcp/v1/status", { credentials: "include" })
-      .then(r => r.json())
-      .then(j => setSession(Boolean(j?.session)))
+    // fetch("/mcp/v1/status", { credentials: "include" })
+    fetch(`${BASE}/mcp/v1/status`, { credentials: 'include' })
+      .then((r) => r.json())
+      .then((j) => setSession(Boolean(j?.session)))
       .catch(() => setSession(false));
   }, []);
 
   const startOAuth = () => {
     setLoading(true);
     // After GitHub completes, the server redirects back here.
-    const redirectTo = encodeURIComponent(window.location.origin + "/connect");
-    window.location.href = `/auth/github/start?redirect_to=${redirectTo}`;
+    // const redirectTo = encodeURIComponent(window.location.origin + "/connect");
+    // window.location.href = `/auth/github/start?redirect_to=${redirectTo}`;
+    const redirectTo = window.location.origin + '/connect';
+    startGitHubOAuth(redirectTo);
   };
 
   if (session === null) return null; // or a small skeleton/spinner
 
   return session ? (
     <span className="inline-flex items-center text-green-600 text-sm">
-      <span className="w-2 h-2 rounded-full bg-green-600 mr-2" />
-      ✓ GitHub connected
+      <span className="w-2 h-2 rounded-full bg-green-600 mr-2" />✓ GitHub
+      connected
     </span>
   ) : (
     <button
       onClick={startOAuth}
       disabled={loading}
       className="px-4 py-2 rounded-2xl bg-black text-white hover:opacity-90"
     >
-      {loading ? "Redirecting…" : "Connect GitHub"}
+      {loading ? 'Redirecting…' : 'Connect GitHub'}
     </button>
   );
 }

client/src/lib/api.ts

@@ -1,6 +1,7 @@
 import { usePipelineStore } from '../store/usePipelineStore';
 
-// This block of code was commented out from Lorenc. Connecting the GCP backed URL with the frontend
+// This block of code was commented out by Lorenc.
+// Connecting the GCP backed URL with the frontend
 
 // export const BASE =
 //   import.meta.env.VITE_API_BASE ?? 'http://localhost:3000/api';

server/routes/auth.github.js

@@ -23,6 +23,8 @@ const {
 const FRONTEND_URL =
   process.env.FRONTEND_URL || 'http://localhost:5173/connect';
 
+const isProd = process.env.NODE_ENV === 'production';
+
 if (!GITHUB_CLIENT_ID || !GITHUB_CLIENT_SECRET || !GITHUB_OAUTH_REDIRECT_URI) {
   console.warn('[WARN] Missing GitHub OAuth env vars');
 }
@@ -73,6 +75,21 @@ router.get('/callback', async (req, res) => {
       return res.status(400).send('Invalid OAuth state');
     }
 
+    // Log the redirect URI used (helps catch mismatches)
+    // console.log(
+    //   '[OAuth callback] Using redirectUri:',
+    //   GITHUB_OAUTH_REDIRECT_URI
+    // );
+
+    // Recover original redirect target (if any) from state
+    const stateItem = consumeState(String(state));
+    const redirectTarget =
+      stateItem &&
+      typeof stateItem.redirectTo === 'string' &&
+      stateItem.redirectTo
+        ? stateItem.redirectTo
+        : FRONTEND_URL;
+
     // Log the redirect URI used (helps catch mismatches)
     console.log(
       '[OAuth callback] Using redirectUri:',
@@ -153,16 +170,27 @@ router.get('/callback', async (req, res) => {
     }
     const jwtToken = jwt.sign(jwtPayload, JWT_SECRET, { expiresIn: '10h' });
 
+    // res.clearCookie('oauth_state');
+    // res.cookie('mcp_session', jwtToken, {
+    //   httpOnly: true,
+    //   sameSite: 'lax',
+    //   path: '/',
+    //   maxAge: 10 * 60 * 60 * 1000, // 10h
+    //   // secure: true, // enable on HTTPS
+    // });
+
+    // return res.redirect(FRONTEND_URL);
+
     res.clearCookie('oauth_state');
     res.cookie('mcp_session', jwtToken, {
       httpOnly: true,
-      sameSite: 'lax',
+      sameSite: isProd ? 'none' : 'lax',
+      secure: isProd,
       path: '/',
       maxAge: 10 * 60 * 60 * 1000, // 10h
-      // secure: true, // enable on HTTPS
     });
 
-    return res.redirect(FRONTEND_URL);
+    return res.redirect(redirectTarget);
   } catch (e) {
     console.error('[OAuth callback] error:', e);
     return res.status(500).send(`OAuth failed: ${e.message}`);