fix: stop exposing client-side tokens

docusaurus.config.ts

@@ -248,6 +248,9 @@ const config: Config = {
 
   markdown: {
     mermaid: true,
+    hooks: {
+      onBrokenMarkdownLinks: "warn",
+    },
   },
 
   // Migrated legacy setting to markdown.hooks.onBrokenMarkdownLinks
@@ -267,18 +270,12 @@ const config: Config = {
     ],
   ],
 
-  // ✅ Add this customFields object to expose the token to the client-side
   customFields: {
-    gitToken: process.env.DOCUSAURUS_GIT_TOKEN,
     // Shopify credentials for merch store
     SHOPIFY_STORE_DOMAIN:
       process.env.SHOPIFY_STORE_DOMAIN || "junh9v-gw.myshopify.com",
     SHOPIFY_STOREFRONT_ACCESS_TOKEN:
-      process.env.SHOPIFY_STOREFRONT_ACCESS_TOKEN ||
-      "2503dfbf93132b42e627e7d53b3ba3e9",
-    hooks: {
-      onBrokenMarkdownLinks: "warn",
-    },
+      process.env.SHOPIFY_STOREFRONT_ACCESS_TOKEN,
   },
 };
 

src/lib/statsProvider.tsx

@@ -8,7 +8,6 @@ import React, {
   type ReactNode,
 } from "react";
 import { githubService, type GitHubOrgStats } from "../services/githubService";
-import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
 
 // Time filter types
 export type TimeFilter = "week" | "month" | "year" | "all";
@@ -160,11 +159,6 @@ const isPRInTimeRange = (mergedAt: string, filter: TimeFilter): boolean => {
 export function CommunityStatsProvider({
   children,
 }: CommunityStatsProviderProps) {
-  const {
-    siteConfig: { customFields },
-  } = useDocusaurusContext();
-  const token = customFields?.gitToken || "";
-
   const [loading, setLoading] = useState(false); // Start with false to avoid hourglass
   const [error, setError] = useState<string | null>(null);
   const [githubStarCount, setGithubStarCount] = useState(984); // Placeholder value - updated to match production
@@ -433,17 +427,8 @@ export function CommunityStatsProvider({
 
       setError(null);
 
-      if (!token) {
-        setError(
-          "GitHub token not found. Please set customFields.gitToken in docusaurus.config.js.",
-        );
-        setLoading(false);
-        return;
-      }
-
       try {
         const headers: Record<string, string> = {
-          Authorization: `token ${token}`,
           Accept: "application/vnd.github.v3+json",
         };
 
@@ -497,7 +482,7 @@ export function CommunityStatsProvider({
         setLoading(false);
       }
     },
-    [token, fetchAllOrgRepos, processBatch, cache],
+    [fetchAllOrgRepos, processBatch, cache],
   );
 
   const clearCache = useCallback(() => {

src/pages/dashboard/index.tsx

@@ -130,6 +130,7 @@ const DashboardContent: React.FC = () => {
       setDiscussions(discussionsData);
     } catch (error) {
       console.error("Failed to fetch discussions:", error);
+      setDiscussions([]);
       setDiscussionsError(
         error instanceof Error ? error.message : "Failed to load discussions",
       );

src/services/githubService.ts

@@ -64,24 +64,22 @@ class GitHubService {
   private readonly CACHE_KEY = "github_org_stats";
   private readonly CACHE_DURATION = 30 * 60 * 1000; // 30 minutes in milliseconds
   private readonly BASE_URL = "https://api.github.com";
+  private readonly DISCUSSIONS_UNAVAILABLE_MESSAGE =
+    "GitHub Discussions are disabled until a server-side GitHub proxy is configured.";
 
   // === ADDED: include anonymous contributors configurable (default false)
   private includeAnonymousContributors = false;
 
   // Get headers for GitHub API requests
   private getHeaders(): Record<string, string> {
-    const headers: Record<string, string> = {
+    return {
       Accept: "application/vnd.github.v3+json",
       "Content-Type": "application/json",
     };
+  }
 
-    // Add GitHub token if available in environment
-    // Note: In production, you might want to use a server-side proxy to avoid exposing tokens
-    if (typeof window !== "undefined" && (window as any).GITHUB_TOKEN) {
-      headers["Authorization"] = `token ${(window as any).GITHUB_TOKEN}`;
-    }
-
-    return headers;
+  private canUseGitHubGraphQL(): boolean {
+    return typeof window === "undefined";
   }
 
   // === ADDED: setter to toggle anonymous contributors inclusion
@@ -275,16 +273,16 @@ class GitHubService {
     return totalContributors;
   }
 
-  // === UPDATED: Get discussions count for a specific repository (default: "Support")
-  // Reason: previous code used an org-wide issues search which returned issues, not discussions.
-  // This function uses GraphQL to read repository.discussions.totalCount (repo-specific).
-  // If you need org-wide discussions count, we should iterate all repos and sum totalCount (heavier).
+  // GitHub GraphQL requires authentication, so the browser should not call it directly.
   private async getDiscussionsCount(
     signal?: AbortSignal,
     repoName: string = "Support",
   ): Promise<number> {
+    if (!this.canUseGitHubGraphQL()) {
+      return 0;
+    }
+
     try {
-      // GraphQL query to get discussions totalCount for a repository
       const query = `
         query ($owner: String!, $name: String!) {
           repository(owner: $owner, name: $name) {
@@ -351,11 +349,10 @@ class GitHubService {
         0,
       );
 
-      // Estimate contributors and get discussions count
-      // === UPDATED: getDiscussionsCount now uses GraphQL for a specific repo (default 'Support')
+      // Estimate contributors and fetch discussion stats when a server-side context is available.
       const [totalContributors, discussionsCount] = await Promise.all([
         this.estimateContributors(activeRepos, signal),
-        this.getDiscussionsCount(signal), // default repoName: "Support" (change if you prefer another repo)
+        this.getDiscussionsCount(signal),
       ]);
 
       const stats: GitHubOrgStats = {
@@ -410,11 +407,14 @@ class GitHubService {
     return { cached: true, age, expiresIn };
   }
 
-  // Fetch GitHub Discussions using GraphQL API (existing method kept intact)
   async fetchDiscussions(
     limit: number = 20,
     signal?: AbortSignal,
   ): Promise<GitHubDiscussion[]> {
+    if (!this.canUseGitHubGraphQL()) {
+      throw new Error(this.DISCUSSIONS_UNAVAILABLE_MESSAGE);
+    }
+
     const query = `
       query GetDiscussions($owner: String!, $name: String!, $first: Int!) {
         repository(owner: $owner, name: $name) {
@@ -513,9 +513,7 @@ class GitHubService {
       );
     } catch (error) {
       console.error("Error fetching discussions:", error);
-
-      // Return mock data for development/fallback
-      return this.getMockDiscussions();
+      throw error;
     }
   }
 

wiki/Documentation.md

@@ -221,9 +221,13 @@ const isPRInTimeRange = (mergedAt: string, filter: TimeFilter): boolean => {
   const prDate = new Date(mergedAt);
   return prDate >= filterDate;
 };
+```
+
 Computed Contributors
 This is where React's useMemo shines:
-typescriptconst contributors = useMemo(() => {
+
+```typescript
+const contributors = useMemo(() => {
   if (!allContributors.length) return [];
 
   const filteredContributors = allContributors
@@ -573,7 +577,7 @@ Response Example:
 }
 ```
 #### Authentication
-All requests require a GitHub Personal Access Token:
+Authenticated requests should be made from a server-side endpoint or serverless function so the token is never shipped to the browser:
 ```typescript
 const headers: Record<string, string> = {
   Authorization: `token ${YOUR_GITHUB_TOKEN}`,
@@ -588,22 +592,7 @@ Select scopes: public_repo, read:org
 Copy the token (you won't see it again!)
 
 #### Storing the Token:
-In Docusaurus, we store it in docusaurus.config.js:
-```javascript
-module.exports = {
-  customFields: {
-    gitToken: process.env.GITHUB_TOKEN || '',
-  },
-  // ...
-};
-```
-Then access it:
-```typescript
-const {
-  siteConfig: { customFields },
-} = useDocusaurusContext();
-const token = customFields?.gitToken || "";
-```
+Do not store a GitHub token in `docusaurus.config.js` or any other client-bundled config. Keep it in server-side environment variables and call GitHub from a backend endpoint instead.
 #### Error Handling
 **Rate Limit Exceeded (403)**