Feature/GitHubAuth Updated

Frontend/package.json

@@ -14,6 +14,7 @@
   },
   "dependencies": {
     "chart.js": "^4.5.1",
+    "firebase": "^12.12.0",
     "react": "^19.2.0",
     "react-chartjs-2": "^5.3.1",
     "react-dom": "^19.2.0",

Frontend/src/app/Router.jsx

@@ -1,16 +1,17 @@
 import { useRoutes } from 'react-router-dom';
 import { Home } from '../features/home/routes/Home';
 import { TeamStats } from '../features/team-stats/routes/TeamStats';
-//Navigation routes for app
+import Login from "../features/login/routes/Login";
 /*
     Current Routes:
     - '/': Home Page
     - '/team-stats': Team Statistics Page
 */
 export const AppRouter = () => {
   const routes = [
-    { path: '/', element: <Home /> },
-    { path: '/team-stats', element: <TeamStats /> },
+    { path: "/", element: <Home /> },
+    { path: "/team-stats", element: <TeamStats /> },
+    { path: "/login", element: <Login /> },
   ];
 
   const element = useRoutes(routes);

Frontend/src/components/NavBar.jsx

@@ -1,10 +1,24 @@
 import { Link } from "react-router-dom";
+import loginProfile from "./loginprofile.png";
+import { useEffect, useState } from "react";
+import { auth } from "../firebase";
+import { onAuthStateChanged } from "firebase/auth";
 
 export const Navbar = () => {
+  const [user, setUser] = useState(null);
+
+  useEffect(() => {
+    const unsubscribe = onAuthStateChanged(auth, (currentUser) => {
+      setUser(currentUser);
+    });
+
+    return () => unsubscribe(); 
+  }, []);
+
   return (
     <div style={styles.wrapper}>
       <nav style={styles.nav}>
-        <div style={styles.logoContainer}> {/* OSS logo*/}
+        <div style={styles.logoContainer}>
           <div style={styles.logoSmall}>
             Open
             <br />
@@ -15,26 +29,34 @@ export const Navbar = () => {
           <div style={styles.logoBig}>SLU</div>
         </div>
 
-        <ul style={styles.navLinks}> {/*Navigation links to components*/}
+        <ul style={styles.navLinks}>
           <li>
             <Link to="/" style={styles.link}>
               Home
             </Link>
           </li>
+
           <li>
             <Link to="/team-stats" style={styles.link}>
               Team
             </Link>
           </li>
-          <li>
+
+          <li style={{ textAlign: "center" }}>
+            <Link to="/login" style={styles.link}>
+              <img src={loginProfile} alt="Profile" style={styles.profileImg} />
+            </Link>
+
+            {/* text to say signed in */}
+            {user && <div style={styles.signedInText}>Signed in!</div>}
           </li>
         </ul>
       </nav>
     </div>
   );
 };
-/* Nav bar styling and customization*/
-const styles = { 
+
+const styles = {
   wrapper: {
     width: "100%",
     display: "flex",
@@ -50,7 +72,7 @@ const styles = {
     backgroundColor: "#123f8b",
     color: "white",
     borderRadius: "18px",
-    fontFamily: '"Times New Roman", Times, serif', 
+    fontFamily: '"Times New Roman", Times, serif',
   },
   logoContainer: {
     display: "flex",
@@ -74,9 +96,22 @@ const styles = {
     margin: 0,
     padding: 0,
     fontSize: "1.2rem",
+    alignItems: "center",
   },
   link: {
     color: "white",
     textDecoration: "none",
   },
+  profileImg: {
+    width: "40px",
+    height: "40px",
+    objectFit: "cover",
+    cursor: "pointer",
+  },
+  signedInText: {
+    fontSize: "12px",
+    marginTop: "5px",
+    color: "#A8D0FF",
+  },
 };
+

Frontend/src/features/login/routes/Login.jsx

@@ -0,0 +1,87 @@
+import { signInWithPopup, GithubAuthProvider } from "firebase/auth";
+import { auth } from "../../../firebase";
+import { useNavigate } from "react-router-dom";
+
+const provider = new GithubAuthProvider();
+
+const Login = () => {
+  const navigate = useNavigate();
+
+  const signInWithGitHub = async () => {
+    try {
+      const result = await signInWithPopup(auth, provider);
+
+      // User signed in successfully
+      const user = result.user;
+
+      // Safer logging
+      console.log("User ID:", user.uid);
+
+      // UPDATE: Redirects to Home 
+      navigate("/");
+    } catch (error) {
+      console.error("Error during sign-in:", error.message);
+      alert("Failed to sign in. Please try again.");
+    }
+  };
+
+  return (
+    <div style={styles.page}>
+      <div style={styles.card}>
+        <h1 style={styles.title}>GitHub Authentication</h1>
+
+        <p style={styles.subtitle}>
+          Click the button below to sign in with GitHub:
+        </p>
+
+        <button onClick={signInWithGitHub} style={styles.button}>
+          Sign in with GitHub
+        </button>
+      </div>
+    </div>
+  );
+};
+
+export default Login;
+
+const styles = {
+  page: {
+    height: "100vh",
+    display: "flex",
+    justifyContent: "center",
+    alignItems: "center",
+    backgroundColor: "#F3F5F9",
+    fontFamily: "Inter, sans-serif",
+  },
+
+  card: {
+    backgroundColor: "#E6EBF3",
+    padding: "50px 60px",
+    borderRadius: "18px",
+    boxShadow: "0 10px 30px rgba(0,0,0,0.08)",
+    textAlign: "center",
+    width: "380px",
+  },
+
+  title: {
+    color: "#1F4C8F",
+    marginBottom: "10px",
+    fontSize: "24px",
+  },
+
+  subtitle: {
+    color: "#5B6B84",
+    marginBottom: "30px",
+  },
+
+  button: {
+    backgroundColor: "#1F4C8F",
+    color: "white",
+    border: "none",
+    padding: "14px 22px",
+    fontSize: "16px",
+    borderRadius: "10px",
+    cursor: "pointer",
+    width: "100%",
+  },
+};

Frontend/src/firebase.js

@@ -0,0 +1,56 @@
+import { initializeApp } from "firebase/app";
+import {
+  getAuth,
+  GithubAuthProvider,
+  signInWithPopup,
+  onAuthStateChanged,
+  getRedirectResult,
+} from "firebase/auth";
+
+const firebaseConfig = {
+  apiKey: "AIzaSyBaXOvbOmPXBfdEnDl2sMLb1jqujGVoZok",
+  authDomain: "oss-dev-analytics.firebaseapp.com",
+  projectId: "oss-dev-analytics",
+  storageBucket: "oss-dev-analytics.firebasestorage.app",
+  messagingSenderId: "825783735077",
+  appId: "1:825783735077:web:c8d5a7a1adfd0934ebc0cc",
+  measurementId: "G-7YFXYWENQH",
+};
+
+// Initialize Firebase
+const app = initializeApp(firebaseConfig);
+const auth = getAuth(app);
+
+// GitHub provider
+const provider = new GithubAuthProvider();
+
+getRedirectResult(auth)
+  .then((result) => {
+    if (result) {
+      const user = result.user;
+      console.log("Redirect login success:", user);
+    }
+  })
+  .catch((error) => {
+    console.error("Redirect error:", error);
+  });
+
+export const signInWithGitHub = async () => {
+  try {
+    const result = await signInWithPopup(auth, provider);
+    console.log("User:", result.user);
+  } catch (error) {
+    console.error("GitHub Sign-in Error:", error.message);
+  }
+};
+
+// Auth state listener
+onAuthStateChanged(auth, (user) => {
+  if (user) {
+    console.log("User signed in:", user);
+  } else {
+    console.log("No user signed in");
+  }
+});
+
+export { auth, provider };

docs/Steps to implement Github Authentication- #172.md

@@ -0,0 +1,88 @@
+Steps to implement Github Authentication 
+
+Goals: 
+- Authenticate users using Github
+- Link authenticated users to their GitHub account
+- help support different access based on Tech lead versus Developer for future need
+
+
+Arcitechture:  
+- Frontend (React + Vite)  
+- Handles login redirects and login page 
+- Store session tokens securely  
+    Caches: 
+    - User profile (name, email, role)  
+    - GitHub username  
+
+Backend (API Server)  
+- Store user data
+- What is being cached:
+    {
+  uid,
+  displayName,
+  email,
+  photoURL
+}
+
+
+GitHub:  
+- Authenticaion provider for repository access 
+
+How it works: 
+- The user navigates to dashboard and if no valid session 
+- User navigates to Login page and clicks button in React
+- Firebase opens GitHub login popup
+- GitHub confirms identity
+- Firebase returns a user object to your app
+
+
+Step-by-step: 
+In Firebase Console:
+- Go to Authentication -> Sign-in method
+- Enable GitHub provider
+    - Add:
+        - GitHub Client ID
+        - GitHub Client Secret
+        - Configure GitHub OAuth App
+- In GitHub Developer Settings:
+    - Create a new OAuth App
+    - Set: Homepage URL: http://localhost:5173
+    - Get authorization callback URL
+    - Copy the Client ID and paste into the Firebase Github provider config
+- On the frontend add: 'const result = await signInWithPopup(auth, provider);' to open github OAuth popup and allow user to log into Github
+
+-  SDK setup 
+- Copy and paste the SDK setup and configuation from your project settings on the firebase website.
+Example: 
+// Import the functions you need from the SDKs you need
+import { initializeApp } from "firebase/app";
+import { getAnalytics } from "firebase/analytics";
+// TODO: Add SDKs for Firebase products that you want to use
+// https://firebase.google.com/docs/web/setup#available-libraries
+
+// Your web app's Firebase configuration
+// For Firebase JS SDK v7.20.0 and later, measurementId is optional
+const firebaseConfig = {
+  apiKey: "",
+  authDomain: "",
+  projectId: "",
+  storageBucket: "",
+  messagingSenderId: "",
+  appId: "",
+  measurementId: ""
+};
+
+// Initialize Firebase
+const app = initializeApp(firebaseConfig);
+const analytics = getAnalytics(app);
+
+
+Architecture:
+GitHub → Firebase Auth → React App → Local Storage (cache)
+
+Component overview:
+- Login.jsx → UI trigger
+- firebase.js → auth logic + state listener
+- Firebase Auth → session provider
+
+