[FEAT] : Add Sign-In with Github

backend/config/passportConfig.js

@@ -1,6 +1,8 @@
 const passport = require("passport");
 const LocalStrategy = require('passport-local').Strategy;
 const User = require("../models/User");
+const GitHubStrategy = require('passport-github2').Strategy;
+
 
 passport.use(
     new LocalStrategy(
@@ -29,6 +31,16 @@ passport.use(
     )
 );
 
+passport.use(new GitHubStrategy({
+    clientID: process.env.GITHUB_CLIENT_ID,
+    clientSecret: process.env.GITHUB_CLIENT_SECRET,
+    callbackURL: process.env.GITHUB_CALLBACK_URL,
+  },
+  function(accessToken, refreshToken, profile, cb) {
+    return cb(null, profile);
+  }
+));
+
 // Serialize user (store user info in session)
 passport.serializeUser((user, done) => {
     done(null, user.id);

backend/package.json

@@ -19,6 +19,7 @@
     "express-session": "^1.18.1",
     "mongoose": "^8.8.2",
     "passport": "^0.7.0",
+    "passport-github2": "^0.1.12",
     "passport-local": "^1.0.0"
   },
   "devDependencies": {

backend/routes/auth.js

@@ -39,4 +39,18 @@ router.get("/logout", (req, res) => {
     });
 });
 
+// Sign-in with Github routes
+router.get('/github', passport.authenticate('github', { scope: ['user:email'] }));
+
+router.get('/github/callback', 
+  passport.authenticate('github', { failureRedirect: 'api/auth/github/error' }),
+  (req, res) => {
+    res.redirect(`${process.env.CORS_ORIGIN}/home`);
+  }
+);
+
+router.get('/github/error', (req, res) => {
+  res.redirect(`${process.env.CORS_ORIGIN}/login`);
+});
+
 module.exports = router;

src/App.tsx

@@ -16,7 +16,7 @@ function App() {
         <Navbar />
 
         {/* Main content */}
-        <main className="flex-grow bg-gray-50 flex justify-center items-center">
+        <main className="flex-grow bg-gray-50 flex justify-center items-center p-2">
           <Router/>
         </main>
 

src/Routes/Login/Login.tsx

@@ -1,6 +1,7 @@
 import React, { useState, ChangeEvent, FormEvent } from "react";
 import axios from "axios";
-import { useNavigate } from "react-router-dom"; // Import the hook for navigation
+import { useNavigate, Link } from "react-router-dom"; // Import the hook for navigation
+import GithubIcon from "@mui/icons-material/GitHub";
 
 const backendUrl = import.meta.env.VITE_BACKEND_URL;
 interface LoginFormData {
@@ -37,8 +38,12 @@ const Login: React.FC = () => {
     }
   };
 
+  const handleGithubLogin = async () => {
+    window.location.href = `${import.meta.env.VITE_API_URL}/auth/github`;
+  };
+
   return (
-    <div className="max-w-md mt-12 mx-auto bg-white p-8 rounded-lg shadow-md">
+    <div className="w-[400px] max-w-screen-xl mx-auto bg-white p-8 rounded-lg shadow-md">
       <h2 className="text-2xl font-semibold text-center mb-6">Login</h2>
       <form onSubmit={handleSubmit} className="space-y-4">
         <div>
@@ -70,6 +75,20 @@ const Login: React.FC = () => {
           Login
         </button>
       </form>
+      <button
+        onClick={handleGithubLogin}
+        className="w-full flex items-center justify-center bg-gray-800 text-white py-3 rounded-md hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-gray-500 my-4"
+      >
+        <GithubIcon className="mr-4"/>Login with GitHub
+      </button>
+      <div className="text-center">
+        <p className="text-sm text-gray-600">
+          Don't have an account?{" "}
+          <Link to="/signup" className="text-blue-500 hover:text-blue-600">
+            Sign up
+          </Link>
+        </p>
+      </div>
       {message && <p className="text-center text-red-500 mt-4">{message}</p>}
     </div>
   );

src/Routes/Signup/Signup.tsx

@@ -1,6 +1,6 @@
 import React, { useState, ChangeEvent, FormEvent } from "react";
 import axios from "axios";
-import { useNavigate } from "react-router-dom";
+import { useNavigate, Link } from "react-router-dom";
 
 const backendUrl = import.meta.env.VITE_BACKEND_URL;
 interface SignUpFormData {
@@ -39,7 +39,7 @@ const SignUp: React.FC = () => {
   };
 
   return (
-    <div className="mt-12 max-w-md mx-auto bg-white p-8 rounded-lg shadow-md">
+    <div className="w-[400px] mt-12 max-w-md mx-auto bg-white p-8 rounded-lg shadow-md">
       <h2 className="text-2xl font-semibold text-center mb-6">Sign Up</h2>
       <form onSubmit={handleSubmit} className="space-y-4">
         <div>
@@ -82,6 +82,14 @@ const SignUp: React.FC = () => {
           Sign Up
         </button>
       </form>
+      <div className="text-center mt-4">
+        <p className="text-sm text-gray-600">
+          Already a member?{" "}
+          <Link to="/login" className="text-blue-500 hover:text-blue-600">
+            Login
+          </Link>
+        </p>
+      </div>
       {message && <p className="text-center text-red-500 mt-4">{message}</p>}
     </div>
   );