Issue 84 Reconnect Client-Server and Role field JWT Payload

client/src/components/layout.tsx

@@ -1,10 +1,8 @@
 import React, { useEffect, useState } from "react";
 
 import Navbar from "@/components/navbar";
-import { WaitingLoader } from "@/components/ui/loading";
-import { useAuth } from "@/context/auth-provider";
-import { useFetchData } from "@/hooks/use-fetch-data";
-import { User } from "@/types/user";
+import { useTokenStore } from "@/store/token-store";
+import { Role } from "@/types/user";
 
 import Sidebar from "./sidebar";
 import Footer from "./ui/footer";
@@ -22,28 +20,21 @@ interface LayoutProps {
  */
 export default function Layout({ children }: LayoutProps) {
   const [isAuthChecked, setIsAuthChecked] = useState(false);
-  const { userId } = useAuth();
-  const isLoggedIn = Boolean(userId);
+  const { access } = useTokenStore(); // access the JWT token
+  const [role, setRole] = useState<string | undefined>(undefined);
 
-  // wait for auth to be checked before rendering
   useEffect(() => {
+    if (access?.decoded) {
+      const userRole = access.decoded["role"];
+      setRole(userRole);
+    }
+    // wait for auth to be checked before rendering
     setIsAuthChecked(true);
-  }, []);
-
-  const {
-    data: user,
-    error,
-    isLoading,
-  } = useFetchData<User>({
-    queryKey: ["user", userId],
-    endpoint: "/users/me",
-    staleTime: 5 * 60 * 1000,
-    enabled: Boolean(userId),
-  });
+  }, [access]);
 
   if (!isAuthChecked) return null;
 
-  if (!isLoggedIn) {
+  if (!access) {
     return (
       <div>
         <Navbar />
@@ -53,8 +44,16 @@ export default function Layout({ children }: LayoutProps) {
     );
   }
 
-  if (isLoading) return <WaitingLoader />;
-  if (!user) return <div>{error?.message || "Failed to load user data."}</div>;
+  if (!role) {
+    return (
+      <div>
+        <Navbar />
+        <main>
+          <div>Failed to get user role.</div>
+        </main>
+      </div>
+    );
+  }
 
-  return <Sidebar role={user.role}>{children}</Sidebar>;
+  return <Sidebar role={role.toLowerCase() as Role}>{children}</Sidebar>;
 }

client/src/lib/api.ts

@@ -1,12 +1,101 @@
-import axios from "axios";
+import axios, { AxiosError, InternalAxiosRequestConfig } from "axios";
+
+import { useTokenStore } from "@/store/token-store";
 
 export const backendURL = process.env.NEXT_PUBLIC_BACKEND_URL_BASE;
 
-const baseURL =
-  process.env.NODE_ENV === "development"
-    ? "http://localhost:3000/api" // temporarily use port 3000 in dev for mock data
-    : process.env.NEXT_PUBLIC_BACKEND_URL;
+const baseURL = process.env.NEXT_PUBLIC_BACKEND_URL;
+
+const api = axios.create({
+  baseURL,
+  headers: {
+    "Content-Type": "application/json",
+  },
+});
+api.interceptors.request.use(
+  async (config: InternalAxiosRequestConfig<any>) => {
+    const accessToken = useTokenStore.getState().access;
+    if (accessToken) {
+      config.headers.Authorization = `Bearer ${accessToken.encoded}`;
+    }
+    return config;
+  },
+  (error) => Promise.reject(error),
+);
+
+// Queue of failed request promises waiting for refreshed token
+let failedQueue: {
+  resolve: () => void;
+  reject: (_: AxiosError | null) => void;
+}[] = [];
+let isRefreshing = false;
+
+const processQueue = (error: AxiosError | null) => {
+  failedQueue.forEach((prom) => {
+    if (error) {
+      prom.reject(error);
+    } else {
+      prom.resolve();
+    }
+  });
+  failedQueue = [];
+};
+
+api.interceptors.response.use(
+  (response) => response,
+  async (error) => {
+    const tokenState = useTokenStore.getState();
+    const originalRequest = error.config;
+
+    const handleError = (error: AxiosError | null) => {
+      processQueue(error);
+      tokenState.clear();
+      return Promise.reject(error);
+    };
+
+    const refreshTokenValid =
+      tokenState.refresh != undefined && tokenState.refresh.expiry > Date.now();
+    const isAuthError =
+      error.response?.status === 401 || error.response?.status === 403;
+
+    if (
+      refreshTokenValid == true &&
+      isAuthError &&
+      originalRequest.url !== "/auth/refresh/" &&
+      originalRequest._retry !== true
+    ) {
+      if (isRefreshing) {
+        return new Promise<void>(function (resolve, reject) {
+          failedQueue.push({ resolve, reject });
+        })
+          .then(() => api(originalRequest))
+          .catch((err) => Promise.reject(err));
+      }
+      isRefreshing = true;
+      originalRequest._retry = true;
+      return api
+        .post("/auth/refresh/", {
+          refresh: tokenState.refresh!.encoded,
+        })
+        .then((res) => {
+          if (res.data.access) {
+            tokenState.setAccess(res.data.access);
+          }
+          processQueue(null);
+
+          return api(originalRequest);
+        }, handleError)
+        .finally(() => {
+          isRefreshing = false;
+        });
+    }
+
+    if (isAuthError) {
+      return handleError(error);
+    }
 
-const api = axios.create({ baseURL });
+    return Promise.reject(error);
+  },
+);
 
 export default api;

client/src/pages/question/index.tsx

@@ -17,7 +17,7 @@ export default function Index() {
     error: QuestionError,
   } = useFetchData<Question[]>({
     queryKey: ["question.list"],
-    endpoint: "/question/list",
+    endpoint: "/questions/question-bank/",
   });
 
   // Tracks the current page number for pagination.

client/src/types/globals.d.ts

@@ -29,5 +29,6 @@ declare module "jwt-decode" {
    */
   export interface JwtPayload extends OriginalJwtPayload {
     user_id: string;
+    role: string | undefined;
   }
 }

server/api/auth/serializers.py

@@ -0,0 +1,19 @@
+from django.contrib.auth.models import User
+from rest_framework_simplejwt.serializers import TokenObtainPairSerializer
+
+
+class CustomTokenObtainPairSerializer(TokenObtainPairSerializer):
+    @classmethod
+    def get_token(cls, user: User):
+        role = "admin" if user.is_staff else None
+
+        if hasattr(user, "student"):
+            role = "student"
+        elif hasattr(user, "teacher"):
+            role = "teacher"
+
+        token = super().get_token(user)
+        token['is_superuser'] = user.is_superuser
+        token['role'] = role
+
+        return token

server/api/auth/urls.py

@@ -10,13 +10,14 @@
 
 from django.urls import path, include, re_path
 from rest_framework_simplejwt.views import (
-    TokenObtainPairView,
+    # TokenObtainPairView,
     TokenRefreshView,
     TokenVerifyView,
 )
+from .views import CustomTokenObtainPairSerializer
 
 urlpatterns = [
-    path("token/", TokenObtainPairView.as_view(), name="jwt_token"),
+    path("token/", CustomTokenObtainPairSerializer.as_view(), name="jwt_token"),
     path("refresh/", TokenRefreshView.as_view(), name="jwt_refresh"),
     path("verify/", TokenVerifyView.as_view(), name="jwt_verify"),
     re_path(r"^api-auth/", include("rest_framework.urls", namespace="rest_framework")),

server/api/auth/views.py

@@ -0,0 +1,6 @@
+from rest_framework_simplejwt.views import TokenObtainPairView
+from .serializers import CustomTokenObtainPairSerializer
+
+
+class CustomTokenObtainPairSerializer(TokenObtainPairView):
+    serializer_class = CustomTokenObtainPairSerializer