Verify a user's auth state

Author: nicolelim02

backend/user-service/app.ts

@@ -12,27 +12,15 @@ dotenv.config();
 
 const file = fs.readFileSync("./swagger.yml", "utf-8");
 const swaggerDocument = yaml.parse(file);
-const origin = process.env.ORIGINS
+const allowedOrigins = process.env.ORIGINS
   ? process.env.ORIGINS.split(",")
   : ["http://localhost:5173", "http://127.0.0.1:5173"];
-
 const app = express();
 
 app.use(express.urlencoded({ extended: true }));
 app.use(express.json());
-app.use(
-  cors({
-    origin: origin,
-    credentials: true,
-  })
-); // config cors so that front-end can use
-app.options(
-  "*",
-  cors({
-    origin: ["http://localhost:5173", "http://127.0.0.1:5173"],
-    credentials: true,
-  })
-);
+app.use(cors({ origin: allowedOrigins, credentials: true })); // config cors so that front-end can use
+app.options("*", cors({ origin: allowedOrigins, credentials: true }));
 
 // To handle CORS Errors
 app.use((req: Request, res: Response, next: NextFunction) => {

backend/user-service/controller/auth-controller.ts

@@ -23,14 +23,11 @@ export async function handleLogin(
       }
 
       const accessToken = jwt.sign(
-        {
-          id: user.id,
-        },
+        { id: user.id },
         process.env.JWT_SECRET as string,
-        {
-          expiresIn: "7d",
-        }
+        { expiresIn: "7d" }
       );
+      console.log(accessToken);
       return res.status(200).json({
         message: "User logged in",
         data: { accessToken, user: formatUserResponse(user) },

backend/user-service/middleware/basic-access-control.ts

@@ -3,7 +3,11 @@ import jwt from "jsonwebtoken";
 import { findUserById as _findUserById } from "../model/repository";
 import { AuthenticatedRequest } from "../types/request";
 
-export function verifyAccessToken(req: AuthenticatedRequest, res: Response, next: NextFunction) {
+export function verifyAccessToken(
+  req: AuthenticatedRequest,
+  res: Response,
+  next: NextFunction
+) {
   const authHeader = req.headers["authorization"];
   if (!authHeader) {
     return res.status(401).json({ message: "Authentication failed" });
@@ -25,22 +29,36 @@ export function verifyAccessToken(req: AuthenticatedRequest, res: Response, next
     req.user = {
       id: dbUser.id,
       username: dbUser.username,
+      firstName: dbUser.firstName,
+      lastName: dbUser.lastName,
       email: dbUser.email,
+      biography: dbUser.biography,
+      profilePictureUrl: dbUser.profilePictureUrl,
       isAdmin: dbUser.isAdmin,
     };
     next();
   });
 }
 
-export function verifyIsAdmin(req: AuthenticatedRequest, res: Response, next: NextFunction) {
+export function verifyIsAdmin(
+  req: AuthenticatedRequest,
+  res: Response,
+  next: NextFunction
+) {
   if (req.user?.isAdmin) {
     next();
   } else {
-    return res.status(403).json({ message: "Not authorized to access this resource" });
+    return res
+      .status(403)
+      .json({ message: "Not authorized to access this resource" });
   }
 }
 
-export function verifyIsOwnerOrAdmin(req: AuthenticatedRequest, res: Response, next: NextFunction) {
+export function verifyIsOwnerOrAdmin(
+  req: AuthenticatedRequest,
+  res: Response,
+  next: NextFunction
+) {
   if (req.user?.isAdmin) {
     return next();
   }
@@ -52,5 +70,7 @@ export function verifyIsOwnerOrAdmin(req: AuthenticatedRequest, res: Response, n
     return next();
   }
 
-  return res.status(403).json({ message: "Not authorized to access this resource" });
+  return res
+    .status(403)
+    .json({ message: "Not authorized to access this resource" });
 }

frontend/src/contexts/AuthContext.tsx

@@ -1,6 +1,7 @@
 /* eslint-disable react-refresh/only-export-components */
 
-import { createContext, useContext, useState } from "react";
+import { createContext, useContext, useEffect, useState } from "react";
+import { userClient } from "../utils/api";
 
 type User = {
   id: string;
@@ -27,6 +28,16 @@ const AuthProvider: React.FC<{ children?: React.ReactNode }> = (props) => {
   const { children } = props;
   const [user, setUser] = useState<User | null>(null);
 
+  useEffect(() => {
+    const accessToken = localStorage.getItem("token");
+    userClient
+      .get("/auth/verify-token", {
+        headers: { Authorization: `Bearer ${accessToken}` },
+      })
+      .then((res) => setUser(res.data.data))
+      .catch((_err) => setUser(null));
+  }, []);
+
   // TODO
   const signup = () => {};
 

frontend/src/utils/api.ts

@@ -1,6 +1,6 @@
 import axios from "axios";
 
-const usersUrl = "http://localhost:3001/api/";
+const usersUrl = "http://localhost:3001/api";
 const questionsUrl = "http://localhost:3000/api/questions";
 
 export const questionClient = axios.create({