Merge pull request #98 from CS3219-AY2425S1/feat/add-oauth

add oauth

Author: Kurtyjlee

docker-compose.yml

@@ -48,8 +48,8 @@ services:
       dockerfile: Dockerfile
       target: development
     volumes:
-      - ./user-service:/app
-      - ./user-service/node_modules:/app/node_modules
+      - ./user-service:/usr/src/app
+      - /usr/src/app/node_modules
     ports:
       - "3001:3001"
     networks:

peerprep-fe/src/app/oauth/callback/page.tsx

@@ -0,0 +1,64 @@
+'use client';
+import { Suspense, useEffect } from 'react';
+import { LoadingSpinner } from '@/components/ui/loading';
+import { useRouter, useSearchParams } from 'next/navigation';
+import { useAuthStore } from '@/state/useAuthStore';
+import { handleOAuthCallback } from '@/lib/oauth';
+
+// Separate the component that uses useSearchParams
+function CallbackHandler() {
+  const router = useRouter();
+  const searchParams = useSearchParams();
+  const setAuth = useAuthStore((state) => state.setAuth);
+
+  useEffect(() => {
+    const code = searchParams.get('code');
+
+    if (!code) {
+      router.push('/signin?error=no_token');
+      return;
+    }
+
+    handleOAuthCallback('github', code, setAuth)
+      .then((isSuccess) => {
+        if (!isSuccess) {
+          router.push('/signin?error=auth_failed');
+          return;
+        }
+        router.push('/');
+      })
+      .catch(() => {
+        router.push('/signin?error=auth_failed');
+      });
+  }, [router, searchParams, setAuth]);
+
+  return (
+    <div className="text-center text-white">
+      <LoadingSpinner />
+      <h2 className="mt-4 text-xl font-semibold">
+        Processing authentication...
+      </h2>
+      <p className="text-gray-400">
+        Please wait while we complete your sign-in.
+      </p>
+    </div>
+  );
+}
+
+// Main component wrapped with Suspense
+export default function OAuthCallback() {
+  return (
+    <div className="flex min-h-screen items-center justify-center bg-gray-900">
+      <Suspense
+        fallback={
+          <div className="text-center text-white">
+            <LoadingSpinner />
+            <p>Loading...</p>
+          </div>
+        }
+      >
+        <CallbackHandler />
+      </Suspense>
+    </div>
+  );
+}

peerprep-fe/src/app/signin/page.tsx

@@ -1,23 +1,36 @@
 'use client';
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import { Button } from '@/components/ui/button';
 import { Checkbox } from '@/components/ui/checkbox';
 import { Input } from '@/components/ui/input';
 import Link from 'next/link';
 import { GithubIcon } from 'lucide-react';
-import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';
+import { Alert, AlertDescription } from '@/components/ui/alert';
 import { axiosClient } from '@/network/axiosClient';
 import { login } from '@/lib/auth';
 import { useRouter } from 'next/navigation';
 import { useAuthStore } from '@/state/useAuthStore';
+import { initiateOAuth } from '@/lib/oauth';
 
-export default function LoginForm() {
+// Add Props type for the page
+type Props = {
+  searchParams: { [key: string]: string | string[] | undefined };
+};
+
+export default function LoginForm({ searchParams }: Props) {
   const [email, setEmail] = useState('');
   const [password, setPassword] = useState('');
   const [error, setError] = useState('');
   const router = useRouter();
   const setAuth = useAuthStore((state) => state.setAuth);
 
+  useEffect(() => {
+    const error = searchParams?.error;
+    if (error) {
+      setError('email or username already exists');
+    }
+  }, [searchParams]);
+
   // handle login here
   const handleLogin = async (e: React.FormEvent) => {
     e.preventDefault();
@@ -40,12 +53,15 @@ export default function LoginForm() {
     setError(data.error || 'Please provide correct email and password');
   };
 
+  const handleGithubLogin = () => {
+    initiateOAuth('github');
+  };
+
   return (
     <div className="flex min-h-screen items-center justify-center bg-gray-900">
       <div className="w-full max-w-md space-y-6 rounded-lg bg-gray-800 p-8 shadow-xl">
         {error && (
           <Alert variant="destructive" className="mb-4">
-            <AlertTitle>Error</AlertTitle>
             <AlertDescription>{error}</AlertDescription>
           </Alert>
         )}
@@ -100,32 +116,21 @@ export default function LoginForm() {
             </span>
           </div>
         </div>
-        <div className="grid grid-cols-2 gap-3">
+        <div className="flex w-full justify-center gap-3">
           <Button
             variant="outline"
             className="rounded-md border border-gray-600 bg-gray-700 py-2 text-sm font-medium text-white hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-gray-800"
+            onClick={handleGithubLogin}
           >
             <GithubIcon className="mr-2 h-5 w-5" />
             GitHub
           </Button>
-          <Button
-            variant="outline"
-            className="rounded-md border border-gray-600 bg-gray-700 py-2 text-sm font-medium text-white hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-gray-800"
-          >
-            <svg className="mr-2 h-5 w-5" viewBox="0 0 24 24">
-              <path
-                fill="currentColor"
-                d="M12.545,10.239v3.821h5.445c-0.712,2.315-2.647,3.972-5.445,3.972c-3.332,0-6.033-2.701-6.033-6.032s2.701-6.032,6.033-6.032c1.498,0,2.866,0.549,3.921,1.453l2.814-2.814C17.503,2.988,15.139,2,12.545,2C7.021,2,2.543,6.477,2.543,12s4.478,10,10.002,10c8.396,0,10.249-7.85,9.426-11.748L12.545,10.239z"
-              />
-            </svg>
-            Google
-          </Button>
         </div>
         <div className="flex justify-center text-center text-sm text-gray-400">
           Do not have an account?
           <span className="mx-1" />
           <Link href="/signup" className="text-blue-500 hover:underline">
-            Sign up
+            Sign up with email
           </Link>
         </div>
       </div>

peerprep-fe/src/app/signup/page.tsx

@@ -3,7 +3,6 @@ import { useState } from 'react';
 import { Button } from '@/components/ui/button';
 import { Checkbox } from '@/components/ui/checkbox';
 import { Input } from '@/components/ui/input';
-import { GithubIcon } from 'lucide-react';
 import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';
 import { axiosClient } from '@/network/axiosClient';
 import { useRouter } from 'next/navigation';
@@ -131,37 +130,6 @@ export default function SignUpPage() {
             Sign up
           </Button>
         </form>
-        <div className="relative">
-          <div className="absolute inset-0 flex items-center">
-            <div className="w-full border-t border-gray-600"></div>
-          </div>
-          <div className="relative flex justify-center text-sm">
-            <span className="bg-gray-800 px-2 text-gray-400">
-              Or continue with
-            </span>
-          </div>
-        </div>
-        <div className="grid grid-cols-2 gap-3">
-          <Button
-            variant="outline"
-            className="rounded-md border border-gray-600 bg-gray-700 py-2 text-sm font-medium text-white hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-gray-800"
-          >
-            <GithubIcon className="mr-2 h-5 w-5" />
-            GitHub
-          </Button>
-          <Button
-            variant="outline"
-            className="rounded-md border border-gray-600 bg-gray-700 py-2 text-sm font-medium text-white hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-gray-800"
-          >
-            <svg className="mr-2 h-5 w-5" viewBox="0 0 24 24">
-              <path
-                fill="currentColor"
-                d="M12.545,10.239v3.821h5.445c-0.712,2.315-2.647,3.972-5.445,3.972c-3.332,0-6.033-2.701-6.033-6.032s2.701-6.032,6.033-6.032c1.498,0,2.866,0.549,3.921,1.453l2.814-2.814C17.503,2.988,15.139,2,12.545,2C7.021,2,2.543,6.477,2.543,12s4.478,10,10.002,10c8.396,0,10.249-7.85,9.426-11.748L12.545,10.239z"
-              />
-            </svg>
-            Google
-          </Button>
-        </div>
       </div>
     </div>
   );

peerprep-fe/src/components/ui/loading.tsx

@@ -0,0 +1,7 @@
+export function LoadingSpinner() {
+  return (
+    <div className="flex items-center justify-center">
+      <div className="h-8 w-8 animate-spin rounded-full border-4 border-gray-300 border-t-blue-600"></div>
+    </div>
+  );
+}

peerprep-fe/src/lib/oauth.ts

@@ -0,0 +1,44 @@
+import { axiosClient } from '@/network/axiosClient';
+import { login } from '@/lib/auth';
+import { User } from '@/types/types';
+
+export type OAuthProvider = 'github';
+
+// Extend for other providers
+export const oAuthConfig = {
+  github: {
+    authorizeUrl: 'https://github.com/login/oauth/authorize',
+    clientId: process.env.NEXT_PUBLIC_GITHUB_CLIENT_ID!,
+    scope: 'user:email',
+  },
+};
+
+export const initiateOAuth = (provider: OAuthProvider) => {
+  const config = oAuthConfig[provider];
+  const authUrl =
+    `${config.authorizeUrl}?` +
+    new URLSearchParams({
+      client_id: config.clientId,
+      scope: config.scope,
+    }).toString();
+  window.location.href = authUrl;
+};
+
+export const handleOAuthCallback = async (
+  provider: OAuthProvider,
+  code: string,
+  setAuth: (isAuth: boolean, token: string | null, user: User | null) => void,
+): Promise<boolean> => {
+  try {
+    const res = await login(code);
+    if (!res) return false;
+
+    const { data } = await axiosClient.get(
+      `auth/${provider}/callback?code=${code}`,
+    );
+    setAuth(true, data.data.token, data.data.user);
+    return true;
+  } catch {
+    return false;
+  }
+};

peerprep-fe/src/middleware.ts

@@ -54,6 +54,6 @@ export const config = {
      * - favicon.ico (favicon file)
      */
 
-    '/((?!signin|_next/static|_next/image|$|signup|.*\\.png$).*)',
+    '/((?!signin|_next/static|_next/image|$|signup|oauth*|.*\\.png$).*)',
   ],
 };

user-service/controller/oauth-controller.js

@@ -0,0 +1,88 @@
+import jwt from 'jsonwebtoken';
+import { findUserByUsernameOrEmail, createUser } from '../model/repository.js';
+
+export async function handleGithubCallback(req, res) {
+  const { code } = req.query;
+
+  try {
+    // Exchange code for access token for user data
+    const tokenResponse = await fetch(
+      'https://github.com/login/oauth/access_token',
+      {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+          Accept: 'application/json',
+        },
+        body: JSON.stringify({
+          client_id: process.env.GITHUB_CLIENT_ID,
+          client_secret: process.env.GITHUB_CLIENT_SECRET,
+          code,
+        }),
+      },
+    );
+
+    const tokenResponseData = await tokenResponse.json();
+
+    const { access_token } = tokenResponseData;
+
+    // Get user data and emails from GitHub
+    const [githubUser, userEmailData] = await Promise.all([
+      fetch('https://api.github.com/user', {
+        headers: {
+          Authorization: `Bearer ${access_token}`,
+        },
+      }).then((res) => res.json()),
+      // necessary to get user's private email, public email is not always available
+      fetch('https://api.github.com/user/emails', {
+        headers: {
+          Authorization: `Bearer ${access_token}`,
+        },
+      }).then((res) => res.json()),
+    ]);
+
+    if (!githubUser.email && !userEmailData.length) {
+      res.status(400).json({ error: 'No email found' });
+      return;
+    }
+
+    const userEmail =
+      githubUser.email || userEmailData.find((email) => email.primary).email;
+
+    if (!githubUser.login || !userEmail) {
+      res.status(400).json({ error: 'Invalid user data' });
+      return;
+    }
+
+    // Find or create user
+    let user = await findUserByUsernameOrEmail(githubUser.login, userEmail);
+    if (!user) {
+      try {
+        user = await createUser(
+          githubUser.login,
+          userEmail,
+          Math.random().toString(36), // temporary password
+        );
+      } catch (error) {
+        console.error('Error creating user:', error);
+        res.status(500).json({
+          error: 'Failed to create user due to duplicate email or username',
+        });
+        return;
+      }
+    }
+
+    // Generate JWT token
+    const token = jwt.sign({ id: user.id }, process.env.JWT_SECRET, {
+      expiresIn: '5d',
+    });
+
+    // Redirect to frontend with token
+    res.status(200).json({ data: { token: token, user: user } });
+  } catch (error) {
+    console.error('GitHub OAuth error:', error);
+    res.status(500).json({ error: 'OAuth failed' });
+  }
+}
+
+// Similar implementation for Google OAuth

user-service/routes/auth-routes.js

@@ -3,6 +3,7 @@ import {
   handleLogin,
   handleVerifyToken,
 } from '../controller/auth-controller.js';
+import { handleGithubCallback } from '../controller/oauth-controller.js';
 import { verifyAccessToken } from '../middleware/basic-access-control.js';
 
 const router = express.Router();
@@ -11,4 +12,6 @@ router.post('/login', handleLogin);
 
 router.get('/verify-token', verifyAccessToken, handleVerifyToken);
 
+router.get('/github/callback', handleGithubCallback);
+
 export default router;