Merge pull request #82 from CS3219-AY2425S1/bug-fix

Bug fix for route protection

docker-compose.yaml

@@ -7,6 +7,7 @@ services:
       - "3000:3000"
     environment:
       - NODE_ENV=production
+      - NEXT_PUBLIC_API_URL=http://nginx
     depends_on:
       - user-service
       - question-service

frontend/.gitignore

@@ -26,6 +26,7 @@ yarn-error.log*
 
 # local env files
 .env*.local
+.env.docker
 
 # vercel
 .vercel

frontend/context/UserContext.tsx

@@ -1,6 +1,7 @@
 import { createContext, useState, ReactNode, useEffect } from "react";
 
 import { User } from "@/types/user";
+import { useVerifyToken } from "@/hooks/api/auth";
 
 interface UserContextProps {
   user: User | null;
@@ -12,6 +13,16 @@ export const UserContext = createContext<UserContextProps | null>(null);
 export const UserProvider = ({ children }: { children: ReactNode }) => {
   const [user, setUser] = useState<User | null>(null);
 
+  const { data, error } = useVerifyToken();
+
+  useEffect(() => {
+    if (data) {
+      setUser(data);
+    } else if (error) {
+      setUser(null);
+    }
+  }, [data, error]);
+
   return (
     <UserContext.Provider value={{ user, setUser }}>
       {children}

frontend/hooks/api/auth.ts

@@ -1,4 +1,4 @@
-import { useMutation } from "@tanstack/react-query";
+import { useMutation, useQuery } from "@tanstack/react-query";
 import { AxiosError } from "axios";
 import { jwtDecode } from "jwt-decode";
 
@@ -10,6 +10,7 @@ import {
   RegisterCredentials,
   LogoutResponse,
 } from "@/types/auth";
+import { User } from "@/types/user";
 
 // Login: Send credentials to the server and return the response
 const login = async (credentials: Credentials): Promise<LoginResponse> => {
@@ -177,3 +178,16 @@ export const useLogout = () => {
     },
   });
 };
+
+const verifyToken = async () => {
+  const response = await axios.get(`/user-service/auth/verify-token`);
+
+  return response.data.data;
+};
+
+export const useVerifyToken = () => {
+  return useQuery<User, AxiosError>({
+    queryKey: ["verifyToken"],
+    queryFn: () => verifyToken(),
+  });
+};

frontend/middleware.ts

@@ -2,36 +2,77 @@ import type { NextRequest } from "next/server";
 
 import { NextResponse } from "next/server";
 
+// Define public routes that don't require authentication
+const publicRoutes = [
+  "/",
+  "/login",
+  "/register",
+  "/forget-password",
+  "/reset-password",
+];
+
+const baseURL = process.env.NEXT_PUBLIC_API_URL;
+
+const validateToken = async (accessToken: string | undefined): Promise<any> => {
+  try {
+    const response = await fetch(
+      `${baseURL}/api/user-service/auth/verify-token`,
+      {
+        method: "GET",
+        headers: {
+          Cookie: `accessToken=${accessToken}`,
+          "Content-Type": "application/json",
+        },
+      },
+    );
+
+    if (!response.ok) {
+      throw new Error("Token validation failed");
+    }
+
+    return await response.json();
+  } catch (error) {
+    console.error("Unexpected error:", error);
+  }
+};
+
 export async function middleware(req: NextRequest) {
   const url = req.nextUrl;
   const accessToken = req.cookies.get("accessToken")?.value;
-  const refreshToken = req.cookies.get("refreshToken")?.value;
-
-  // Define public routes that don't require authentication
-  const publicRoutes = [
-    "/",
-    "/login",
-    "/register",
-    "/forget-password",
-    "/reset-password",
-  ];
 
   // Allow access to public routes without checking tokens
   if (publicRoutes.some((route) => url.pathname === route)) {
     return NextResponse.next();
   }
 
-  // If both access token and refresh token are present, allow the user to proceed
-  if (accessToken && refreshToken) {
+  // If the access token is present, validate it
+  try {
+    const decodedAccessToken = await validateToken(accessToken);
+
+    if (!decodedAccessToken) {
+      console.log("Invalid access token, redirecting to login");
+
+      return NextResponse.redirect(new URL("/login", req.nextUrl));
+    }
+
+    // Extract user role from the decoded token (assuming the role is stored in the token)
+    const isAdmin = decodedAccessToken.data.isAdmin;
+
+    // Check if the user is trying to access an admin route (all routes starting with /admin)
+    if (url.pathname.startsWith("/admin") && !isAdmin) {
+      console.log("User is not an admin, redirecting to 403 page");
+
+      return NextResponse.redirect(new URL("/403", req.nextUrl)); // 403 Forbidden
+    }
+
+    console.log("User is authenticated");
+
     return NextResponse.next();
-  }
+  } catch (error) {
+    console.error("Token validation failed, redirecting to login:", error);
 
-  // If no access token and the user is not on a public route, redirect to login
-  if (!accessToken && !refreshToken) {
     return NextResponse.redirect(new URL("/login", req.nextUrl));
   }
-
-  return NextResponse.next();
 }
 
 // Apply middleware to specific paths

frontend/pages/403/index.tsx

@@ -0,0 +1,17 @@
+"use client";
+
+import DefaultLayout from "@/layouts/default";
+
+const The403Page = () => {
+  return (
+    <>
+      <DefaultLayout isLoggedIn={true}>
+        <div className="flex justify-center">
+          <p>403 Forbidden Access</p>
+        </div>
+      </DefaultLayout>
+    </>
+  );
+};
+
+export default The403Page;