feat: implement JWT authentication and token management in frontend and backend

frontend/src/preferences/preferenceApi.ts

@@ -3,9 +3,9 @@ import userService from '../api/services/userService';
 import { Doc, GetDocsResponse } from '../models/misc';
 
 //Fetches all JSON objects from the source. We only use the objects with the "model" property in SelectDocsModal.tsx. Hopefully can clean up the source file later.
-export async function getDocs(): Promise<Doc[] | null> {
+export async function getDocs(token: string | null): Promise<Doc[] | null> {
   try {
-    const response = await userService.getDocs();
+    const response = await userService.getDocs(token);
     const data = await response.json();
 
     const docs: Doc[] = [];
@@ -26,10 +26,11 @@ export async function getDocsWithPagination(
   pageNumber = 1,
   rowsPerPage = 10,
   searchTerm = '',
+  token: string | null,
 ): Promise<GetDocsResponse | null> {
   try {
     const query = `sort=${sort}&order=${order}&page=${pageNumber}&rows=${rowsPerPage}&search=${searchTerm}`;
-    const response = await userService.getDocsWithPagination(query);
+    const response = await userService.getDocsWithPagination(query, token);
     const data = await response.json();
     const docs: Doc[] = [];
     Array.isArray(data.paginated) &&
@@ -48,12 +49,12 @@ export async function getDocsWithPagination(
   }
 }
 
-export async function getConversations(): Promise<{
+export async function getConversations(token: string | null): Promise<{
   data: { name: string; id: string }[] | null;
   loading: boolean;
 }> {
   try {
-    const response = await conversationService.getConversations();
+    const response = await conversationService.getConversations(token);
     const data = await response.json();
 
     const conversations: { name: string; id: string }[] = [];
@@ -100,8 +101,11 @@ export function setLocalRecentDocs(doc: Doc | null): void {
     docPath = 'local' + '/' + doc.name + '/';
   }
   userService
-    .checkDocs({
-      docs: docPath,
-    })
+    .checkDocs(
+      {
+        docs: docPath,
+      },
+      null,
+    )
     .then((response) => response.json());
 }

frontend/src/preferences/preferenceSlice.ts

@@ -19,6 +19,7 @@ export interface Preference {
     data: { name: string; id: string }[] | null;
     loading: boolean;
   };
+  token: string | null;
   modalState: ActiveState;
   paginatedDocuments: Doc[] | null;
 }
@@ -42,6 +43,7 @@ const initialState: Preference = {
     data: null,
     loading: false,
   },
+  token: localStorage.getItem('authToken') || null,
   modalState: 'INACTIVE',
   paginatedDocuments: null,
 };
@@ -65,6 +67,9 @@ export const prefSlice = createSlice({
     setConversations: (state, action) => {
       state.conversations = action.payload;
     },
+    setToken: (state, action) => {
+      state.token = action.payload;
+    },
     setPrompt: (state, action) => {
       state.prompt = action.payload;
     },
@@ -85,6 +90,7 @@ export const {
   setSelectedDocs,
   setSourceDocs,
   setConversations,
+  setToken,
   setPrompt,
   setChunks,
   setTokenLimit,
@@ -157,6 +163,7 @@ export const selectConversations = (state: RootState) =>
   state.preference.conversations;
 export const selectConversationId = (state: RootState) =>
   state.conversation.conversationId;
+export const selectToken = (state: RootState) => state.preference.token;
 export const selectPrompt = (state: RootState) => state.preference.prompt;
 export const selectChunks = (state: RootState) => state.preference.chunks;
 export const selectTokenLimit = (state: RootState) =>