From b2b9b9afaa6ca3c84f55027fbe3e47dffa52afd4 Mon Sep 17 00:00:00 2001
From: Wreck <hemanthkrishnakumar@gmail.com>
Date: Wed, 5 Mar 2025 21:37:11 +0530
Subject: [PATCH] add useffect for storing auth-token in localstorage

---
 src/app/dashboard/dashboard.tsx        | 14 ++++++++
 src/app/page.tsx                       |  6 +++-
 src/services/authentication-service.ts | 47 ++++++++++++++++++++++++++
 3 files changed, 66 insertions(+), 1 deletion(-)
 create mode 100644 src/services/authentication-service.ts

diff --git a/src/app/dashboard/dashboard.tsx b/src/app/dashboard/dashboard.tsx
index 7450f4c..c58e23c 100644
--- a/src/app/dashboard/dashboard.tsx
+++ b/src/app/dashboard/dashboard.tsx
@@ -17,6 +17,7 @@ import {
 } from "chart.js";
 import { DashboardService } from "@/services/streak-service";
 import MemberDetails from "./[memberId]/page";
+import { AuthService } from "@/services/authentication-service";
 
 ChartJS.register(CategoryScale, LinearScale, BarElement, Title, Tooltip, Legend);
 
@@ -144,12 +145,25 @@ const Dashboard = () => {
             },
         ],
     };
+    
+    // Saving auth token for authentication.
+    useEffect(() => {
+        const urlParams = new URLSearchParams(window.location.search);
+        const token = urlParams.get("code");
+        if (token) {
+          AuthService.saveToken(token);
+          console.log("Saved ", token)
+          window.history.replaceState({}, document.title, "/dashboard"); // Clean URL
+        }
+      }, []);
 
     useEffect(() => {
         fetchAttendanceCount();
         fetchMemberSummary();
     }, [selectedDate]);
 
+
+      
     const formatDate = (date: Date): string => {
         const options: Intl.DateTimeFormatOptions = { month: "short", day: "numeric", year: "numeric" };
         return date.toLocaleDateString("en-US", options);
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 0c72c8a..53e0963 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,8 +1,12 @@
+"use client";
+
 import Image from "next/image";
 import logo from "../../public/amfoss-logo-white.png"
 import amfoss from "../../public/amfoss-footer-black@3x.png"
 import { Github } from 'lucide-react';
 import LampContainer from "../components/lamp"
+import { AuthService } from "@/services/authentication-service";
+
 
 export default function Home() {
   return (
@@ -18,7 +22,7 @@ export default function Home() {
         </div>
         <p className="absolute lg:top-[45vh] md:top-[35vh] sm:top-[42.5vh] left-[0vw] w-[100vw] animate-fadeInUp lg:text-[3vw] md:text-[6vw] sm:text-[7vw] text-white font-bold opacity-0" style={{ textAlign: "center" }}>India's Leading FOSS Club</p>
         <Image className="absolute animate-fadeInUp lg:max-w-[20vw] md:max-w-[40vw] sm:max-w-[43vw] lg:left-[40vw] md:left-[30vw] sm:left-[28vw] lg:top-[52.5vh] sm:top-[48.3vh] opacity-0" src={amfoss} alt="amfoss" />
-        <button className="absolute animate-fadeInUp text-center pt-1 pb-1 font-semibold lg:text-[2.5vh] md:text-3xl sm:text-xl text-black lg:w-[12vw] sm:w-[38vw] md:w-[28vw] bg-yellow-400 lg:rounded-[0.7rem] md:rounded-[0.5rem] sm:rounded-[1rem] lg:top-[70vh] md:top-[75vh] sm:top-[60vh] lg:left-[44vw] md:left-[36vw] sm:left-[33vw] opacity-0 flex items-center justify-center gap-4"><Github />Sign in</button>
+        <button onClick={() => AuthService.loginWithGitHub()} className="absolute animate-fadeInUp text-center pt-1 pb-1 font-semibold lg:text-[2.5vh] md:text-3xl sm:text-xl text-black lg:w-[12vw] sm:w-[38vw] md:w-[28vw] bg-yellow-400 lg:rounded-[0.7rem] md:rounded-[0.5rem] sm:rounded-[1rem] lg:top-[70vh] md:top-[75vh] sm:top-[60vh] lg:left-[44vw] md:left-[36vw] sm:left-[33vw] opacity-0 flex items-center justify-center gap-4"><Github />Sign in</button>
         </div>
       </div>
     </main>
diff --git a/src/services/authentication-service.ts b/src/services/authentication-service.ts
new file mode 100644
index 0000000..bdb4d13
--- /dev/null
+++ b/src/services/authentication-service.ts
@@ -0,0 +1,47 @@
+"use client";
+
+
+const CLIENT_ID = process.env.NEXT_PUBLIC_GITHUB_CLIENT_ID;
+const REDIRECT_URI = process.env.NEXT_PUBLIC_GITHUB_REDIRECT_URI;
+
+export const AuthService = {
+  /**
+   * Redirects user to GitHub login page for authentication.
+   */
+  loginWithGitHub() {
+    window.location.href = `http://github.com/login/oauth/authorize?client_id=${CLIENT_ID}&redirect_uri=${REDIRECT_URI}&scope=read:user`;
+  },
+
+
+  /**
+   * Stores the authentication token in local storage.
+   * @param {string} token - GitHub OAuth token.
+   */
+  saveToken(token: string) {
+    localStorage.setItem("github_token", token);
+  },
+
+  /**
+   * Retrieves the authentication token from local storage.
+   * @returns {string | null} - The stored token or null if not found.
+   */
+  getToken() {
+    return localStorage.getItem("github_token");
+  },
+
+  /**
+   * Removes the authentication token from local storage and logs out the user.
+   */
+  logout() {
+    localStorage.removeItem("github_token");
+    window.location.reload();
+  },
+
+  /**
+   * Checks if the user is authenticated by verifying if a token exists.
+   * @returns {boolean} - True if authenticated, false otherwise.
+   */
+  isAuthenticated() {
+    return Boolean(localStorage.getItem("github_token"));
+  },
+};