Fix GitHub connect 401: fetch protected connect URL server-side and redirect client to GitHub

frontend/src/hooks/useCodeforces.js

@@ -30,22 +30,42 @@ export const useCodeforces = (dashboardOnly = false) => {
   const [connectLoading, setConnectLoading] = useState(false);
   const [connectError, setConnectError] = useState(null);
 
+  const unwrapApiData = (response) => {
+    if (!response) {
+      return null;
+    }
+
+    if (
+      response.data &&
+      typeof response.data === "object" &&
+      Object.prototype.hasOwnProperty.call(response.data, "data")
+    ) {
+      return response.data.data;
+    }
+
+    if (Object.prototype.hasOwnProperty.call(response, "data")) {
+      return response.data;
+    }
+
+    return null;
+  };
+
   const fetchAll = useCallback(async () => {
     setLoading(true);
     setError(null);
     try {
       if (dashboardOnly) {
-        const { data } = await cfGetDashboardSummary();
-        setDashboardSummary(data.data);
+        const response = await cfGetDashboardSummary();
+        setDashboardSummary(unwrapApiData(response));
       } else {
         const [profileRes, ratingRes, submissionsRes] = await Promise.all([
           cfGetProfile(),
           cfGetRatingHistory(),
           cfGetSubmissions(50),
         ]);
-        setProfile(profileRes.data.data);
-        setRatingHistory(ratingRes.data.data || []);
-        setSubmissions(submissionsRes.data.data || []);
+        setProfile(unwrapApiData(profileRes));
+        setRatingHistory(unwrapApiData(ratingRes) || []);
+        setSubmissions(unwrapApiData(submissionsRes) || []);
       }
     } catch (err) {
       setError(err.response?.data?.message || "Failed to load Codeforces data");
@@ -63,10 +83,11 @@ export const useCodeforces = (dashboardOnly = false) => {
     setConnectLoading(true);
     setConnectError(null);
     try {
-      const { data } = await cfInitiateConnection(handle);
-      setVerificationCode(data.data.verificationCode);
+      const response = await cfInitiateConnection(handle);
+      const payload = unwrapApiData(response);
+      setVerificationCode(payload?.verificationCode);
       setPendingHandle(handle);
-      return data.data;
+      return payload;
     } catch (err) {
       const msg = err.response?.data?.message || "Connection failed";
       setConnectError(msg);
@@ -82,11 +103,12 @@ export const useCodeforces = (dashboardOnly = false) => {
     setConnectLoading(true);
     setConnectError(null);
     try {
-      const { data } = await cfVerifyConnection(pendingHandle);
+      const response = await cfVerifyConnection(pendingHandle);
+      const payload = unwrapApiData(response);
       setVerificationCode(null);
       setPendingHandle(null);
       await fetchAll();
-      return data.data;
+      return payload;
     } catch (err) {
       const msg = err.response?.data?.message || "Verification failed";
       setConnectError(msg);

frontend/src/pages/AccountCenterPage.jsx

@@ -2,8 +2,9 @@ import { useAuth } from "../context/AuthContext";
 import { useState, useEffect } from "react";
 import { Link, useSearchParams } from "react-router-dom";
 import { getProfile, deleteAccount } from "../services/userService";
+import { getGithubConnectUrl } from "../services/authService";
+
 
-const API_BASE = import.meta.env.VITE_API_BASE_URL;
 
 // ── Helpers ──────────────────────────────────────────────────────────────────
 
@@ -21,9 +22,6 @@ const RANK_COLORS = {
   unrated: "text-gray-400",
 };
 
-const rankColor = (rank = "") =>
-  RANK_COLORS[(rank || "").toLowerCase()] || "text-black";
-
 // ── Sub-components ────────────────────────────────────────────────────────────
 
 function SectionLabel({ text }) {
@@ -103,11 +101,29 @@ function GitHubCard({ user }) {
   const ghUsername   = ghIdentity?.username || user?.handles?.github;
   const ghAvatar     = user?.profile?.avatar;
   const [msg, setMsg] = useState("");
+  const [connecting, setConnecting] = useState(false);
 
-  const handleConnect = () => {
-    // Encode current path so backend redirects back here after connect
-    const redirectPath = encodeURIComponent("/account-center");
-    window.location.href = `${API_BASE}/auth/github/connect?redirectPath=${redirectPath}`;
+  const handleConnect = async () => {
+    setMsg("");
+    setConnecting(true);
+    try {
+      const response = await getGithubConnectUrl("/account-center");
+      const authUrl = response?.authUrl;
+
+      if (!authUrl) {
+        throw new Error("Failed to initiate GitHub connect flow");
+      }
+
+      window.location.href = authUrl;
+    } catch (error) {
+      setMsg(
+        error?.response?.data?.message ||
+          error?.message ||
+          "Unable to connect GitHub right now. Please try again."
+      );
+    } finally {
+      setConnecting(false);
+    }
   };
 
   const handleDisconnect = () => {
@@ -196,12 +212,13 @@ function GitHubCard({ user }) {
 
           <button
             onClick={handleConnect}
+            disabled={connecting}
             className="w-full sm:w-auto px-8 py-5 border-[4px] border-black bg-black text-white text-sm font-black uppercase tracking-widest hover:bg-white hover:text-black transition-colors flex items-center gap-3"
           >
             <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
               <path d="M12 0C5.37 0 0 5.37 0 12c0 5.3 3.44 9.8 8.21 11.39.6.11.82-.26.82-.58v-2.03c-3.34.73-4.04-1.61-4.04-1.61-.55-1.39-1.34-1.76-1.34-1.76-1.09-.75.08-.73.08-.73 1.21.08 1.84 1.24 1.84 1.24 1.07 1.84 2.81 1.31 3.5 1 .11-.78.42-1.31.76-1.61-2.66-.3-5.47-1.33-5.47-5.93 0-1.31.47-2.38 1.24-3.22-.12-.3-.54-1.52.12-3.18 0 0 1.01-.32 3.3 1.23a11.5 11.5 0 0 1 3-.4c1.02 0 2.04.14 3 .4 2.29-1.55 3.3-1.23 3.3-1.23.66 1.66.24 2.88.12 3.18.77.84 1.24 1.91 1.24 3.22 0 4.61-2.81 5.63-5.48 5.92.43.37.82 1.1.82 2.22v3.29c0 .32.21.7.83.58C20.56 21.8 24 17.3 24 12c0-6.63-5.37-12-12-12z"/>
             </svg>
-            Connect GitHub Account
+            {connecting ? "Connecting..." : "Connect GitHub Account"}
           </button>
         </>
       )}
@@ -273,7 +290,7 @@ function DangerZone({ onLogout }) {
     try {
       await deleteAccount();
       onLogout(); // Logs the user out and redirects to login
-    } catch (err) {
+    } catch {
       alert("Failed to delete account. Please try again later.");
       setLoading(false);
       setConfirm(false);
@@ -329,23 +346,25 @@ function DangerZone({ onLogout }) {
 export default function AccountCenterPage() {
   const { user, setUser, logout } = useAuth();
   const [searchParams]    = useSearchParams();
-  const [banner, setBanner] = useState("");
+  const githubStatus = searchParams.get("githubStatus");
+  const githubUsername = searchParams.get("githubUsername");
+  const [banner, setBanner] = useState(
+    githubStatus === "connected"
+      ? `GitHub account @${githubUsername || "connected"} linked successfully!`
+      : ""
+  );
 
   // Backend redirects here after GitHub connect: /account-center?githubStatus=connected
   useEffect(() => {
-    const status   = searchParams.get("githubStatus");
-    const username = searchParams.get("githubUsername");
-
-    if (status === "connected") {
-      setBanner(`GitHub account @${username || "connected"} linked successfully!`);
+    if (githubStatus === "connected") {
       // Refresh user profile so the card shows the new GitHub identity
       getProfile()
         .then((res) => setUser(res.data))
         .catch(() => {});
       // Clean URL
       window.history.replaceState({}, "", "/account-center");
     }
-  }, [searchParams]);
+  }, [githubStatus, setUser]);
 
   return (
     <div className="w-full flex-1 bg-white px-4 sm:px-6 md:px-8 py-12 sm:py-16">

frontend/src/pages/GitHubIntelligencePage.jsx

@@ -153,7 +153,7 @@ export default function GitHubIntelligencePage() {
 
   useEffect(() => {
     getGitHubDashboard()
-      .then(res => setData(res.data.data))
+      .then((res) => setData(res?.data?.data ?? res?.data ?? null))
       .catch(err => setError(err.response?.data?.message || err.message))
       .finally(() => setLoading(false));
   }, []);

frontend/src/pages/SignupPage.jsx

@@ -5,6 +5,7 @@ import * as authService from "../services/authService";
 
 const API_BASE = import.meta.env.VITE_API_BASE_URL;
 
+
 export default function SignupPage() {
   const [step, setStep] = useState(1);
   const [name, setName] = useState("");

frontend/src/services/authService.js

@@ -29,3 +29,10 @@ export const resendOtp = async (email, purpose) => {
   const response = await api.post("/auth/resend-otp", { email, purpose });
   return response.data;
 };
+
+export const getGithubConnectUrl = async (redirectPath = "/account-center") => {
+  const response = await api.get("/auth/github/connect-url", {
+    params: { redirectPath }
+  });
+  return response?.data?.data ?? response?.data;
+};

gitubAuthCrationJourney.md

@@ -82,7 +82,7 @@ Implemented end-to-end logic:
 Added controller methods:
 
 - `startGithubAuth`
-- `startGithubConnect`
+- `getGithubConnectUrl`
 - `githubCallback`
 
 Behavior:
@@ -99,10 +99,10 @@ Behavior:
 Added endpoints:
 
 - `GET /api/auth/github/start` (public login/signup via GitHub)
-- `GET /api/auth/github/connect` (protected account-link flow)
+- `GET /api/auth/github/connect-url` (protected account-link flow, returns OAuth URL)
 - `GET /api/auth/github/callback` (GitHub callback)
 
-`/github/connect` is protected using existing `authMiddleware`.
+`/github/connect-url` is protected using existing `authMiddleware`.
 
 ---
 
@@ -175,7 +175,7 @@ Added GitHub id-based lookup + sparse unique index + explicit connect mode flow.
 
 1. Frontend redirects user to:
    - `GET /api/auth/github/start` for GitHub signup/login
-   - `GET /api/auth/github/connect` for linking from signed-in account
+  - `GET /api/auth/github/connect-url` for linking from signed-in account (frontend then redirects to returned GitHub URL)
 2. Backend redirects user to GitHub OAuth consent.
 3. GitHub redirects back to:
    - `GET /api/auth/github/callback?code=...&state=...`

server/config/redis.js

@@ -0,0 +1,31 @@
+import { createClient } from "redis";
+
+let redisClient;
+let connectPromise;
+
+export const getRedisClient = async () => {
+  const redisUrl = process.env.REDIS_URL;
+
+  if (!redisUrl) {
+    throw new Error("REDIS_URL is not configured");
+  }
+
+  if (!redisClient) {
+    redisClient = createClient({ url: redisUrl });
+    redisClient.on("error", (error) => {
+      console.error("Redis client error:", error);
+    });
+  }
+
+  if (!redisClient.isOpen) {
+    if (!connectPromise) {
+      connectPromise = redisClient.connect().finally(() => {
+        connectPromise = null;
+      });
+    }
+
+    await connectPromise;
+  }
+
+  return redisClient;
+};