fix: GitHub login - move Firebase config to env vars and fix popup/redirect flow

- src/lib/firebase.ts: read Firebase config from Docusaurus customFields,
  falling back to the original hardcoded values so existing local dev continues
  to work unchanged; remove unused getAnalytics import
- docusaurus.config.ts: expose all Firebase config keys via customFields, each
  driven by a corresponding env var (FIREBASE_API_KEY, FIREBASE_AUTH_DOMAIN,
  FIREBASE_PROJECT_ID, etc.) with the original values as defaults
- src/components/ui/FirebaseAuthGithub.tsx: call getRedirectResult on mount so
  the post-redirect OAuth result is captured; fall back to signInWithRedirect
  when signInWithPopup is blocked/closed; clear loading state only in
  onAuthStateChanged to avoid race condition
- .env.example: document all Firebase environment variables with instructions

Agent-Logs-Url: https://github.com/recodehive/recode-website/sessions/e3163eda-443f-4bc1-ba41-7ccbf2326699

Author: Copilot

.env.example

@@ -10,10 +10,19 @@ GITHUB_TOKEN=your_github_token_here
 SHOPIFY_STORE_DOMAIN=your-store.myshopify.com
 SHOPIFY_STOREFRONT_ACCESS_TOKEN=your_storefront_access_token_here
 
-# Firebase Configuration (if needed)
+# Firebase Configuration
+# Override these in production to use the correct Firebase project.
+# Find these values in Firebase Console > Project Settings > Your apps > SDK setup and configuration.
+# IMPORTANT: FIREBASE_AUTH_DOMAIN must match a domain authorized in
+# Firebase Console > Authentication > Settings > Authorized domains.
 # FIREBASE_API_KEY=your_firebase_api_key
-# FIREBASE_AUTH_DOMAIN=your_firebase_auth_domain
+# FIREBASE_AUTH_DOMAIN=your-project.firebaseapp.com
+# FIREBASE_DATABASE_URL=https://your-project-default-rtdb.firebaseio.com
 # FIREBASE_PROJECT_ID=your_firebase_project_id
+# FIREBASE_STORAGE_BUCKET=your-project.firebasestorage.app
+# FIREBASE_MESSAGING_SENDER_ID=your_sender_id
+# FIREBASE_APP_ID=your_app_id
+# FIREBASE_MEASUREMENT_ID=your_measurement_id
 
 # Analytics Configuration
 # GOOGLE_ANALYTICS_ID=your_google_analytics_id

docusaurus.config.ts

@@ -276,6 +276,27 @@ const config: Config = {
     SHOPIFY_STOREFRONT_ACCESS_TOKEN:
       process.env.SHOPIFY_STOREFRONT_ACCESS_TOKEN ||
       "2503dfbf93132b42e627e7d53b3ba3e9",
+    // Firebase configuration — override via environment variables in production
+    FIREBASE_API_KEY:
+      process.env.FIREBASE_API_KEY || "AIzaSyBSiO9d5tHuyyAeUCt37pxDWTT7jPSigaU",
+    FIREBASE_AUTH_DOMAIN:
+      process.env.FIREBASE_AUTH_DOMAIN ||
+      "awesome-github-profiles.firebaseapp.com",
+    FIREBASE_DATABASE_URL:
+      process.env.FIREBASE_DATABASE_URL ||
+      "https://awesome-github-profiles-default-rtdb.firebaseio.com",
+    FIREBASE_PROJECT_ID:
+      process.env.FIREBASE_PROJECT_ID || "awesome-github-profiles",
+    FIREBASE_STORAGE_BUCKET:
+      process.env.FIREBASE_STORAGE_BUCKET ||
+      "awesome-github-profiles.firebasestorage.app",
+    FIREBASE_MESSAGING_SENDER_ID:
+      process.env.FIREBASE_MESSAGING_SENDER_ID || "490821849262",
+    FIREBASE_APP_ID:
+      process.env.FIREBASE_APP_ID ||
+      "1:490821849262:web:7e97984d98f578b81f9d3f",
+    FIREBASE_MEASUREMENT_ID:
+      process.env.FIREBASE_MEASUREMENT_ID || "G-WM33JZYEV0",
     hooks: {
       onBrokenMarkdownLinks: "warn",
     },

src/components/ui/FirebaseAuthGithub.tsx

@@ -1,30 +1,32 @@
 import React, { useEffect, useState } from "react";
 import { auth } from "../../lib/firebase";
-import { GithubAuthProvider, signInWithPopup, User } from "firebase/auth";
-
-const uiConfig = {
-  signInFlow: "popup",
-  signInOptions: [
-    {
-      provider: GithubAuthProvider.PROVIDER_ID,
-      // You can add scopes and custom parameters here if needed
-    },
-  ],
-  callbacks: {
-    signInSuccessWithAuthResult: () => false, // Prevents redirect
-  },
-};
+import {
+  GithubAuthProvider,
+  signInWithPopup,
+  signInWithRedirect,
+  getRedirectResult,
+  User,
+} from "firebase/auth";
 
 const FirebaseAuthGithub: React.FC = () => {
   const [user, setUser] = useState<User | null>(null);
-  const [githubText, setGithubText] = useState("Sign in with GitHub"); // ✅ new state
+  const [githubText, setGithubText] = useState("Sign in with GitHub");
+  const [loading, setLoading] = useState(true);
 
   useEffect(() => {
-    const unregisterAuthObserver = auth.onAuthStateChanged((user) =>
-      setUser(user as User),
-    );
+    // Handle redirect result (returned after signInWithRedirect flow).
+    // onAuthStateChanged will fire afterwards and clear the loading state.
+    getRedirectResult(auth).catch((error) => {
+      console.error("GitHub redirect sign-in error:", error);
+    });
+
+    // onAuthStateChanged fires once on mount (and after every auth change),
+    // so it is the single place we clear the loading state.
+    const unregisterAuthObserver = auth.onAuthStateChanged((firebaseUser) => {
+      setUser(firebaseUser as User);
+      setLoading(false);
+    });
 
-    // ✅ new effect to change text on resize
     const handleResize = () => {
       if (window.innerWidth <= 1110) {
         setGithubText("Sign in");
@@ -33,7 +35,7 @@ const FirebaseAuthGithub: React.FC = () => {
       }
     };
 
-    handleResize(); // initial call
+    handleResize();
     window.addEventListener("resize", handleResize);
 
     return () => {
@@ -42,6 +44,36 @@ const FirebaseAuthGithub: React.FC = () => {
     };
   }, []);
 
+  const handleGithubSignIn = async () => {
+    const provider = new GithubAuthProvider();
+    try {
+      // Try popup first; fall back to redirect if the popup is blocked
+      await signInWithPopup(auth, provider);
+    } catch (error: unknown) {
+      const code =
+        error && typeof error === "object" && "code" in error
+          ? (error as { code: string }).code
+          : "";
+      if (
+        code === "auth/popup-blocked" ||
+        code === "auth/popup-closed-by-user" ||
+        code === "auth/cancelled-popup-request"
+      ) {
+        try {
+          await signInWithRedirect(auth, provider);
+        } catch (redirectError) {
+          console.error("GitHub redirect sign-in error:", redirectError);
+        }
+      } else {
+        console.error("GitHub sign-in error:", error);
+      }
+    }
+  };
+
+  if (loading) {
+    return null;
+  }
+
   if (user) {
     return (
       <div
@@ -78,15 +110,6 @@ const FirebaseAuthGithub: React.FC = () => {
     );
   }
 
-  const handleGithubSignIn = async () => {
-    const provider = new GithubAuthProvider();
-    try {
-      await signInWithPopup(auth, provider);
-    } catch (error) {
-      console.error("GitHub sign-in error:", error);
-    }
-  };
-
   return (
     <div
       style={{ textAlign: "center" }}
@@ -105,7 +128,6 @@ const FirebaseAuthGithub: React.FC = () => {
         >
           <path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82a7.65 7.65 0 0 1 2-.27c.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0 0 16 8c0-4.42-3.58-8-8-8z" />
         </svg>
-        {/* ✅ dynamic text */}
         <span className="github-text">{githubText}</span>
       </button>
     </div>

src/lib/firebase.ts

@@ -1,16 +1,31 @@
 import { initializeApp, getApps, getApp } from "firebase/app";
 import { getAuth } from "firebase/auth";
-import { getAnalytics } from "firebase/analytics";
+import siteConfig from "@generated/docusaurus.config";
+
+const fields = siteConfig.customFields || {};
 
 const firebaseConfig = {
-  apiKey: "AIzaSyBSiO9d5tHuyyAeUCt37pxDWTT7jPSigaU",
-  authDomain: "awesome-github-profiles.firebaseapp.com",
-  databaseURL: "https://awesome-github-profiles-default-rtdb.firebaseio.com",
-  projectId: "awesome-github-profiles",
-  storageBucket: "awesome-github-profiles.firebasestorage.app",
-  messagingSenderId: "490821849262",
-  appId: "1:490821849262:web:7e97984d98f578b81f9d3f",
-  measurementId: "G-WM33JZYEV0",
+  apiKey:
+    (fields.FIREBASE_API_KEY as string) ||
+    "AIzaSyBSiO9d5tHuyyAeUCt37pxDWTT7jPSigaU",
+  authDomain:
+    (fields.FIREBASE_AUTH_DOMAIN as string) ||
+    "awesome-github-profiles.firebaseapp.com",
+  databaseURL:
+    (fields.FIREBASE_DATABASE_URL as string) ||
+    "https://awesome-github-profiles-default-rtdb.firebaseio.com",
+  projectId:
+    (fields.FIREBASE_PROJECT_ID as string) || "awesome-github-profiles",
+  storageBucket:
+    (fields.FIREBASE_STORAGE_BUCKET as string) ||
+    "awesome-github-profiles.firebasestorage.app",
+  messagingSenderId:
+    (fields.FIREBASE_MESSAGING_SENDER_ID as string) || "490821849262",
+  appId:
+    (fields.FIREBASE_APP_ID as string) ||
+    "1:490821849262:web:7e97984d98f578b81f9d3f",
+  measurementId:
+    (fields.FIREBASE_MEASUREMENT_ID as string) || "G-WM33JZYEV0",
 };
 
 const app = getApps().length ? getApp() : initializeApp(firebaseConfig);