Added a user profile and github token saving after logging in

backend/config/passportConfig.js

@@ -20,7 +20,8 @@ passport.use(
                 return done(null, {
                     id : user._id.toString(),
                     username: user.username,
-                    email: user.email
+                    email: user.email,
+                    token: user.token
                 });
             } catch (err) {
                 return done(err);

backend/models/User.js

@@ -16,18 +16,19 @@ const UserSchema = new mongoose.Schema({
     type: String,
     required: true,
   },
+  token: {
+    type: String,
+    unique: true,
+    sparse: true,
+  },
 });
 
 // ✅ FIXED: no next()
-UserSchema.pre('save', async function (next) {
-  if (!this.isModified('password')) return next();
-  try {
-      const salt = await bcrypt.genSalt(10);
-      this.password = await bcrypt.hash(this.password, salt);
-      next(); // Tells Mongoose hashing is done, save the document now
-  } catch (err) {
-    next(err); // Safely passes any encryption errors to the database handler
-  }
+UserSchema.pre("save", async function () {
+  if (!this.isModified("password")) return;
+
+  const salt = await bcrypt.genSalt(10);
+  this.password = await bcrypt.hash(this.password, salt);
 });
 
 // ✅ password comparison
@@ -36,3 +37,4 @@ UserSchema.methods.comparePassword = async function (enteredPassword) {
 };
 
 module.exports = mongoose.model("User", UserSchema);
+

backend/routes/auth.js

@@ -35,6 +35,24 @@ router.post("/login", validateRequest(loginSchema), passport.authenticate('local
     res.status(200).json( { message: 'Login successful', user: req.user } );
 });
 
+// Save GitHub token route
+router.post("/token", async (req, res) => {
+    if (!req.isAuthenticated()) {
+        return res.status(401).json({ message: 'Not authenticated' });
+    }
+    const { token } = req.body;
+    if (!token) {
+        return res.status(400).json({ message: 'Token is required' });
+    }
+    try {
+        await User.findByIdAndUpdate(req.user._id, { token });
+        req.user.token = token;
+        res.status(200).json({ success: true, message: 'Token saved successfully' });
+    } catch (err) {
+        res.status(500).json({ message: 'Error saving token', error: err.message });
+    }
+});
+
 // Logout route
 router.get("/logout", (req, res) => {
 

src/App.tsx

@@ -5,7 +5,7 @@ import ScrollProgressBar from "./components/ScrollProgressBar";
 import { Toaster } from "react-hot-toast";
 import Router from "./Routes/Router";
 
-const FULLSCREEN_ROUTES = ["/signup", "/login"];
+const FULLSCREEN_ROUTES = ["/signup", "/login", "/enterToken"];
 
 function App() {
   const location = useLocation();

src/Routes/Router.tsx

@@ -9,8 +9,10 @@ import Signup from "../pages/Signup/Signup.tsx";
 import Login from "../pages/Login/Login.tsx";
 import ContributorProfile from "../pages/ContributorProfile/ContributorProfile.tsx";
 import Home from "../pages/Home/Home.tsx";
-import Activity from "../pages/Activity.tsx"; 
-import PrivacyPolicy from "../pages/Privacy/PrivacyPolicy.tsx"; // ✅ Updated import path to match your new folder structure
+import Activity from "../pages/Activity.tsx";
+import PrivacyPolicy from "../pages/Privacy/PrivacyPolicy.tsx";
+import SetToken from "../components/SetToken.tsx";
+import Profile from "../pages/Profile/Profile.tsx";
 
 const Router = () => {
   return (
@@ -26,9 +28,9 @@ const Router = () => {
       <Route path="/contributors" element={<Contributors />} />
       <Route path="/contributor/:username" element={<ContributorProfile />} />
       <Route path="/activity" element={<Activity />} />
-
-      {/* Privacy Policy page route */}
       <Route path="/privacy" element={<PrivacyPolicy />} />
+      <Route path="/enterToken" element={<SetToken />} />
+      <Route path="/profile" element={<Profile />} />
     </Routes>
   );
 };

src/components/Navbar.tsx

@@ -1,16 +1,19 @@
 import { NavLink, Link } from "react-router-dom";
 import { useState, useContext } from "react";
 import { ThemeContext } from "../context/ThemeContext";
+import { UserContext } from "../context/UserContext";
 import { Moon, Sun, Menu, X, Github } from "lucide-react";
 
 const Navbar: React.FC = () => {
   const [isOpen, setIsOpen] = useState(false);
 
   const themeContext = useContext(ThemeContext);
+  const userContext = useContext(UserContext);
 
   if (!themeContext) return null;
 
   const { toggleTheme, mode } = themeContext;
+  const user = userContext?.user ?? null;
 
   const navLinkStyles = ({ isActive }: { isActive: boolean }) =>
     `px-4 py-2 rounded-xl text-sm lg:text-base font-semibold transition-all duration-300 ${
@@ -53,9 +56,15 @@ const Navbar: React.FC = () => {
             Contributors
           </NavLink>
 
-          <NavLink to="/login" className={navLinkStyles}>
-            Login
-          </NavLink>
+          {user ? (
+            <NavLink to="/profile" className={navLinkStyles}>
+              {user.username}
+            </NavLink>
+          ) : (
+            <NavLink to="/login" className={navLinkStyles}>
+              Login
+            </NavLink>
+          )}
 
           {/* Theme Toggle */}
           <button
@@ -131,13 +140,15 @@ const Navbar: React.FC = () => {
               Contributors
             </NavLink>
 
-            <NavLink
-              to="/login"
-              className={navLinkStyles}
-              onClick={closeMenu}
-            >
-              Login
-            </NavLink>
+            {user ? (
+              <NavLink to="/profile" className={navLinkStyles} onClick={closeMenu}>
+                {user.username}
+              </NavLink>
+            ) : (
+              <NavLink to="/login" className={navLinkStyles} onClick={closeMenu}>
+                Login
+              </NavLink>
+            )}
           </div>
         </div>
       )}

src/components/SetToken.tsx

@@ -0,0 +1,135 @@
+import React, { useState, useContext } from "react";
+import axios from "axios";
+import { useNavigate } from "react-router-dom";
+import { ThemeContext } from "../context/ThemeContext";
+import type { ThemeContextType } from "../context/ThemeContext";
+import { useUser } from "../context/UserContext";
+import { KeyIcon, Eye, EyeOff } from "lucide-react";
+
+const backendUrl = import.meta.env.VITE_BACKEND_URL;
+
+const SetToken: React.FC = () => {
+  const [token, setToken] = useState("");
+  const [message, setMessage] = useState("");
+  const [isLoading, setIsLoading] = useState(false);
+  const [showToken, setShowToken] = useState(false);
+  const navigate = useNavigate();
+  const themeContext = useContext(ThemeContext) as ThemeContextType;
+  const { mode } = themeContext;
+  const { updateToken } = useUser();
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setIsLoading(true);
+    try {
+      const response = await axios.post(
+        `${backendUrl}/api/auth/token`,
+        { token },
+        { withCredentials: true }
+      );
+      if (response.data.success) {
+        updateToken(token);
+        navigate("/");
+      }
+    } catch {
+      setMessage("Failed to save token. Make sure you are logged in.");
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  return (
+    <div
+      className={`min-h-screen h-full w-full flex items-center justify-center relative overflow-hidden ${
+        mode === "dark"
+          ? "bg-gradient-to-br from-slate-900 via-purple-900 to-slate-900"
+          : "bg-gradient-to-br from-slate-100 via-purple-100 to-slate-100"
+      }`}
+    >
+      <div className="absolute inset-0">
+        <div className={`absolute -top-40 -right-40 w-96 h-96 ${mode === "dark" ? "bg-purple-500" : "bg-purple-300"} rounded-full blur-3xl opacity-30 animate-pulse`} />
+        <div className={`absolute -bottom-40 -left-40 w-96 h-96 ${mode === "dark" ? "bg-blue-500" : "bg-blue-300"} rounded-full blur-3xl opacity-30 animate-pulse`} />
+      </div>
+
+      <div className="relative w-full max-w-md px-4 sm:px-6">
+        <div className="text-center mb-10">
+          <div className="inline-flex items-center justify-center w-20 h-20 bg-white rounded-3xl mb-6 shadow-2xl">
+            <KeyIcon className="w-10 h-10 text-purple-600" />
+          </div>
+          <h1 className={`text-3xl font-bold bg-clip-text text-transparent mb-2 ${mode === "dark" ? "bg-gradient-to-r from-purple-300 via-pink-300 to-indigo-300" : "bg-gradient-to-r from-purple-600 via-pink-600 to-indigo-600"}`}>
+            GitHub Token
+          </h1>
+          <p className={`${mode === "dark" ? "text-slate-300" : "text-gray-700"} text-base`}>
+            Enter your Personal Access Token to get started
+          </p>
+        </div>
+
+        <div className={`rounded-3xl p-6 sm:p-10 shadow-2xl border ${mode === "dark" ? "bg-white/10 backdrop-blur-xl border-white/20 text-white" : "bg-white border-gray-200 text-black"}`}>
+          <form onSubmit={handleSubmit} className="space-y-6">
+            <div>
+              <div className="relative">
+                <input
+                  type={showToken ? "text" : "password"}
+                  placeholder="ghp_xxxxxxxxxxxxxxxxxxxx"
+                  value={token}
+                  onChange={(e) => setToken(e.target.value)}
+                  required
+                  className={`w-full pl-4 pr-12 py-4 rounded-2xl focus:outline-none transition-all ${
+                    mode === "dark"
+                      ? "bg-white/5 border border-white/10 text-white placeholder-slate-400 focus:ring-2 focus:ring-purple-500"
+                      : "bg-gray-100 border border-gray-300 text-gray-900 placeholder-gray-500 focus:ring-2 focus:ring-purple-400"
+                  }`}
+                />
+                <button
+                  type="button"
+                  onClick={() => setShowToken((v) => !v)}
+                  className={`absolute right-3 top-1/2 -translate-y-1/2 p-1 rounded-lg transition-colors ${
+                    mode === "dark" ? "text-slate-400 hover:text-white" : "text-gray-400 hover:text-gray-700"
+                  }`}
+                  aria-label={showToken ? "Hide token" : "Show token"}
+                >
+                  {showToken ? <EyeOff className="w-5 h-5" /> : <Eye className="w-5 h-5" />}
+                </button>
+              </div>
+              <p className={`mt-2 text-xs ${mode === "dark" ? "text-slate-400" : "text-gray-500"}`}>
+                <a
+                  href="https://github.com/settings/tokens/new"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="text-purple-400 hover:underline"
+                >
+                  Generate a new token
+                </a>
+                {" "}with <code>repo</code> and <code>read:user</code> scopes.
+              </p>
+            </div>
+
+            <button
+              type="submit"
+              disabled={isLoading}
+              className="w-full bg-gradient-to-r from-purple-600 via-pink-600 to-indigo-600 text-white py-4 px-6 rounded-2xl font-semibold transition-all duration-300 hover:scale-[1.02] hover:shadow-xl disabled:opacity-50 disabled:cursor-not-allowed"
+            >
+              {isLoading ? "Saving..." : "Save Token"}
+            </button>
+
+            <button
+              type="button"
+              onClick={() => navigate("/")}
+              className={`w-full py-3 px-6 rounded-2xl font-medium transition-all ${mode === "dark" ? "text-slate-400 hover:text-white" : "text-gray-500 hover:text-gray-800"}`}
+            >
+              Skip for now
+            </button>
+          </form>
+
+          {message && (
+            <div className="mt-4 p-4 rounded-2xl text-center text-sm font-medium bg-red-500/20 text-red-300 border border-red-500/30">
+              {message}
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default SetToken;

src/context/UserContext.tsx

@@ -0,0 +1,40 @@
+import React, { createContext, useContext, useState } from "react";
+
+export interface UserData {
+  _id: string;
+  username: string;
+  email: string;
+  token?: string;
+}
+
+interface UserContextType {
+  user: UserData | null;
+  setUser: (user: UserData | null) => void;
+  updateToken: (token: string) => void;
+}
+
+export const UserContext = createContext<UserContextType | null>(null);
+
+export const useUser = () => {
+  const ctx = useContext(UserContext);
+  if (!ctx) throw new Error("useUser must be used within UserProvider");
+  return ctx;
+};
+
+const UserProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
+  const [user, setUserState] = useState<UserData | null>(null);
+
+  const setUser = (u: UserData | null) => setUserState(u);
+
+  const updateToken = (token: string) => {
+    setUserState((prev) => (prev ? { ...prev, token } : prev));
+  };
+
+  return (
+    <UserContext.Provider value={{ user, setUser, updateToken }}>
+      {children}
+    </UserContext.Provider>
+  );
+};
+
+export default UserProvider;

src/main.tsx

@@ -4,13 +4,16 @@ import App from "./App.tsx";
 import "./index.css";
 import { BrowserRouter } from "react-router-dom";
 import ThemeWrapper from "./context/ThemeContext.tsx";
+import UserProvider from "./context/UserContext.tsx";
 
 createRoot(document.getElementById("root")!).render(
   <StrictMode>
-    <ThemeWrapper>
-    <BrowserRouter>
-      <App />
-    </BrowserRouter>
-    </ThemeWrapper>
+    <UserProvider>
+      <ThemeWrapper>
+        <BrowserRouter>
+          <App />
+        </BrowserRouter>
+      </ThemeWrapper>
+    </UserProvider>
   </StrictMode>
 );