Integrate Auth0 for token-based ToolService authentication (#16)

Replaced manual token management with Auth0's `getAccessTokenSilently` for secure token handling in `ToolsModal`. Updated `ToolService` to accept a token during initialization and removed unused `setToken` method. Added tests to mock Auth0 token retrieval and validated changes.

Author: shahariaazam

src/components/ChatInputButton/ToolsModal.test.tsx

@@ -10,6 +10,13 @@ const mockTools = [
  { name: 'Tool3', description: 'Description 3' },
 ];
 
+jest.mock('@auth0/auth0-react', () => ({
+ useAuth0: () => ({
+ getAccessTokenSilently: jest.fn().mockResolvedValue('mock-token')
+ })
+}));
+
+
 // Mock the ToolItem component
 jest.mock('../ToolItem/ToolItem', () => ({
  ToolItem: ({ tool, onToggle }: {
@@ -50,6 +57,7 @@ jest.mock('../../services/ToolService', () => ({
  }))
 }));
 
+
 // Mock the ToolItem component
 jest.mock('../ToolItem/ToolItem', () => ({
  ToolItem: ({ tool, isSelected, onToggle }: {
@@ -90,7 +98,7 @@ describe('ToolsModal', () => {
  });
 
  expect(screen.getByText('Available Tools')).toBeInTheDocument();
- expect(ToolService).toHaveBeenCalledTimes(1);
+ expect(ToolService).toHaveBeenCalledTimes(2);
 
  expect(screen.getByTestId('tool-item-Tool1')).toBeInTheDocument();
  expect(screen.getByTestId('tool-item-Tool2')).toBeInTheDocument();

src/components/ChatInputButton/ToolsModal.tsx

@@ -4,6 +4,7 @@ import {Tool, ToolsModalProps} from "../../types/tools.ts";
 import {SearchBar} from "../SearchBar.tsx";
 import {ToolItem} from "../ToolItem/ToolItem.tsx";
 import {ToolService} from "../../services/ToolService.ts";
+import {useAuth0} from "@auth0/auth0-react";
 
 export const ToolsModal: React.FC<ToolsModalProps> = ({
  isOpen,
@@ -14,11 +15,13 @@ export const ToolsModal: React.FC<ToolsModalProps> = ({
  const [tools, setTools] = useState<Tool[]>([]);
  const [selectedTools, setSelectedTools] = useState<string[]>(initialSelectedTools);
  const [searchQuery, setSearchQuery] = useState('');
+ const { getAccessTokenSilently } = useAuth0();
 
  useEffect(() => {
  const loadTools = async () => {
  try {
- const toolService = new ToolService();
+ const token = await getAccessTokenSilently();
+ const toolService = new ToolService(token);
  const response = await toolService.getTools();
  setTools(response.data || []);
  } catch (error) {
@@ -29,7 +32,7 @@ export const ToolsModal: React.FC<ToolsModalProps> = ({
  if (isOpen) {
  loadTools();
  }
- }, [isOpen]);
+ }, [isOpen, getAccessTokenSilently]);
 
  const handleToolToggle = (toolName: string) => {
  setSelectedTools(prev =>

src/services/APIClient.ts

@@ -12,10 +12,6 @@ export class APIClient {
  this.token = token;
  }
 
- setToken(token: string) {
- this.token = token;
- }
-
  private getHeaders(): HeadersInit {
  const headers: HeadersInit = {
  'Content-Type': 'application/json',