Merge pull request code100x#43 from TanmayDhobale/auth

feat: Implement Google, GitHub, and Facebook Authentication with an passport.js code100x#39

Author: hkirat

apps/backend/.env.example

@@ -0,0 +1,6 @@
+GOOGLE_CLIENT_ID=your_google_client_id
+GOOGLE_CLIENT_SECRET=your_google_client_secret
+GITHUB_CLIENT_ID=your_github_client_id
+GITHUB_CLIENT_SECRET=your_github_client_secret
+FACEBOOK_APP_ID=your_facebook_app_id
+FACEBOOK_APP_SECRET=your_facebook_app_secret

apps/backend/package.json

@@ -14,5 +14,9 @@
   "dependencies": {
     "@types/express": "^4.17.21",
     "express": "^4.19.2"
+  },
+  "devDependencies": {
+    "@types/jsonwebtoken": "^9.0.6",
+    "@types/passport": "^1.0.16"
   }
 }

apps/backend/src/index.ts

@@ -1,6 +1,39 @@
-import express from "express"
+import express from "express";
 import v1Router from "./router/v1";
+const cookieSession = require("cookie-session");
+const cors = require("cors");
+const passportSetup = require("./passport");
+const passport = require("passport");
+import authRoute from "./router/auth";
+import dotenv from "dotenv";
 
 const app = express();
 
-app.use("/v1", v1Router);
+dotenv.config();
+
+app.use(
+  cookieSession({
+    name: "session",
+    keys: ["lama"],
+    maxAge: 24 * 60 * 60 * 100,
+  })
+);
+
+app.use(passport.initialize());
+app.use(passport.session());
+
+app.use(
+  cors({
+    origin: "http://localhost:5173/",
+    methods: "GET,POST,PUT,DELETE",
+    credentials: true,
+  })
+);
+
+app.use("/auth", authRoute);
+app.use("/v1", v1Router);
+
+const PORT = process.env.PORT || 5173;
+app.listen(PORT, () => {
+  console.log(`Server is running on port ${PORT}`);
+});

apps/backend/src/passport.ts

@@ -0,0 +1,64 @@
+const GoogleStrategy = require("passport-google-oauth20").Strategy;
+const GithubStrategy = require("passport-github2").Strategy;
+const FacebookStrategy = require("passport-facebook").Strategy;
+import passport from "passport";
+import dotenv from "dotenv";
+
+dotenv.config();
+
+const GOOGLE_CLIENT_ID = process.env.GOOGLE_CLIENT_ID || "your_google_client_id";
+const GOOGLE_CLIENT_SECRET = process.env.GOOGLE_CLIENT_SECRET || "your_google_client_secret";
+const GITHUB_CLIENT_ID = process.env.GITHUB_CLIENT_ID || "your_github_client_id";
+const GITHUB_CLIENT_SECRET = process.env.GITHUB_CLIENT_SECRET || "your_github_client_secret";
+const FACEBOOK_APP_ID = process.env.FACEBOOK_APP_ID || "your_facebook_app_id";
+const FACEBOOK_APP_SECRET = process.env.FACEBOOK_APP_SECRET || "your_facebook_app_secret";
+
+if (!GOOGLE_CLIENT_ID || !GOOGLE_CLIENT_SECRET || !GITHUB_CLIENT_ID || !GITHUB_CLIENT_SECRET || !FACEBOOK_APP_ID || !FACEBOOK_APP_SECRET) {
+  throw new Error('Missing environment variables for authentication providers');
+}
+passport.use(
+  new GoogleStrategy(
+    {
+      clientID: GOOGLE_CLIENT_ID,
+      clientSecret: GOOGLE_CLIENT_SECRET,
+      callbackURL: "/auth/google/callback",
+    },
+    function (accessToken: string, refreshToken: string, profile: any, done: (error: any, user?: any) => void) {
+      done(null, profile);
+    }
+  )
+);
+
+passport.use(
+  new GithubStrategy(
+    {
+      clientID: GITHUB_CLIENT_ID,
+      clientSecret: GITHUB_CLIENT_SECRET,
+      callbackURL: "/auth/github/callback",
+    },
+    function (accessToken: string, refreshToken: string, profile: any, done: (error: any, user?: any) => void) {
+      done(null, profile);
+    }
+  )
+);
+
+passport.use(
+  new FacebookStrategy(
+    {
+      clientID: FACEBOOK_APP_ID,
+      clientSecret: FACEBOOK_APP_SECRET,
+      callbackURL: "/auth/facebook/callback",
+    },
+    function (accessToken: string, refreshToken: string, profile: any, done: (error: any, user?: any) => void) {
+      done(null, profile);
+    }
+  )
+);
+
+passport.serializeUser((user: any, done: (error: any, id?: any) => void) => {
+  done(null, user);
+});
+
+passport.deserializeUser((user: any, done: (error: any, user?: any) => void) => {
+  done(null, user);
+});

apps/backend/src/router/auth.ts

@@ -0,0 +1,61 @@
+import { Request, Response, Router } from 'express';
+const router = Router();
+const passport = require('passport');
+import jwt from 'jsonwebtoken';
+
+const CLIENT_URL = 'http://localhost:5173/game';
+const JWT_SECRET = process.env.JWT_SECRET || 'your_secret_key';
+
+interface User {
+  _id: string;
+}
+
+router.get('/login/success', (req: Request, res: Response) => {
+  if (req.user) {
+    const user = req.user as User;
+    const token = jwt.sign({ userId: user._id }, JWT_SECRET);
+    res.cookie('jwt', token, { httpOnly: true, sameSite: 'strict' });
+    res.status(200).json({ success: true, message: 'successful' });
+  } else {
+    res.status(401).json({ success: false, message: 'Unauthorized' });
+  }
+});
+
+router.get('/login/failed', (req: Request, res: Response) => {
+  res.status(401).json({ success: false, message: 'failure' });
+});
+
+router.get('/logout', (req: Request, res: Response) => {
+  req.logout((err) => {
+    if (err) {
+      console.error('Error logging out:', err);
+      res.status(500).json({ error: 'Failed to log out' });
+    } else {
+      res.clearCookie('jwt');
+      res.redirect('http://localhost:5173/');
+    }
+  });
+});
+
+router.get('/google', passport.authenticate('google', { scope: ['profile'] }));
+
+router.get('/google/callback', passport.authenticate('google', {
+  successRedirect: CLIENT_URL,
+  failureRedirect: '/login/failed',
+}));
+
+router.get('/github', passport.authenticate('github', { scope: ['profile'] }));
+
+router.get('/github/callback', passport.authenticate('github', {
+  successRedirect: CLIENT_URL,
+  failureRedirect: '/login/failed',
+}));
+
+router.get('/facebook', passport.authenticate('facebook', { scope: ['profile'] }));
+
+router.get('/facebook/callback', passport.authenticate('facebook', {
+  successRedirect: CLIENT_URL,
+  failureRedirect: '/login/failed',
+}));
+
+export default router;

apps/backend/tsconfig.json

@@ -8,5 +8,12 @@
     "forceConsistentCasingInFileNames": true,
     "strict": true,                          
     "skipLibCheck": true
-  }
+
+  },
+  "include": [
+  "src/**/*",
+  "routes/**/*",
+  "**/*.js"
+],
+"outDir": "dist" 
 }

apps/frontend/src/App.tsx

@@ -1,19 +1,49 @@
-import './App.css'
-import { BrowserRouter, Route, Routes } from "react-router-dom";
+import './App.css';
+import { BrowserRouter, Route, Routes } from 'react-router-dom';
 import { Landing } from './screens/Landing';
 import { Game } from './screens/Game';
+import Login from './screens/Login';
+import { useEffect, useState } from 'react';
 
 function App() {
+  const [isAuthenticated, setIsAuthenticated] = useState<boolean>(false);
+
+  useEffect(() => {
+    const fetchToken = async () => {
+      try {
+        const response = await fetch('http://localhost:5173/auth/login/success', {
+          method: 'GET',
+          credentials: 'include',
+          headers: {
+            Accept: 'application/json',
+            'Content-Type': 'application/json',
+          },
+        });
+
+        if (response.ok) {
+          setIsAuthenticated(true);
+        } else {
+          throw new Error('Authentication failed');
+        }
+      } catch (err) {
+        console.error(err);
+      }
+    };
+
+    fetchToken();
+  }, []);
+
   return (
-    <div className='h-screen bg-slate-950'>
-     <BrowserRouter>
-      <Routes>
-        <Route path="/" element={<Landing />} /> 
-        <Route path="/game" element={<Game />} /> 
-      </Routes>
-    </BrowserRouter>
+    <div className="h-screen bg-slate-950">
+      <BrowserRouter>
+        <Routes>
+          <Route path="/" element={<Landing />} />
+          <Route path="/login" element={isAuthenticated ? <Game /> : <Login />} />
+          <Route path="/game" element={isAuthenticated ? <Game /> : <Login />} />
+        </Routes>
+      </BrowserRouter>
     </div>
-  )
+  );
 }
 
-export default App
+export default App;