feat: update authentication handling and integrate token usage across frontend and backend

2025-11-30 17:13:15 +00:00 · 2025-03-18 08:29:57 +05:30
parent 4406426515
commit 6583aeff08
19 changed files with 430 additions and 186 deletions
--- a/frontend/src/conversation/SharedConversation.tsx
+++ b/frontend/src/conversation/SharedConversation.tsx
@@ -1,37 +1,35 @@
-import { Query } from './conversationModels';
 import { Fragment, useEffect, useRef, useState } from 'react';
+import { Helmet } from 'react-helmet';
 import { useTranslation } from 'react-i18next';
+import { useDispatch, useSelector } from 'react-redux';
 import { useNavigate, useParams } from 'react-router-dom';

 import conversationService from '../api/services/conversationService';
-import ConversationBubble from './ConversationBubble';
 import Send from '../assets/send.svg';
 import Spinner from '../assets/spinner.svg';
+import { selectToken } from '../preferences/preferenceSlice';
+import { AppDispatch } from '../store';
+import ConversationBubble from './ConversationBubble';
+import { Query } from './conversationModels';
 import {
-  selectClientAPIKey,
-  setClientApiKey,
-  updateQuery,
  addQuery,
  fetchSharedAnswer,
-  selectStatus,
-} from './sharedConversationSlice';
-import { setIdentifier, setFetchedData } from './sharedConversationSlice';
-
-import { useDispatch } from 'react-redux';
-import { AppDispatch } from '../store';
-
-import {
+  selectClientAPIKey,
  selectDate,
-  selectTitle,
  selectQueries,
+  selectStatus,
+  selectTitle,
+  setClientApiKey,
+  setFetchedData,
+  setIdentifier,
+  updateQuery,
 } from './sharedConversationSlice';
-import { useSelector } from 'react-redux';
-import { Helmet } from 'react-helmet';

 export const SharedConversation = () => {
  const navigate = useNavigate();
  const { identifier } = useParams(); //identifier is a uuid, not conversationId

+  const token = useSelector(selectToken);
  const queries = useSelector(selectQueries);
  const title = useSelector(selectTitle);
  const date = useSelector(selectDate);
@@ -85,7 +83,7 @@ export const SharedConversation = () => {
  const fetchQueries = () => {
    identifier &&
      conversationService
-        .getSharedConversation(identifier || '')
+        .getSharedConversation(identifier || '', token)
        .then((res) => {
          if (res.status === 404 || res.status === 400)
            navigate('/pagenotfound');
--- a/frontend/src/hooks/useDefaultDocument.ts
+++ b/frontend/src/hooks/useDefaultDocument.ts
@@ -1,20 +1,22 @@
 import React from 'react';
 import { useDispatch, useSelector } from 'react-redux';

-import { getDocs } from '../preferences/preferenceApi';
 import { Doc } from '../models/misc';
+import { getDocs } from '../preferences/preferenceApi';
 import {
  selectSelectedDocs,
+  selectToken,
  setSelectedDocs,
  setSourceDocs,
 } from '../preferences/preferenceSlice';

 export default function useDefaultDocument() {
  const dispatch = useDispatch();
+  const token = useSelector(selectToken);
  const selectedDoc = useSelector(selectSelectedDocs);

  const fetchDocs = () => {
-    getDocs().then((data) => {
+    getDocs(token).then((data) => {
      dispatch(setSourceDocs(data));
      if (!selectedDoc)
        Array.isArray(data) &&
--- a/frontend/src/modals/AddToolModal.tsx
+++ b/frontend/src/modals/AddToolModal.tsx
@@ -1,12 +1,14 @@
 import React, { useRef } from 'react';
 import { useTranslation } from 'react-i18next';
+import { useSelector } from 'react-redux';

 import userService from '../api/services/userService';
+import Spinner from '../components/Spinner';
 import { useOutsideAlerter } from '../hooks';
 import { ActiveState } from '../models/misc';
+import { selectToken } from '../preferences/preferenceSlice';
 import ConfigToolModal from './ConfigToolModal';
 import { AvailableToolType } from './types';
-import Spinner from '../components/Spinner';
 import WrapperComponent from './WrapperModal';

 export default function AddToolModal({
@@ -23,6 +25,7 @@ export default function AddToolModal({
  onToolAdded: (toolId: string) => void;
 }) {
  const { t } = useTranslation();
+  const token = useSelector(selectToken);
  const modalRef = useRef<HTMLDivElement>(null);
  const [availableTools, setAvailableTools] = React.useState<
    AvailableToolType[]
@@ -42,7 +45,7 @@ export default function AddToolModal({
  const getAvailableTools = () => {
    setLoading(true);
    userService
-      .getAvailableTools()
+      .getAvailableTools(token)
      .then((res) => {
        return res.json();
      })
@@ -55,14 +58,17 @@ export default function AddToolModal({
  const handleAddTool = (tool: AvailableToolType) => {
    if (Object.keys(tool.configRequirements).length === 0) {
      userService
-        .createTool({
-          name: tool.name,
-          displayName: tool.displayName,
-          description: tool.description,
-          config: {},
-          actions: tool.actions,
-          status: true,
-        })
+        .createTool(
+          {
+            name: tool.name,
+            displayName: tool.displayName,
+            description: tool.description,
+            config: {},
+            actions: tool.actions,
+            status: true,
+          },
+          token,
+        )
        .then((res) => {
          if (res.status === 200) {
            return res.json();
--- a/frontend/src/modals/ConfigToolModal.tsx
+++ b/frontend/src/modals/ConfigToolModal.tsx
@@ -1,11 +1,13 @@
 import React from 'react';
 import { useTranslation } from 'react-i18next';
+import { useSelector } from 'react-redux';

-import WrapperModal from './WrapperModal';
+import userService from '../api/services/userService';
 import Input from '../components/Input';
 import { ActiveState } from '../models/misc';
+import { selectToken } from '../preferences/preferenceSlice';
 import { AvailableToolType } from './types';
-import userService from '../api/services/userService';
+import WrapperModal from './WrapperModal';

 interface ConfigToolModalProps {
  modalState: ActiveState;
@@ -21,18 +23,22 @@ export default function ConfigToolModal({
  getUserTools,
 }: ConfigToolModalProps) {
  const { t } = useTranslation();
+  const token = useSelector(selectToken);
  const [authKey, setAuthKey] = React.useState<string>('');

  const handleAddTool = (tool: AvailableToolType) => {
    userService
-      .createTool({
-        name: tool.name,
-        displayName: tool.displayName,
-        description: tool.description,
-        config: { token: authKey },
-        actions: tool.actions,
-        status: true,
-      })
+      .createTool(
+        {
+          name: tool.name,
+          displayName: tool.displayName,
+          description: tool.description,
+          config: { token: authKey },
+          actions: tool.actions,
+          status: true,
+        },
+        token,
+      )
      .then(() => {
        setModalState('INACTIVE');
        getUserTools();
--- a/frontend/src/modals/CreateAPIKeyModal.tsx
+++ b/frontend/src/modals/CreateAPIKeyModal.tsx
@@ -6,7 +6,7 @@ import userService from '../api/services/userService';
 import Dropdown from '../components/Dropdown';
 import Input from '../components/Input';
 import { CreateAPIKeyModalProps, Doc } from '../models/misc';
-import { selectSourceDocs } from '../preferences/preferenceSlice';
+import { selectSourceDocs, selectToken } from '../preferences/preferenceSlice';
 import WrapperModal from './WrapperModal';

 const embeddingsName =
@@ -18,6 +18,7 @@ export default function CreateAPIKeyModal({
  createAPIKey,
 }: CreateAPIKeyModalProps) {
  const { t } = useTranslation();
+  const token = useSelector(selectToken);
  const docs = useSelector(selectSourceDocs);

  const [APIKeyName, setAPIKeyName] = React.useState<string>('');
@@ -60,7 +61,7 @@ export default function CreateAPIKeyModal({
  React.useEffect(() => {
    const handleFetchPrompts = async () => {
      try {
-        const response = await userService.getPrompts();
+        const response = await userService.getPrompts(token);
        if (!response.ok) {
          throw new Error('Failed to fetch prompts');
        }
--- a/frontend/src/modals/ShareConversationModal.tsx
+++ b/frontend/src/modals/ShareConversationModal.tsx
@@ -1,15 +1,20 @@
 import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useSelector } from 'react-redux';
-import {
-  selectSourceDocs,
-  selectSelectedDocs,
-  selectChunks,
-  selectPrompt,
-} from '../preferences/preferenceSlice';
+
+import conversationService from '../api/services/conversationService';
+import Spinner from '../assets/spinner.svg';
 import Dropdown from '../components/Dropdown';
 import { Doc } from '../models/misc';
-import Spinner from '../assets/spinner.svg';
+import {
+  selectChunks,
+  selectPrompt,
+  selectSelectedDocs,
+  selectSourceDocs,
+  selectToken,
+} from '../preferences/preferenceSlice';
+import WrapperModal from './WrapperModal';
+
 const apiHost = import.meta.env.VITE_API_HOST || 'https://docsapi.arc53.com';
 const embeddingsName =
  import.meta.env.VITE_EMBEDDINGS_NAME ||
@@ -17,9 +22,6 @@ const embeddingsName =

 type StatusType = 'loading' | 'idle' | 'fetched' | 'failed';

-import conversationService from '../api/services/conversationService';
-import WrapperModal from './WrapperModal';
-
 export const ShareConversationModal = ({
  close,
  conversationId,
@@ -28,6 +30,7 @@ export const ShareConversationModal = ({
  conversationId: string;
 }) => {
  const { t } = useTranslation();
+  const token = useSelector(selectToken);

  const domain = window.location.origin;

@@ -85,7 +88,7 @@ export const ShareConversationModal = ({
      sourcePath && (payload.source = sourcePath.value);
    }
    conversationService
-      .shareConversation(isPromptable, payload)
+      .shareConversation(isPromptable, payload, token)
      .then((res) => {
        return res.json();
      })
--- a/frontend/src/settings/APIKeys.tsx
+++ b/frontend/src/settings/APIKeys.tsx
@@ -1,17 +1,20 @@
 import React, { useState } from 'react';
 import { useTranslation } from 'react-i18next';
+import { useSelector } from 'react-redux';

 import userService from '../api/services/userService';
 import Trash from '../assets/trash.svg';
-import CreateAPIKeyModal from '../modals/CreateAPIKeyModal';
-import SaveAPIKeyModal from '../modals/SaveAPIKeyModal';
-import ConfirmationModal from '../modals/ConfirmationModal';
-import { APIKeyData } from './types';
 import SkeletonLoader from '../components/SkeletonLoader';
 import { useLoaderState } from '../hooks';
+import ConfirmationModal from '../modals/ConfirmationModal';
+import CreateAPIKeyModal from '../modals/CreateAPIKeyModal';
+import SaveAPIKeyModal from '../modals/SaveAPIKeyModal';
+import { selectToken } from '../preferences/preferenceSlice';
+import { APIKeyData } from './types';

 export default function APIKeys() {
  const { t } = useTranslation();
+  const token = useSelector(selectToken);
  const [isCreateModalOpen, setCreateModal] = useState(false);
  const [isSaveKeyModalOpen, setSaveKeyModal] = useState(false);
  const [newKey, setNewKey] = useState('');
@@ -25,7 +28,7 @@ export default function APIKeys() {
  const handleFetchKeys = async () => {
    setLoading(true);
    try {
-      const response = await userService.getAPIKeys();
+      const response = await userService.getAPIKeys(token);
      if (!response.ok) {
        throw new Error('Failed to fetch API Keys');
      }
@@ -41,7 +44,7 @@ export default function APIKeys() {
  const handleDeleteKey = (id: string) => {
    setLoading(true);
    userService
-      .deleteAPIKey({ id })
+      .deleteAPIKey({ id }, token)
      .then((response) => {
        if (!response.ok) {
          throw new Error('Failed to delete API Key');
@@ -71,7 +74,7 @@ export default function APIKeys() {
  }) => {
    setLoading(true);
    userService
-      .createAPIKey(payload)
+      .createAPIKey(payload, token)
      .then((response) => {
        if (!response.ok) {
          throw new Error('Failed to create API Key');
--- a/frontend/src/settings/Analytics.tsx
+++ b/frontend/src/settings/Analytics.tsx
@@ -1,5 +1,3 @@
-import React, { useState, useEffect } from 'react';
-import { useTranslation } from 'react-i18next';
 import {
  BarElement,
  CategoryScale,
@@ -9,18 +7,21 @@ import {
  Title,
  Tooltip,
 } from 'chart.js';
+import React, { useEffect, useState } from 'react';
 import { Bar } from 'react-chartjs-2';
+import { useTranslation } from 'react-i18next';
+import { useSelector } from 'react-redux';

 import userService from '../api/services/userService';
 import Dropdown from '../components/Dropdown';
+import SkeletonLoader from '../components/SkeletonLoader';
+import { useLoaderState } from '../hooks';
+import { selectToken } from '../preferences/preferenceSlice';
 import { htmlLegendPlugin } from '../utils/chartUtils';
 import { formatDate } from '../utils/dateTimeUtils';
 import { APIKeyData } from './types';
-import { useLoaderState } from '../hooks';

 import type { ChartData } from 'chart.js';
-import SkeletonLoader from '../components/SkeletonLoader';
-
 ChartJS.register(
  CategoryScale,
  LinearScale,
@@ -32,6 +33,7 @@ ChartJS.register(

 export default function Analytics() {
  const { t } = useTranslation();
+  const token = useSelector(selectToken);

  const filterOptions = [
    { label: t('settings.analytics.filterOptions.hour'), value: 'last_hour' },
@@ -97,7 +99,7 @@ export default function Analytics() {
  const fetchChatbots = async () => {
    setLoadingChatbots(true);
    try {
-      const response = await userService.getAPIKeys();
+      const response = await userService.getAPIKeys(token);
      if (!response.ok) {
        throw new Error('Failed to fetch Chatbots');
      }
@@ -113,10 +115,13 @@ export default function Analytics() {
  const fetchMessagesData = async (chatbot_id?: string, filter?: string) => {
    setLoadingMessages(true);
    try {
-      const response = await userService.getMessageAnalytics({
-        api_key_id: chatbot_id,
-        filter_option: filter,
-      });
+      const response = await userService.getMessageAnalytics(
+        {
+          api_key_id: chatbot_id,
+          filter_option: filter,
+        },
+        token,
+      );
      if (!response.ok) {
        throw new Error('Failed to fetch analytics data');
      }
@@ -132,10 +137,13 @@ export default function Analytics() {
  const fetchTokenData = async (chatbot_id?: string, filter?: string) => {
    setLoadingTokens(true);
    try {
-      const response = await userService.getTokenAnalytics({
-        api_key_id: chatbot_id,
-        filter_option: filter,
-      });
+      const response = await userService.getTokenAnalytics(
+        {
+          api_key_id: chatbot_id,
+          filter_option: filter,
+        },
+        token,
+      );
      if (!response.ok) {
        throw new Error('Failed to fetch analytics data');
      }
@@ -151,10 +159,13 @@ export default function Analytics() {
  const fetchFeedbackData = async (chatbot_id?: string, filter?: string) => {
    setLoadingFeedback(true);
    try {
-      const response = await userService.getFeedbackAnalytics({
-        api_key_id: chatbot_id,
-        filter_option: filter,
-      });
+      const response = await userService.getFeedbackAnalytics(
+        {
+          api_key_id: chatbot_id,
+          filter_option: filter,
+        },
+        token,
+      );
      if (!response.ok) {
        throw new Error('Failed to fetch analytics data');
      }
--- a/frontend/src/settings/Documents.tsx
+++ b/frontend/src/settings/Documents.tsx
@@ -1,6 +1,6 @@
 import React, { useCallback, useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { useDispatch } from 'react-redux';
+import { useDispatch, useSelector } from 'react-redux';

 import userService from '../api/services/userService';
 import ArrowLeft from '../assets/arrow-left.svg';
@@ -21,6 +21,7 @@ import ConfirmationModal from '../modals/ConfirmationModal';
 import { ActiveState, Doc, DocumentsProps } from '../models/misc';
 import { getDocs, getDocsWithPagination } from '../preferences/preferenceApi';
 import {
+  selectToken,
  setPaginatedDocuments,
  setSourceDocs,
 } from '../preferences/preferenceSlice';
@@ -50,6 +51,7 @@ export default function Documents({
 }: DocumentsProps) {
  const { t } = useTranslation();
  const dispatch = useDispatch();
+  const token = useSelector(selectToken);

  const [searchTerm, setSearchTerm] = useState<string>('');
  const [modalState, setModalState] = useState<ActiveState>('INACTIVE');
@@ -103,6 +105,7 @@ export default function Documents({
        page,
        rowsPerPg,
        searchTerm,
+        token,
      )
        .then((data) => {
          dispatch(setPaginatedDocuments(data ? data.docs : []));
@@ -119,9 +122,9 @@ export default function Documents({
  const handleManageSync = (doc: Doc, sync_frequency: string) => {
    setLoading(true);
    userService
-      .manageSync({ source_id: doc.id, sync_frequency })
+      .manageSync({ source_id: doc.id, sync_frequency }, token)
      .then(() => {
-        return getDocs();
+        return getDocs(token);
      })
      .then((data) => {
        dispatch(setSourceDocs(data));
@@ -130,6 +133,8 @@ export default function Documents({
          sortOrder,
          currentPage,
          rowsPerPage,
+          searchTerm,
+          token,
        );
      })
      .then((paginatedData) => {
@@ -389,6 +394,7 @@ function DocumentChunks({
  handleGoBack: () => void;
 }) {
  const { t } = useTranslation();
+  const token = useSelector(selectToken);
  const [isDarkTheme] = useDarkTheme();
  const [paginatedChunks, setPaginatedChunks] = useState<ChunkType[]>([]);
  const [page, setPage] = useState(1);
@@ -406,7 +412,7 @@ function DocumentChunks({
    setLoading(true);
    try {
      userService
-        .getDocumentChunks(document.id ?? '', page, perPage)
+        .getDocumentChunks(document.id ?? '', page, perPage, token)
        .then((response) => {
          if (!response.ok) {
            setLoading(false);
@@ -431,13 +437,16 @@ function DocumentChunks({
  const handleAddChunk = (title: string, text: string) => {
    try {
      userService
-        .addChunk({
-          id: document.id ?? '',
-          text: text,
-          metadata: {
-            title: title,
+        .addChunk(
+          {
+            id: document.id ?? '',
+            text: text,
+            metadata: {
+              title: title,
+            },
          },
-        })
+          token,
+        )
        .then((response) => {
          if (!response.ok) {
            throw new Error('Failed to add chunk');
@@ -452,14 +461,17 @@ function DocumentChunks({
  const handleUpdateChunk = (title: string, text: string, chunk: ChunkType) => {
    try {
      userService
-        .updateChunk({
-          id: document.id ?? '',
-          chunk_id: chunk.doc_id,
-          text: text,
-          metadata: {
-            title: title,
+        .updateChunk(
+          {
+            id: document.id ?? '',
+            chunk_id: chunk.doc_id,
+            text: text,
+            metadata: {
+              title: title,
+            },
          },
-        })
+          token,
+        )
        .then((response) => {
          if (!response.ok) {
            throw new Error('Failed to update chunk');
@@ -474,7 +486,7 @@ function DocumentChunks({
  const handleDeleteChunk = (chunk: ChunkType) => {
    try {
      userService
-        .deleteChunk(document.id ?? '', chunk.doc_id)
+        .deleteChunk(document.id ?? '', chunk.doc_id, token)
        .then((response) => {
          if (!response.ok) {
            throw new Error('Failed to delete chunk');
--- a/frontend/src/settings/General.tsx
+++ b/frontend/src/settings/General.tsx
@@ -8,6 +8,7 @@ import { useDarkTheme } from '../hooks';
 import {
  selectChunks,
  selectPrompt,
+  selectToken,
  selectTokenLimit,
  setChunks,
  setModalStateDeleteConv,
@@ -21,6 +22,7 @@ export default function General() {
    t,
    i18n: { changeLanguage },
  } = useTranslation();
+  const token = useSelector(selectToken);
  const themes = [
    { value: 'Light', label: t('settings.general.light') },
    { value: 'Dark', label: t('settings.general.dark') },
@@ -64,7 +66,7 @@ export default function General() {
  React.useEffect(() => {
    const handleFetchPrompts = async () => {
      try {
-        const response = await userService.getPrompts();
+        const response = await userService.getPrompts(token);
        if (!response.ok) {
          throw new Error('Failed to fetch prompts');
        }
--- a/frontend/src/settings/Logs.tsx
+++ b/frontend/src/settings/Logs.tsx
@@ -1,5 +1,6 @@
-import React, { useState, useEffect, useRef, useCallback } from 'react';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
+import { useSelector } from 'react-redux';

 import userService from '../api/services/userService';
 import ChevronRight from '../assets/chevron-right.svg';
@@ -7,10 +8,12 @@ import CopyButton from '../components/CopyButton';
 import Dropdown from '../components/Dropdown';
 import SkeletonLoader from '../components/SkeletonLoader';
 import { useLoaderState } from '../hooks';
+import { selectToken } from '../preferences/preferenceSlice';
 import { APIKeyData, LogData } from './types';

 export default function Logs() {
  const { t } = useTranslation();
+  const token = useSelector(selectToken);
  const [chatbots, setChatbots] = useState<APIKeyData[]>([]);
  const [selectedChatbot, setSelectedChatbot] = useState<APIKeyData | null>();
  const [logs, setLogs] = useState<LogData[]>([]);
@@ -22,7 +25,7 @@ export default function Logs() {
  const fetchChatbots = async () => {
    setLoadingChatbots(true);
    try {
-      const response = await userService.getAPIKeys();
+      const response = await userService.getAPIKeys(token);
      if (!response.ok) {
        throw new Error('Failed to fetch Chatbots');
      }
@@ -38,11 +41,14 @@ export default function Logs() {
  const fetchLogs = async () => {
    setLoadingLogs(true);
    try {
-      const response = await userService.getLogs({
-        page: page,
-        api_key_id: selectedChatbot?.id,
-        page_size: 10,
-      });
+      const response = await userService.getLogs(
+        {
+          page: page,
+          api_key_id: selectedChatbot?.id,
+          page_size: 10,
+        },
+        token,
+      );
      if (!response.ok) {
        throw new Error('Failed to fetch logs');
      }
--- a/frontend/src/settings/Prompts.tsx
+++ b/frontend/src/settings/Prompts.tsx
@@ -1,9 +1,11 @@
 import React from 'react';
 import { useTranslation } from 'react-i18next';
+import { useSelector } from 'react-redux';

 import userService from '../api/services/userService';
 import Dropdown from '../components/Dropdown';
 import { ActiveState, PromptProps } from '../models/misc';
+import { selectToken } from '../preferences/preferenceSlice';
 import PromptsModal from '../preferences/PromptsModal';

 export default function Prompts({
@@ -24,6 +26,7 @@ export default function Prompts({
    setEditPromptName(name);
    onSelectPrompt(name, id, type);
  };
+  const token = useSelector(selectToken);
  const [newPromptName, setNewPromptName] = React.useState('');
  const [newPromptContent, setNewPromptContent] = React.useState('');
  const [editPromptName, setEditPromptName] = React.useState('');
@@ -42,10 +45,13 @@ export default function Prompts({

  const handleAddPrompt = async () => {
    try {
-      const response = await userService.createPrompt({
-        name: newPromptName,
-        content: newPromptContent,
-      });
+      const response = await userService.createPrompt(
+        {
+          name: newPromptName,
+          content: newPromptContent,
+        },
+        token,
+      );
      if (!response.ok) {
        throw new Error('Failed to add prompt');
      }
@@ -68,7 +74,7 @@ export default function Prompts({
  const handleDeletePrompt = (id: string) => {
    setPrompts(prompts.filter((prompt) => prompt.id !== id));
    userService
-      .deletePrompt({ id })
+      .deletePrompt({ id }, token)
      .then((response) => {
        if (!response.ok) {
          throw new Error('Failed to delete prompt');
@@ -84,7 +90,7 @@ export default function Prompts({

  const handleFetchPromptContent = async (id: string) => {
    try {
-      const response = await userService.getSinglePrompt(id);
+      const response = await userService.getSinglePrompt(id, token);
      if (!response.ok) {
        throw new Error('Failed to fetch prompt content');
      }
@@ -97,11 +103,14 @@ export default function Prompts({

  const handleSaveChanges = (id: string, type: string) => {
    userService
-      .updatePrompt({
-        id: id,
-        name: editPromptName,
-        content: editPromptContent,
-      })
+      .updatePrompt(
+        {
+          id: id,
+          name: editPromptName,
+          content: editPromptContent,
+        },
+        token,
+      )
      .then((response) => {
        if (!response.ok) {
          throw new Error('Failed to update prompt');
--- a/frontend/src/settings/ToolConfig.tsx
+++ b/frontend/src/settings/ToolConfig.tsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import { useSelector } from 'react-redux';

 import userService from '../api/services/userService';
 import ArrowLeft from '../assets/arrow-left.svg';
@@ -9,6 +10,7 @@ import Dropdown from '../components/Dropdown';
 import Input from '../components/Input';
 import AddActionModal from '../modals/AddActionModal';
 import { ActiveState } from '../models/misc';
+import { selectToken } from '../preferences/preferenceSlice';
 import { APIActionType, APIToolType, UserToolType } from './types';

 export default function ToolConfig({
@@ -20,6 +22,7 @@ export default function ToolConfig({
  setTool: (tool: UserToolType | APIToolType) => void;
  handleGoBack: () => void;
 }) {
+  const token = useSelector(selectToken);
  const [authKey, setAuthKey] = React.useState<string>(
    'token' in tool.config ? tool.config.token : '',
  );
@@ -56,22 +59,25 @@ export default function ToolConfig({

  const handleSaveChanges = () => {
    userService
-      .updateTool({
-        id: tool.id,
-        name: tool.name,
-        displayName: tool.displayName,
-        description: tool.description,
-        config: tool.name === 'api_tool' ? tool.config : { token: authKey },
-        actions: 'actions' in tool ? tool.actions : [],
-        status: tool.status,
-      })
+      .updateTool(
+        {
+          id: tool.id,
+          name: tool.name,
+          displayName: tool.displayName,
+          description: tool.description,
+          config: tool.name === 'api_tool' ? tool.config : { token: authKey },
+          actions: 'actions' in tool ? tool.actions : [],
+          status: tool.status,
+        },
+        token,
+      )
      .then(() => {
        handleGoBack();
      });
  };

  const handleDelete = () => {
-    userService.deleteTool({ id: tool.id }).then(() => {
+    userService.deleteTool({ id: tool.id }, token).then(() => {
      handleGoBack();
    });
  };
--- a/frontend/src/settings/Tools.tsx
+++ b/frontend/src/settings/Tools.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import { useTranslation } from 'react-i18next';
+import { useSelector } from 'react-redux';

 import userService from '../api/services/userService';
 import CogwheelIcon from '../assets/cogwheel.svg';
@@ -10,11 +11,13 @@ import Spinner from '../components/Spinner';
 import { useDarkTheme } from '../hooks';
 import AddToolModal from '../modals/AddToolModal';
 import { ActiveState } from '../models/misc';
+import { selectToken } from '../preferences/preferenceSlice';
 import ToolConfig from './ToolConfig';
 import { APIToolType, UserToolType } from './types';

 export default function Tools() {
  const { t } = useTranslation();
+  const token = useSelector(selectToken);
  const [isDarkTheme] = useDarkTheme();
  const [searchTerm, setSearchTerm] = React.useState('');
  const [addToolModalState, setAddToolModalState] =
@@ -28,7 +31,7 @@ export default function Tools() {
  const getUserTools = () => {
    setLoading(true);
    userService
-      .getUserTools()
+      .getUserTools(token)
      .then((res) => {
        return res.json();
      })
@@ -44,7 +47,7 @@ export default function Tools() {

  const updateToolStatus = (toolId: string, newStatus: boolean) => {
    userService
-      .updateToolStatus({ id: toolId, status: newStatus })
+      .updateToolStatus({ id: toolId, status: newStatus }, token)
      .then(() => {
        setUserTools((prevTools) =>
          prevTools.map((tool) =>
@@ -68,7 +71,7 @@ export default function Tools() {

  const handleToolAdded = (toolId: string) => {
    userService
-      .getUserTools()
+      .getUserTools(token)
      .then((res) => res.json())
      .then((data) => {
        const newTool = data.tools.find(
--- a/frontend/src/settings/index.tsx
+++ b/frontend/src/settings/index.tsx
@@ -11,6 +11,7 @@ import {
  selectSourceDocs,
  setPaginatedDocuments,
  setSourceDocs,
+  selectToken,
 } from '../preferences/preferenceSlice';
 import Analytics from './Analytics';
 import APIKeys from './APIKeys';
@@ -28,6 +29,7 @@ export default function Settings() {
    null,
  );

+  const token = useSelector(selectToken);
  const documents = useSelector(selectSourceDocs);
  const paginatedDocuments = useSelector(selectPaginatedDocuments);
  const updateWidgetScreenshot = (screenshot: File | null) => {
@@ -41,7 +43,7 @@ export default function Settings() {

  const handleDeleteClick = (index: number, doc: Doc) => {
    userService
-      .deletePath(doc.id ?? '')
+      .deletePath(doc.id ?? '', token)
      .then((response) => {
        if (response.ok && documents) {
          if (paginatedDocuments) {
--- a/frontend/src/upload/Upload.tsx
+++ b/frontend/src/upload/Upload.tsx
@@ -9,21 +9,22 @@ import WebsiteCollect from '../assets/website_collect.svg';
 import Dropdown from '../components/Dropdown';
 import Input from '../components/Input';
 import ToggleSwitch from '../components/ToggleSwitch';
+import WrapperModal from '../modals/WrapperModal';
 import { ActiveState, Doc } from '../models/misc';
 import { getDocs } from '../preferences/preferenceApi';
 import {
+  selectSourceDocs,
+  selectToken,
  setSelectedDocs,
  setSourceDocs,
-  selectSourceDocs,
 } from '../preferences/preferenceSlice';
-import WrapperModal from '../modals/WrapperModal';
+import { IngestorDefaultConfigs } from '../upload/types/ingestor';
 import {
-  IngestorType,
+  FormField,
  IngestorConfig,
  IngestorFormSchemas,
-  FormField,
+  IngestorType,
 } from './types/ingestor';
-import { IngestorDefaultConfigs } from '../upload/types/ingestor';

 function Upload({
  receivedFile = [],
@@ -40,6 +41,7 @@ function Upload({
  close: () => void;
  onSuccessfulUpload?: () => void;
 }) {
+  const token = useSelector(selectToken);
  const [docName, setDocName] = useState(receivedFile[0]?.name);
  const [remoteName, setRemoteName] = useState('');
  const [files, setfiles] = useState<File[]>(receivedFile);
@@ -297,12 +299,12 @@ function Upload({
      if ((progress?.percentage ?? 0) < 100) {
        timeoutID = setTimeout(() => {
          userService
-            .getTaskStatus(progress?.taskId as string)
+            .getTaskStatus(progress?.taskId as string, null)
            .then((data) => data.json())
            .then((data) => {
              if (data.status == 'SUCCESS') {
                if (data.result.limited === true) {
-                  getDocs().then((data) => {
+                  getDocs(token).then((data) => {
                    dispatch(setSourceDocs(data));
                    dispatch(
                      setSelectedDocs(
@@ -322,7 +324,7 @@ function Upload({
                      },
                  );
                } else {
-                  getDocs().then((data) => {
+                  getDocs(token).then((data) => {
                    dispatch(setSourceDocs(data));
                    const docIds = new Set(
                      (Array.isArray(sourceDocs) &&
@@ -413,6 +415,7 @@ function Upload({
      }, 3000);
    };
    xhr.open('POST', `${apiHost + '/api/upload'}`);
+    xhr.setRequestHeader('Authorization', `Bearer ${token}`);
    xhr.send(formData);
  };